:root{
  --red:#E11B25;
  --red-dark:#A40F18;
  --navy:#203746;
  --ink:#191D20;
  --muted:#7D8285;
  --muted-soft:#A7ABAD;
  --page:#EFEFED;
  --surface:#F7F7F5;
  --surface-2:#FBFBFA;
  --white:#fff;
  --line:rgba(28,34,38,.105);
  --line-soft:rgba(28,34,38,.060);
  --highlight:rgba(255,255,255,.94);
  --red-soft:rgba(225,27,37,.085);
  --red-faint:rgba(225,27,37,.045);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--page)}
body{
  margin:0;
  font-family:"Yekan Bakh","YekanBakh",Tahoma,Arial,sans-serif;
  color:var(--ink);
  background:var(--page);
}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}
button{font:inherit}
.container{width:min(1180px,calc(100% - 40px));margin-inline:auto}
.shell{
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 var(--highlight),
    inset 0 -1px 0 rgba(28,34,38,.025),
    0 1px 2px rgba(18,22,25,.025);
}


/* ===== HERO V8 — full screen, cleaner composition ===== */
.hero{
  width:100%;
  min-height:100svh;
  margin:0;
  padding:0;
  background:var(--page);
}
.hero > .container{
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  padding:0!important;
}
.hero-inner{
  position:relative;
  min-height:100svh;
  width:100%;
  overflow:hidden;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:var(--page)!important;
  display:grid;
  grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  align-items:center;
  padding:54px max(5vw,44px);
}
.hero-inner:before{
  content:"";
  position:absolute;
  width:520px;height:520px;
  left:-170px;top:50%;
  transform:translateY(-50%);
  border-radius:50%;
  border:1px solid rgba(32,55,70,.05);
  box-shadow:
    0 0 0 58px rgba(32,55,70,.012),
    0 0 0 116px rgba(225,27,37,.008);
}
.hero-copy{
  position:relative;
  z-index:3;
  padding:0 0 0 4vw;
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.hero .kicker{margin-bottom:24px}
.hero h1{
  margin:0;
  max-width:720px;
  font-size:clamp(52px,5.4vw,84px);
  line-height:1.12;
  letter-spacing:-2.5px;
  font-weight:650;
}
.hero h1 b{color:var(--red);font-weight:650}
.hero p{
  max-width:650px;
  margin:20px 0 0;
  color:#7D8589;
  font-size:15px;
  line-height:2.05;
}
.hero-actions{display:flex;gap:10px;margin-top:28px}
.hero-meta{
  margin-top:42px;
  padding-top:18px;
  border-top:1px solid rgba(28,34,38,.07);
  display:grid;
  grid-template-columns:repeat(3,1fr);
}
.hero-meta>div{padding:0 16px;border-left:1px solid rgba(28,34,38,.055)}
.hero-meta>div:last-child{border-left:0}
.hero-visual{
  position:relative;
  z-index:2;
  min-height:70svh;
  display:grid;
  place-items:center;
  padding:20px;
}
.hero-product-stage{
  width:min(72vh,620px);
  max-width:100%;
  aspect-ratio:1/1;
  position:relative;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:
    radial-gradient(circle,rgba(255,255,255,.95) 0 41%,rgba(255,255,255,.44) 42% 57%,transparent 58%);
}
.hero-product-stage:before,
.hero-product-stage:after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(28,34,38,.065);
}
.hero-product-stage:before{inset:11%}
.hero-product-stage:after{inset:23%;border-color:rgba(225,27,37,.10)}
.hero-product{position:relative;z-index:2;width:70%;filter:drop-shadow(0 30px 24px rgba(18,22,25,.10))}
.hero-visual-card{
  position:absolute;
  left:5%;
  bottom:10%;
  min-width:180px;
  padding:14px 16px;
  border:1px solid var(--line);
  border-radius:22px;
  background:rgba(255,255,255,.88);
  box-shadow:inset 0 1px 0 #fff,0 10px 28px rgba(18,22,25,.05);
  backdrop-filter:blur(12px);
}

/* ===== shared headings ===== */
.section{padding:82px 0}
.section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:28px}
.eyebrow{color:var(--red);font-size:11px;font-weight:700;margin-bottom:7px}
.section-title{margin:0;font-size:34px;line-height:1.3;font-weight:650}
.section-copy{max-width:560px;margin:0;color:var(--muted);font-size:13px;line-height:1.95}


/* ===== FEATURED PRODUCTS, exact approved language ===== */
.products{padding-top:72px}
.product-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
.pcard{
  overflow:hidden;border-radius:38px;background:var(--surface);
  border:1px solid var(--line);
  box-shadow:inset 0 1px 0 var(--highlight),0 1px 2px rgba(18,22,25,.025),0 12px 34px rgba(18,22,25,.04);
}
.pcard-top{padding:14px 16px 11px;display:flex;direction:ltr}
.score{
  height:32px;padding:0 12px;border-radius:999px;
  display:flex;align-items:center;gap:8px;background:var(--red-soft);color:var(--red);
  border:1px solid rgba(225,27,37,.10);font-size:10.5px;font-weight:700;direction:rtl
}
.score i{width:7px;height:7px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-faint)}
.pmedia{
  width:calc(100% - 22px);aspect-ratio:1/1;margin:0 11px;border-radius:30px;
  border:1px solid rgba(28,34,38,.095);background:#fff;display:grid;place-items:center;overflow:hidden;
}
.pmedia img{width:68%;height:68%;object-fit:contain}
.pbody{padding:14px 16px 16px}
.pmeta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:9px}
.chip{height:27px;padding:0 9px;border-radius:999px;border:1px solid var(--line-soft);background:#fff;display:flex;align-items:center;gap:6px;font-size:10px;font-weight:650;color:#60676B}
.chip i{width:6px;height:6px;border-radius:50%;background:var(--red)}
.brandname{font:600 10px Inter,Arial,sans-serif;color:#A0A5A8}
.pcard h3{margin:0;font-size:19px;line-height:1.5}
.divider{height:1px;background:var(--line-soft);margin:14px 0;box-shadow:0 1px 0 rgba(255,255,255,.8)}
.pactions{display:grid;grid-template-columns:1.25fr .85fr;gap:8px;direction:ltr}
.pactions a{height:44px;border-radius:999px;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:650}
.details{background:#fff;border:1px solid var(--line)}
.buy{position:relative;background:var(--red);color:#fff;border:1px solid rgba(151,7,17,.18);padding-right:40px}
.buy i{position:absolute;right:5px;width:34px;height:34px;border-radius:50%;background:var(--red-dark);display:grid;place-items:center}

/* ===== CATEGORY — same section, now a single sliding carousel ===== */
.categories{padding-top:88px}
.cat-controls{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-bottom:22px}




.cat-arrows{display:flex;gap:6px;direction:ltr}
.cat-arrow{
  width:42px;
  height:42px;
  border-radius:50%;
  border:1px solid rgba(28,34,38,.105);
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96));
  color:var(--navy);
  display:grid;
  place-items:center;
  cursor:pointer;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(28,34,38,.028),
    0 1px 2px rgba(18,22,25,.025);
  transition:.2s ease;
  outline:0;
  -webkit-tap-highlight-color:transparent;
}
.cat-arrow:hover{
  transform:translateY(-1px);
  color:var(--red);
  border-color:rgba(225,27,37,.16);
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)),
    var(--red-soft);
}
.cat-arrow span{
  width:22px;
  height:22px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid rgba(28,34,38,.06);
  font-size:16px;
  line-height:1;
}
.cat-viewport{overflow:hidden;border-radius:42px}
.cat-track{display:flex;direction:ltr;transition:transform .55s cubic-bezier(.22,.74,.23,1);will-change:transform}
.cat-slide{flex:0 0 100%;width:100%;direction:rtl}
.cat-panel{
  min-height:500px;border-radius:42px;background:var(--surface);
  display:grid;grid-template-columns:1.1fr .9fr;overflow:hidden;margin:0;
}
.cat-copy{padding:52px 48px;display:flex;flex-direction:column;justify-content:center}
.cat-copy .kicker{margin-bottom:20px}
.cat-copy h3{margin:0 0 15px;font-size:38px}
.cat-copy p{margin:0;color:#7b8388;line-height:2;font-size:13px}
.cat-points{display:flex;flex-wrap:wrap;gap:7px;margin:22px 0}
.cat-points span{
  height:33px;padding:0 11px;border-radius:999px;background:#fff;border:1px solid var(--line-soft);
  display:flex;align-items:center;font-size:10px;color:#687176
}
.cat-copy .btn{
  width:max-content;background:var(--red);color:#fff;border-color:rgba(151,7,17,.18);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 1px 2px rgba(122,10,18,.10)
}
.cat-image{
  margin:16px;border:1px solid var(--line);border-radius:32px;background:#fff;
  display:grid;place-items:center;overflow:hidden
}
.cat-image img{width:78%;height:78%;object-fit:contain}



/* ===== ARAS JOURNEY V6 ===== */
.trust,.trust *{font-family:"Yekan Bakh","YekanBakh",Tahoma,Arial,sans-serif!important}
.trust-shell{position:relative;overflow:hidden;border-radius:42px;background:var(--surface);padding:28px}
.journey-head{display:grid;grid-template-columns:.9fr 1.1fr;gap:32px;align-items:end;padding:6px 8px 26px}
.journey-head h2{margin:0;font-size:42px;line-height:1.35;font-weight:650}
.journey-head p{margin:0;color:#7D8589;font-size:13px;line-height:2.05}
.journey-main{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;min-height:500px}
.journey-stage{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:34px;background:#fff;padding:34px;display:flex;flex-direction:column;justify-content:space-between;box-shadow:inset 0 1px 0 #fff}
.journey-stage:before{content:"";position:absolute;width:360px;height:360px;right:-180px;top:-190px;border-radius:50%;border:1px solid rgba(32,55,70,.045);box-shadow:0 0 0 44px rgba(32,55,70,.014),0 0 0 88px rgba(225,27,37,.008)}
.journey-stage-top{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:center;gap:12px}
.journey-path{display:flex;gap:8px;direction:ltr;color:#A0A5A8;font-size:9px;font-weight:650}
.journey-path b{color:var(--navy)}
.journey-label{min-height:32px;padding:0 11px;border:1px solid rgba(225,27,37,.13);border-radius:999px;background:var(--red-soft);color:var(--red);display:inline-flex;align-items:center;gap:7px;font-size:9.5px;font-weight:700}
.journey-label i{width:6px;height:6px;border-radius:50%;background:var(--red);box-shadow:0 0 0 4px var(--red-faint)}
.journey-stage-content{position:relative;z-index:2;padding:28px 0 22px}
.journey-year-wrap{direction:ltr;display:flex;align-items:flex-end;gap:10px;min-height:94px}
.journey-year-caption{padding-bottom:9px;color:#A0A5A8;font-size:9px}
.journey-stage h3{margin:22px 0 0;color:var(--navy);font-size:28px;line-height:1.5;font-weight:650}
.journey-stage p{margin:10px 0 0;max-width:690px;color:#7D8589;font-size:13px;line-height:2.05}
.journey-stage-footer{position:relative;z-index:2;padding-top:18px;border-top:1px solid var(--line-soft);display:flex;align-items:center;gap:14px}
.journey-stage-footer>span{color:#A0A5A8;font-size:9px}
.journey-bars{flex:1;display:flex;gap:5px;direction:ltr}
.journey-bars i{height:7px;flex:1;border-radius:999px;background:#E1E4E5;transition:.25s ease}
.journey-bars i.past{background:var(--navy)} .journey-bars i.active{background:var(--red)}
.journey-nav{border:1px solid var(--line);border-radius:34px;background:#fff;padding:12px;display:flex;flex-direction:column;gap:7px;box-shadow:inset 0 1px 0 #fff}
.journey-step{min-height:70px;border:1px solid transparent;border-radius:22px;background:transparent;padding:10px 12px;display:grid;grid-template-columns:64px 1fr;align-items:center;gap:12px;text-align:right;color:#596369;cursor:pointer;transition:.22s ease;outline:0}
.journey-step:hover{background:rgba(255,255,255,.78);border-color:rgba(28,34,38,.065)}
.journey-step.active{color:var(--red);border-color:rgba(225,27,37,.15);background:var(--red-soft);box-shadow:inset 0 1px 0 rgba(255,255,255,.88)}
.journey-step-year{direction:ltr;display:flex;justify-content:center}
.journey-step-copy strong{display:block;font-size:11px;line-height:1.55;font-weight:650}
.journey-step-copy span{display:block;margin-top:3px;color:#9AA0A4;font-size:8.5px}
.journey-today{margin-top:18px;border-radius:34px;background:var(--navy);padding:22px;color:#fff;display:grid;grid-template-columns:260px 1fr;gap:18px;overflow:hidden}
.journey-today-copy small{color:rgba(255,255,255,.43);font-size:9px}
.journey-today-copy h3{margin:10px 0 0;font-size:20px;line-height:1.6;font-weight:650}
.journey-today-copy p{margin:7px 0 0;color:rgba(255,255,255,.58);font-size:9.7px;line-height:1.9}
.journey-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}
.journey-metric{min-width:0;min-height:118px;padding:12px;border:1px solid rgba(255,255,255,.09);border-radius:18px;background:rgba(255,255,255,.045);display:flex;flex-direction:column;justify-content:space-between}
.journey-metric small{color:rgba(255,255,255,.4);font-size:7.5px}
.journey-metric-value{direction:ltr;display:flex;align-items:flex-end;gap:5px}
.journey-metric-value .unit{padding-bottom:4px;color:rgba(255,255,255,.48);font-size:7.5px}
.journey-metric>span{color:rgba(255,255,255,.68);font-size:8px}

/* odometer */
.trust .odometer{direction:ltr;position:relative;display:block;width:var(--odo-width);min-width:var(--odo-width);max-width:var(--odo-width);height:var(--odo-height);min-height:var(--odo-height);max-height:var(--odo-height);overflow:visible;font-family:"Yekan Bakh","YekanBakh",Tahoma,Arial,sans-serif!important;font-size:var(--font-size);font-weight:500;line-height:1;letter-spacing:-.03em;color:inherit;font-variant-numeric:tabular-nums}
.trust .odo-int,.trust .odo-frac{position:absolute;top:0;height:var(--odo-height);display:grid}
.trust .odo-int{left:0;grid-template-columns:repeat(var(--int-slots),var(--digit-w));width:calc(var(--int-slots)*var(--digit-w))}
.trust .odo-frac{left:calc(var(--int-slots)*var(--digit-w));grid-template-columns:repeat(var(--frac-slots),var(--digit-w));width:calc(var(--frac-slots)*var(--digit-w))}
.trust .odo-dot{position:absolute;left:var(--dot-x,0px);bottom:0;width:var(--dot-col);height:var(--odo-height);display:flex;align-items:flex-end;justify-content:center;pointer-events:none}
.trust .odo-slot{position:relative;width:var(--digit-w);min-width:var(--digit-w);max-width:var(--digit-w);height:var(--odo-height);overflow:hidden}
.trust .odo-slot.is-empty{visibility:hidden}
.trust .odo-reel{position:absolute;top:0;left:0;width:100%;display:flex;flex-direction:column;transform:translateY(0);will-change:transform}
.trust .odo-reel span{width:100%;height:var(--odo-height);min-height:var(--odo-height);max-height:var(--odo-height);flex:0 0 var(--odo-height);display:flex;align-items:flex-end;justify-content:center;line-height:1}
.trust .odo-reel.animate{transition:transform 1.05s cubic-bezier(.16,.72,.18,1)}
@media(max-width:1000px){.journey-main{grid-template-columns:1fr}.journey-nav{display:grid;grid-template-columns:1fr 1fr}.journey-today{grid-template-columns:1fr}.journey-metrics{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.trust-shell{padding:14px;border-radius:32px}.journey-head{grid-template-columns:1fr}.journey-head h2{font-size:31px}.journey-stage{padding:22px;border-radius:28px}.journey-nav{grid-template-columns:1fr}.journey-today{padding:18px;border-radius:28px}.journey-metrics{grid-template-columns:1fr 1fr}.journey-metric:first-child{grid-column:1/-1}}

/* ===== after sales stays same content role, navy new-language component ===== */
.after-shell{
  position:relative;overflow:hidden;min-height:430px;border-radius:42px;padding:34px;
  background:var(--navy);color:#fff;border:1px solid rgba(16,31,40,.2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 18px 44px rgba(18,31,40,.10);
  display:grid;grid-template-columns:1.15fr .85fr;gap:24px;
}
.after-shell:before{
  content:"";position:absolute;width:360px;height:360px;right:-140px;top:-170px;border-radius:50%;
  border:1px solid rgba(255,255,255,.07);box-shadow:0 0 0 55px rgba(255,255,255,.02),0 0 0 110px rgba(255,255,255,.01)
}
.after-copy{position:relative;z-index:2;padding:34px 24px;display:flex;flex-direction:column;justify-content:center}
.after-copy .kicker{background:rgba(255,255,255,.065);border-color:rgba(255,255,255,.12);color:#fff}
.after-copy h2{margin:20px 0 12px;font-size:38px}
.after-copy p{margin:0;color:rgba(255,255,255,.62);font-size:13px;line-height:2}
.after-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:24px}
.after-stat{padding:14px 15px;border-top:1px solid rgba(255,255,255,.10)}
.after-stat strong{display:block;font-size:18px}
.after-stat span{color:rgba(255,255,255,.48);font-size:10px}
.service-card{
  position:relative;z-index:2;margin:0;min-height:340px;padding:24px;border-radius:32px;
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.035));
  border:1px solid rgba(255,255,255,.12);box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
  display:flex;flex-direction:column;justify-content:space-between
}
.service-card small{color:#FF727A;font-size:10px}
.service-list{display:grid;gap:9px;margin:20px 0}
.service-list div{min-height:42px;border-bottom:1px solid rgba(255,255,255,.08);display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.72);font-size:11px}
.service-list b{color:#fff}
.service-card .btn{align-self:flex-start;background:var(--red);color:#fff;border-color:rgba(151,7,17,.18)}

.footer-space{height:80px}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;min-height:100svh}
  .hero{min-height:100svh}
  .hero-copy{padding:150px 34px 30px}
  .hero h1{font-size:52px}
  .hero-visual{min-height:50svh;padding:30px 24px 60px}
  .brand-shell{grid-template-columns:1fr}
  .brand-intro{min-height:126px}
  .brand-intro{border-left:0;border-bottom:1px solid var(--line-soft)}
  .product-grid{grid-template-columns:1fr 1fr}
  .cat-panel,.after-shell{grid-template-columns:1fr}
  .trust-grid{grid-template-columns:1fr}
}

/* v3.0.23 — polished compact mobile Hero composition. */
@media(max-width:900px){
  .arap-soft-home-root .bhero-grid,
  .arap-soft-home-root .bhero.is-single-component .bhero-grid{
    position:relative !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:1fr !important;
  }
  .arap-soft-home-root .bhero-main,
  .arap-soft-home-root .bhero.is-single-component .bhero-main{
    position:relative !important;
    display:block !important;
    height:clamp(620px,158vw,680px) !important;
    min-height:clamp(620px,158vw,680px) !important;
    max-height:clamp(620px,158vw,680px) !important;
    padding:30px 18px 78px !important;
    overflow:hidden !important;
  }
  .arap-soft-home-root .bhero-kicker{
    position:relative !important;
    inset:auto !important;
    margin:0 0 20px !important;
  }
  .arap-soft-home-root .bhero-copy-block{
    position:relative !important;
    z-index:6 !important;
    gap:12px !important;
  }
  .arap-soft-home-root .bhero-copy-block h1{
    font-size:clamp(29px,8.1vw,38px) !important;
    line-height:1.34 !important;
  }
  .arap-soft-home-root .bhero-copy-block p{
    font-size:12px !important;
    line-height:1.82 !important;
  }
  .arap-soft-home-root .bhero-visual{
    position:absolute !important;
    inset:auto auto 64px 50% !important;
    transform:translateX(-50%) !important;
    width:min(68%,300px) !important;
    max-width:300px !important;
    margin:0 !important;
    opacity:1 !important;
    z-index:3 !important;
  }
  .arap-soft-home-root .bhero-visual img,
  .arap-soft-home-root .bhero-visual img.arap-hero-image-ready{
    opacity:1 !important;
    filter:drop-shadow(0 14px 16px rgba(18,22,25,.07)) !important;
  }
  .arap-soft-home-root .bhero-actions{
    position:absolute !important;
    inset:auto auto 18px 18px !important;
    margin:0 !important;
    z-index:12 !important;
  }

  /* Three-component slides keep their two secondary cards as a tiny bottom row. */
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-main{
    padding-bottom:164px !important;
  }
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-visual{
    bottom:146px !important;
    width:min(57%,250px) !important;
  }
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-actions{
    bottom:102px !important;
  }
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-side{
    position:absolute !important;
    inset:auto 14px 14px 14px !important;
    z-index:10 !important;
    display:grid !important;
    grid-template-columns:1fr 1fr !important;
    grid-template-rows:76px !important;
    gap:9px !important;
    visibility:visible !important;
    pointer-events:auto !important;
  }
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-sq{
    width:auto !important;
    height:76px !important;
    min-height:76px !important;
    aspect-ratio:auto !important;
    padding:10px 12px !important;
    border-radius:20px !important;
    display:flex !important;
    flex-direction:row !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:9px !important;
  }
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-w-icon{
    width:30px !important;
    height:30px !important;
    flex:0 0 30px !important;
  }
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-sq h4{
    margin:0 !important;
    font-size:11px !important;
    line-height:1.5 !important;
  }
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-sq .sub,
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-w-chip,
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-support-cta{
    display:none !important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-side{
    display:none !important;
  }
}
@media(max-width:640px){
  .container{width:calc(100% - 20px)}
  .hero-inner{border-radius:0}
  .hero-copy{padding:138px 22px 22px}
  .hero h1{font-size:42px;letter-spacing:-1px}
  .hero p{font-size:13px}
  .hero-meta{grid-template-columns:1fr;gap:12px}
  .hero-meta > div{border-left:0;border-bottom:1px solid var(--line-soft);padding:10px 0}
  .hero-visual{min-height:360px;padding:20px}
  .hero-visual-card{left:20px;bottom:24px}
  .section{padding:60px 0}
  .section-head{display:block}
  .section-copy{margin-top:10px}
  .product-grid{grid-template-columns:1fr}
  .cat-controls{align-items:flex-start}
  
  .cat-copy{padding:32px 24px}
  .cat-copy h3{font-size:30px}
  .trust-shell{padding:14px}
  .trust-main{padding:24px}
  .trust-main h2{font-size:32px}
  .trust-timeline{grid-template-columns:1fr;gap:18px}
  .trust-node{border-left:0;border-bottom:1px solid var(--line-soft);padding:0 0 14px}
  .trust-node:before{display:none}
  .trust-network{grid-template-columns:1fr 1fr;padding:18px}
  .after-shell{padding:18px}
  .after-copy{padding:20px 10px}
}

.hero .shell{
  border:0 !important;
  box-shadow:none !important;
}
.hero-inner:after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 74% 40%,rgba(255,255,255,.72),rgba(255,255,255,0) 31%),
    radial-gradient(circle at 20% 70%,rgba(255,255,255,.34),rgba(255,255,255,0) 28%);
  opacity:.9;
}
.hero-copy,.hero-visual{position:relative;z-index:2}

@media(max-width:900px){
  .brand-stage{min-height:220px}
  .brand-header{position:relative;top:auto;right:auto;padding:20px 20px 0}
  .brand-loop{top:72px}
  .trust-head{display:block}
  .trust-head p{margin-top:10px}
  .trust-board{grid-template-columns:1fr}
  .trust-summary{min-height:220px}
}
@media(max-width:640px){
  .hero-product-stage{width:100%}
  .brands{padding-top:24px}
  .brand-stage{border-radius:30px}
  .brand-item{width:180px;flex-basis:180px}
  .brand-item img{max-width:120px}
  .cat-arrows{gap:5px}
  .cat-arrow{width:38px;height:38px}
  .trust-shell{padding:14px;border-radius:32px}
  .trust-head h2{font-size:31px}
  .trust-board{padding:18px;border-radius:28px}
  .timeline-year{font-size:58px}
  .timeline-title{font-size:20px}
  .timeline-point{width:58px}
  .timeline-point span{font-size:8px}
  .trust-summary{padding:20px}
}

/* ===== V7 JOURNEY REFINEMENTS ===== */
.journey-head{
  display:block !important;
  padding:8px 8px 28px !important;
}
.journey-head h2{
  white-space:nowrap !important;
  max-width:none !important;
  font-size:38px !important;
  line-height:1.3 !important;
}
.journey-head p{
  margin-top:12px !important;
  max-width:920px !important;
  font-size:13px !important;
  line-height:2.05 !important;
}

/* Main year odometer: fixed 4-digit geometry for Persian glyphs */
.journey-main-odo{
  width:176px !important;
  min-width:176px !important;
  max-width:176px !important;
  height:84px !important;
  min-height:84px !important;
  max-height:84px !important;
  --digit-w:44px !important;
  --odo-height:84px !important;
  --font-size:72px !important;
  letter-spacing:-.06em !important;
}
.journey-main-odo .odo-slot{
  width:44px !important;
  min-width:44px !important;
  max-width:44px !important;
  height:84px !important;
}
.journey-main-odo .odo-reel span{
  height:84px !important;
  min-height:84px !important;
  max-height:84px !important;
  flex-basis:84px !important;
}

/* Mini years in the step list: make them readable and stable */
.journey-step-year .odometer{
  width:56px !important;
  min-width:56px !important;
  max-width:56px !important;
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  --digit-w:14px !important;
  --odo-height:26px !important;
  --font-size:20px !important;
  letter-spacing:-.04em !important;
}
.journey-step-year .odo-slot{
  width:14px !important;
  min-width:14px !important;
  max-width:14px !important;
  height:26px !important;
}
.journey-step-year .odo-reel span{
  height:26px !important;
  min-height:26px !important;
  max-height:26px !important;
  flex-basis:26px !important;
}

/* Replace the old development bars with a real timeline */
.journey-stage-footer{
  display:block !important;
  padding-top:22px !important;
}
.journey-stage-footer > span{
  display:block !important;
  margin-bottom:16px !important;
  color:#A0A5A8 !important;
  font-size:9px !important;
}
.journey-bars{
  position:relative !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:flex-start !important;
  gap:0 !important;
  direction:rtl !important;
  padding-top:0 !important;
  min-height:48px !important;
}
.journey-bars:before{
  content:"" !important;
  position:absolute !important;
  top:7px !important;
  right:0 !important;
  left:0 !important;
  height:2px !important;
  background:#DADFE1 !important;
  border-radius:999px !important;
}
.journey-bars:after{
  content:"" !important;
  position:absolute !important;
  top:7px !important;
  right:0 !important;
  width:var(--journey-progress,0%) !important;
  height:2px !important;
  background:var(--red) !important;
  border-radius:999px !important;
  transition:width .38s cubic-bezier(.2,.8,.2,1) !important;
}
.journey-bars .journey-node{
  position:relative !important;
  z-index:2 !important;
  width:16.666% !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  gap:8px !important;
  color:#9AA0A4 !important;
}
.journey-bars .journey-node i{
  width:12px !important;
  height:12px !important;
  flex:none !important;
  border-radius:50% !important;
  background:#E0E4E5 !important;
  border:3px solid #fff !important;
  box-shadow:0 0 0 1px rgba(28,34,38,.10) !important;
  transition:.2s ease !important;
}
.journey-bars .journey-node span{
  font-size:8px !important;
  line-height:1 !important;
  color:#8E9599 !important;
}
.journey-bars .journey-node.active i{
  background:var(--red) !important;
  box-shadow:0 0 0 5px var(--red-faint) !important;
}
.journey-bars .journey-node.active span{
  color:var(--red) !important;
  font-weight:700 !important;
}
.journey-bars .journey-node.past i{
  background:var(--red) !important;
}

@media(max-width:760px){
  .journey-head h2{
    white-space:normal !important;
    font-size:30px !important;
  }
}

/* ===== PRODUCT CARD V8 — smaller, detail-preserving ===== */
.product-grid{
  grid-template-columns:repeat(3,minmax(0,318px))!important;
  justify-content:center!important;
  gap:20px!important;
}
.pcard{
  width:100%!important;
  max-width:318px!important;
  border-radius:34px!important;
}
.pcard-top{padding:12px 14px 10px!important}
.score{height:30px!important;padding:0 11px!important;font-size:10px!important}
.pmedia{
  width:calc(100% - 20px)!important;
  margin:0 10px!important;
  border-radius:28px!important;
}
.pmedia img{width:58%!important;height:58%!important;object-fit:contain!important}
.pbody{padding:13px 14px 14px!important}
.pmeta{margin-bottom:8px!important}
.chip{height:26px!important;font-size:9.5px!important}
.brandname{font-size:9px!important}
.pcard h3{font-size:18px!important;line-height:1.48!important}
.divider{margin:12px 0!important}
.pactions a{height:42px!important;font-size:10.5px!important}
.buy i{width:32px!important;height:32px!important;right:5px!important}

/* ===== CATEGORY ARROWS V8 ===== */
.cat-arrow{
  width:42px!important;height:42px!important;
  position:relative!important;
  border-radius:50%!important;
  border:1px solid rgba(28,34,38,.105)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96))!important;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(18,22,25,.025)!important;
  color:transparent!important;
  font-size:0!important;
}
.cat-arrow span{display:none!important}
.cat-arrow:before{
  content:""!important;
  width:8px!important;height:8px!important;
  border-top:2px solid var(--navy)!important;
  border-right:2px solid var(--navy)!important;
  position:absolute!important;
  top:50%!important;left:50%!important;
  transform-origin:center!important;
}
#catPrev:before{transform:translate(-35%,-50%) rotate(-135deg)!important}
#catNext:before{transform:translate(-65%,-50%) rotate(45deg)!important}
.cat-arrow:hover{
  border-color:rgba(225,27,37,.16)!important;
  background:var(--red-soft)!important;
}
.cat-arrow:hover:before{
  border-color:var(--red)!important;
}

/* ===== CATEGORY SLIDE V8 — equal dimensions ===== */
.cat-viewport{min-height:500px!important}
.cat-track{align-items:stretch!important}
.cat-slide{height:500px!important;display:flex!important}
.cat-panel{
  width:100%!important;
  height:500px!important;
  min-height:500px!important;
  max-height:500px!important;
  grid-template-columns:1.08fr .92fr!important;
  margin:0!important;
}
.cat-copy{
  height:100%!important;
  min-height:0!important;
  padding:44px 44px!important;
  justify-content:center!important;
}
.cat-image{
  height:calc(100% - 32px)!important;
  min-height:0!important;
  margin:16px!important;
}
.cat-image img{
  width:72%!important;
  height:72%!important;
  max-width:72%!important;
  max-height:72%!important;
  object-fit:contain!important;
}

@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:40px 22px}
  .hero-copy{padding:90px 0 0}
  .hero-visual{min-height:46svh}
  .brand-stage{grid-template-columns:1fr}
  .brand-head{border-left:0;border-bottom:1px solid var(--line-soft)}
  .product-grid{grid-template-columns:repeat(2,minmax(0,318px))!important}
}
@media(max-width:640px){
  .hero-inner{padding:24px 16px}
  .hero-copy{padding-top:70px}
  .hero h1{font-size:42px}
  .hero-meta{grid-template-columns:1fr}
  .hero-meta>div{border-left:0;border-bottom:1px solid var(--line-soft);padding:10px 0}
  .brand-item{width:165px;flex-basis:165px}
  .product-grid{grid-template-columns:minmax(0,318px)!important}
  .cat-slide,.cat-panel{height:auto!important;min-height:0!important;max-height:none!important}
  .cat-panel{grid-template-columns:1fr!important}
  .cat-image{height:300px!important}
}

/* ===== V9 BUTTON SYSTEM FIX ===== */

/* Category CTA — restore proper Soft Industrial red pill */
.cat-copy .btn{
  width:max-content !important;
  min-width:148px !important;
  min-height:46px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  color:#fff !important;
  background:#E11B25 !important;
  border:1px solid rgba(151,7,17,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(124,8,16,.10),
    0 1px 2px rgba(122,10,18,.10) !important;
  font-size:11.5px !important;
  font-weight:700 !important;
  line-height:1 !important;
  text-decoration:none !important;
  cursor:pointer !important;
  transition:.2s ease !important;
}
.cat-copy .btn:hover{
  transform:translateY(-1px) !important;
  background:#D71923 !important;
}

/* Product card actions — correct direction, hit area and alignment */
.pactions{
  display:grid !important;
  grid-template-columns:minmax(0,1.28fr) minmax(0,.82fr) !important;
  gap:8px !important;
  align-items:stretch !important;
  direction:ltr !important;
  margin-top:0 !important;
}
.pactions a{
  position:relative !important;
  height:42px !important;
  min-height:42px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  cursor:pointer !important;
  pointer-events:auto !important;
  user-select:none !important;
  -webkit-tap-highlight-color:transparent !important;
  outline:0 !important;
  line-height:1 !important;
}

/* Physical LEFT = DigiKala */
.pactions .buy{
  grid-column:1 !important;
  direction:rtl !important;
  color:#fff !important;
  background:#E11B25 !important;
  border:1px solid rgba(151,7,17,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(124,8,16,.10),
    0 1px 2px rgba(122,10,18,.10) !important;
  padding:0 42px 0 14px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
}
.pactions .buy:hover{
  background:#D71923 !important;
  transform:translateY(-1px) !important;
}

/* Dark circular chevron on physical RIGHT of red CTA */
.pactions .buy i{
  position:absolute !important;
  top:50% !important;
  right:5px !important;
  left:auto !important;
  transform:translateY(-50%) !important;
  width:32px !important;
  height:32px !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  background:#A40F18 !important;
  color:transparent !important;
  font-size:0 !important;
  border:1px solid rgba(112,7,13,.22) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12) !important;
}
.pactions .buy i::before{
  content:"" !important;
  width:7px !important;
  height:7px !important;
  border-top:2px solid #fff !important;
  border-right:2px solid #fff !important;
  transform:rotate(45deg) !important;
  display:block !important;
}

/* Physical RIGHT = product details */
.pactions .details{
  grid-column:2 !important;
  direction:rtl !important;
  color:#191D20 !important;
  background:#fff !important;
  border:1px solid rgba(28,34,38,.105) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 1px 2px rgba(18,22,25,.025) !important;
  padding:0 12px !important;
  font-size:10.5px !important;
  font-weight:700 !important;
}
.pactions .details:hover{
  color:#E11B25 !important;
  border-color:rgba(225,27,37,.16) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)),
    rgba(225,27,37,.045) !important;
}

/* Make sure nested decorative elements never block clicks */
.pactions .buy i,
.pactions .buy i::before{
  pointer-events:none !important;
}

@media(max-width:640px){
  .pactions{
    grid-template-columns:minmax(0,1.25fr) minmax(0,.85fr) !important;
  }
}

/* =========================================================
   V14 — CLEAN FINAL OVERRIDES
   ========================================================= */

/* ---------- PAGE OPEN POSITION ---------- */
html{scroll-behavior:auto !important}

/* ---------- MOTION SYSTEM ---------- */
html:not(.motion-ready) [data-reveal]{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
}
.motion-ready [data-reveal]{
  opacity:0;
  transform:translate3d(0,34px,0);
  transition:
    opacity .78s cubic-bezier(.16,1,.3,1),
    transform .96s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.motion-ready [data-reveal].is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* card entrance = more separated, more attractive */
.motion-ready .pcard[data-reveal="component"]{
  opacity:0;
  transform:translate3d(0,58px,0) scale(.96);
  filter:blur(6px);
  transition:
    opacity .9s cubic-bezier(.16,1,.3,1),
    transform 1.08s cubic-bezier(.16,1,.3,1),
    filter .82s ease;
}
.motion-ready .pcard[data-reveal="component"].is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
  filter:blur(0);
}
.product-grid .pcard:nth-child(1){--reveal-delay:0ms}
.product-grid .pcard:nth-child(2){--reveal-delay:140ms}
.product-grid .pcard:nth-child(3){--reveal-delay:280ms}

/* ---------- PRODUCT CARD RED CTA ---------- */
/* circle stays on physical RIGHT */
.pactions .buy{
  position:relative !important;
  padding:0 42px 0 14px !important;
}
.pactions .buy i{
  position:absolute !important;
  top:50% !important;
  right:5px !important;
  left:auto !important;
  width:32px !important;
  height:32px !important;
  transform:translateY(-50%) !important;
  border-radius:50% !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 !important;
  margin:0 !important;
  line-height:0 !important;
  font-size:0 !important;
}
.pactions .buy i::before{
  content:"" !important;
  display:block !important;
  width:8px !important;
  height:8px !important;
  border-top:2px solid #fff !important;
  border-right:2px solid #fff !important;
  box-sizing:border-box !important;
  transform:translateX(-1px) rotate(45deg) !important;
  transform-origin:center center !important;
  margin:0 !important;
}

/* ---------- AFTER SALES ---------- */
/* remove the extra visible frame around the copy/text side */
.after-copy{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:0 !important;
}
.after-copy::before,
.after-copy::after{
  content:none !important;
  display:none !important;
}

/* proper red service CTA */
.service-card .btn{
  width:max-content !important;
  min-width:162px !important;
  min-height:46px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  color:#fff !important;
  background:#E11B25 !important;
  border:1px solid rgba(151,7,17,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(124,8,16,.10),
    0 1px 2px rgba(122,10,18,.10) !important;
  text-decoration:none !important;
  font-size:11px !important;
  font-weight:700 !important;
  line-height:1 !important;
  cursor:pointer !important;
}
.service-card .btn:hover{
  background:#D71923 !important;
  transform:translateY(-1px) !important;
}

/* remove any inner border wrapping the after-sales text column */
.after-shell > .after-copy{
  border:0 !important;
}
.after-shell > .after-copy > *{
  border-left:0 !important;
  border-right:0 !important;
}

/* ---------- ACCESSIBILITY ---------- */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{
    opacity:1 !important;
    transform:none !important;
    filter:none !important;
  }
}

/* v3.0.21 — mobile Hero layout lock.
   The invisible side row keeps exactly the same geometry as 3-card slides;
   the single main card spans that area, so later sections never jump. */
@media(max-width:900px){
  .arap-soft-home-root .bhero.is-single-component .bhero-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-main{
    grid-column:1 !important;
    grid-row:1 / 3 !important;
    align-self:stretch !important;
    min-height:100% !important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-side{
    display:grid !important;
    grid-column:1 !important;
    grid-row:2 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
}

/* v3.0.18 — preserve native, compositor-friendly scrolling on touch devices. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root [data-scroll-motion],
  .arap-soft-home-root .product-grid .pcard{
    transform:none !important;
    will-change:auto !important;
  }
  .motion-ready .arap-soft-home-root [data-reveal]{
    transform:translate3d(0,14px,0);
    transition-duration:.48s,.58s !important;
  }
  .motion-ready .arap-soft-home-root [data-reveal].is-visible{
    transform:translate3d(0,0,0);
  }
}

/* v3.0.30 — authoritative mobile card state: fixed geometry, opacity only. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero .bhero-side,
  .arap-soft-home-root .bhero.is-changing .bhero-side,
  .arap-soft-home-root .bhero.is-entering .bhero-side,
  .arap-soft-home-root .bhero.is-single-component .bhero-side,
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-side{
    position:absolute!important;
    inset:auto 14px 14px 14px!important;
    z-index:10!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:76px!important;
    gap:9px!important;
    width:auto!important;
    height:76px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    animation:none!important;
    pointer-events:auto!important;
    will-change:auto!important;
    transition:opacity .22s ease!important;
  }
  .arap-soft-home-root .bhero .bhero-side .bhero-sq{
    width:auto!important;
    height:76px!important;
    min-height:76px!important;
    max-height:76px!important;
    aspect-ratio:auto!important;
    transform:none!important;
    animation:none!important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-changing.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-entering.is-single-component .bhero-side{
    opacity:0!important;
    visibility:visible!important;
    transform:none!important;
    pointer-events:none!important;
  }
}

/* v3.0.29 — persistent cards: slide content changes never hide the layer. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-side,
  .arap-soft-home-root .bhero.is-changing:not(.is-single-component) .bhero-side,
  .arap-soft-home-root .bhero.is-entering:not(.is-single-component) .bhero-side{
    display:grid!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
    animation:none!important;
    pointer-events:auto!important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-changing.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-entering.is-single-component .bhero-side{
    display:grid!important;
    opacity:0!important;
    visibility:hidden!important;
    transform:translate3d(0,6px,0)!important;
    animation:none!important;
    pointer-events:none!important;
  }
}

/* v3.0.27 — stable, soft mobile side-card transitions. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero .bhero-side,
  .arap-soft-home-root .bhero.is-single-component .bhero-side,
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-side{
    position:absolute!important;
    inset:auto 14px 14px 14px!important;
    z-index:10!important;
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    grid-template-rows:76px!important;
    gap:9px!important;
    opacity:1!important;
    visibility:visible!important;
    transform:translate3d(0,0,0)!important;
    pointer-events:auto!important;
    will-change:opacity,transform;
    transition:opacity .34s cubic-bezier(.22,.8,.24,1),transform .42s cubic-bezier(.22,.8,.24,1),visibility 0s linear 0s!important;
  }
  .arap-soft-home-root .bhero.is-changing .bhero-side{
    opacity:0!important;
    transform:translate3d(0,7px,0)!important;
    pointer-events:none!important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-side{
    opacity:0!important;
    visibility:hidden!important;
    transform:translate3d(0,7px,0)!important;
    pointer-events:none!important;
    transition:opacity .28s cubic-bezier(.22,.8,.24,1),transform .36s cubic-bezier(.22,.8,.24,1),visibility 0s linear .36s!important;
  }
  .arap-soft-home-root .bhero.is-entering:not(.is-single-component) .bhero-side{
    animation:arapHeroSideCardsIn .44s cubic-bezier(.16,1,.3,1) both!important;
  }
}
@keyframes arapHeroSideCardsIn{
  from{opacity:0;transform:translate3d(0,7px,0)}
  to{opacity:1;transform:translate3d(0,0,0)}
}


/* ===== BRAND VISUAL RESTORED FROM V12 ===== */
/* BRAND: minimal, no big card */
.brands{
  padding:0 0 78px !important;
}
.brand-stage{
  width:min(1180px,calc(100% - 40px)) !important;
  min-height:118px !important;
  margin:0 auto !important;
  display:block !important;
  position:relative !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}
.brand-head{
  position:relative !important;
  z-index:3 !important;
  width:100% !important;
  min-height:auto !important;
  padding:0 0 14px !important;
  border:0 !important;
  background:transparent !important;
  display:flex !important;
  flex-direction:row !important;
  align-items:center !important;
  justify-content:space-between !important;
}
.brand-head small{
  color:#A0A5A8 !important;
  font-size:8.5px !important;
  letter-spacing:.04em !important;
}
.brand-head strong{
  margin:0 !important;
  color:#6A7378 !important;
  font-size:11px !important;
  font-weight:600 !important;
}
.brand-head p{display:none !important}

.brand-loop{
  position:relative !important;
  overflow:hidden !important;
  min-height:80px !important;
}
.brand-loop::before,
.brand-loop::after{
  content:"" !important;
  position:absolute !important;
  top:0 !important;
  bottom:0 !important;
  width:72px !important;
  z-index:4 !important;
  pointer-events:none !important;
}
.brand-loop::before{
  right:0 !important;
  background:linear-gradient(90deg,transparent,var(--page)) !important;
}
.brand-loop::after{
  left:0 !important;
  background:linear-gradient(-90deg,transparent,var(--page)) !important;
}
.brand-track{
  width:max-content !important;
  min-height:80px !important;
  display:flex !important;
  align-items:center !important;
  animation:brandLoopV12 26s linear infinite !important;
  will-change:transform !important;
  direction:ltr !important;
}
.brand-stage:hover .brand-track{
  animation-play-state:paused !important;
}
.brand-group{
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
}
.brand-item{
  width:220px !important;
  flex:0 0 220px !important;
  min-height:80px !important;
  padding:12px 26px !important;
  display:grid !important;
  place-items:center !important;
  border:0 !important;
  position:relative !important;
}
.brand-item::before,
.brand-item::after{
  display:none !important;
}
.brand-item img{
  max-width:150px !important;
  max-height:52px !important;
  width:auto !important;
  height:auto !important;
  object-fit:contain !important;
  filter:grayscale(1) saturate(0) contrast(.88) opacity(.42) !important;
  opacity:1 !important;
  transform:none !important;
  transition:
    filter .28s ease,
    transform .28s cubic-bezier(.2,.8,.2,1) !important;
}
.brand-item:hover img{
  filter:grayscale(0) saturate(1) contrast(1) opacity(1) !important;
  transform:translateY(-2px) scale(1.025) !important;
}
@keyframes brandLoopV12{
  from{transform:translateX(0)}
  to{transform:translateX(-50%)}
}



/* ===== V16 BRAND LOOP ENGINE — VISUAL-NEUTRAL / SEAMLESS ===== */
.brand-loop{
  overflow:hidden !important;
  position:relative !important;
}
.brand-track{
  display:flex !important;
  align-items:center !important;
  width:max-content !important;
  min-width:max-content !important;
  gap:0 !important;
  animation:none !important;
  transform:translate3d(0,0,0);
  will-change:transform !important;
}
.brand-group{
  display:flex !important;
  flex:0 0 auto !important;
  align-items:center !important;
  gap:0 !important;
}
.brand-item{
  flex:0 0 auto !important;
}
.brand-item img{
  filter:grayscale(1) saturate(0) contrast(.88) opacity(.42) !important;
  transition:filter .26s ease,transform .26s ease !important;
}
.brand-item:hover img{
  filter:grayscale(0) saturate(1) contrast(1) opacity(1) !important;
  transform:translateY(-2px) scale(1.025) !important;
}


/* =========================================================
   V18 — BRAND SECTION REBUILT FROM SCRATCH
   ========================================================= */
.brands-v18{
  padding:18px 0 74px !important;
  margin:0 !important;
  background:var(--page) !important;
}
.brand-v18-wrap{
  width:min(1180px,calc(100% - 40px));
  margin:0 auto;
}
.brand-v18-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  min-height:26px;
  margin-bottom:16px;
}
.brand-v18-fa{
  color:#677176;
  font-size:10px;
  font-weight:650;
}
.brand-v18-en{
  color:#A0A5A8;
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.05em;
  direction:ltr;
}
.brand-v18-viewport{
  position:relative;
  width:100%;
  height:92px;
  overflow:hidden;
}
.brand-v18-viewport::before,
.brand-v18-viewport::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:70px;
  z-index:5;
  pointer-events:none;
}
.brand-v18-viewport::before{
  right:0;
  background:linear-gradient(90deg,rgba(239,239,237,0),var(--page));
}
.brand-v18-viewport::after{
  left:0;
  background:linear-gradient(-90deg,rgba(239,239,237,0),var(--page));
}
.brand-v18-track{
  position:absolute;
  top:0;
  left:0;
  height:92px;
  display:flex;
  align-items:center;
  width:max-content;
  will-change:transform;
  transform:translate3d(0,0,0);
}
.brand-v18-cycle{
  display:flex;
  align-items:center;
  flex:0 0 auto;
  height:92px;
}
.brand-marquee-item{
  width:210px;
  flex:0 0 210px;
  height:92px;
  display:grid;
  place-items:center;
  padding:14px 24px;
}
.brand-marquee-item img{
  display:block;
  width:auto;
  height:auto;
  max-width:145px;
  max-height:48px;
  object-fit:contain;
  opacity:1;
  filter:grayscale(1) saturate(0) contrast(.88) opacity(.42);
  transform:translateY(0) scale(1);
  transition:
    filter .26s ease,
    transform .26s cubic-bezier(.2,.8,.2,1);
}
.brand-marquee-item:hover img{
  filter:grayscale(0) saturate(1) contrast(1) opacity(1);
  transform:translateY(-2px) scale(1.025);
}

@media(max-width:640px){
  .brand-v18-wrap{width:calc(100% - 20px)}
  .brand-v18-viewport{height:82px}
  .brand-v18-track,.brand-v18-cycle{height:82px}
  .brand-marquee-item{
    width:160px;
    flex-basis:160px;
    height:82px;
    padding:12px 18px;
  }
  .brand-marquee-item img{
    max-width:116px;
    max-height:40px;
  }
}


/* =========================================================
   V19 — SOFT INDUSTRIAL MOTION + LIQUID CATEGORY SELECTOR
   ========================================================= */

/* ---------- BRAND / HERO CONNECTION ---------- */
.brands-v18{
  padding-top:0 !important;
  margin-top:-34px !important;
  position:relative !important;
  z-index:4 !important;
}
.brand-v18-wrap{
  padding-top:0 !important;
}
@media(max-width:640px){
  .brands-v18{
    margin-top:-18px !important;
  }
}

/* ---------- GLOBAL SOFT INDUSTRIAL CONTROL LANGUAGE ---------- */
.cat-tabs,
.cat-arrow,
.cat-copy .btn,
.pactions a,
.hero-actions .btn,
.service-card .btn{
  -webkit-tap-highlight-color:transparent !important;
  outline:0 !important;
}

.cat-tabs,
.brand-v18-viewport,
.pmedia,
.cat-viewport,
.journey-stage,
.journey-nav,
.journey-today,
.after-shell{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 1px 2px rgba(18,22,25,.025) !important;
}

/* ---------- REVEAL SYSTEM: smoother / cleaner / more separated ---------- */
.motion-ready [data-reveal]{
  opacity:0;
  transform:translate3d(0,26px,0);
  transition:
    opacity .95s cubic-bezier(.16,1,.3,1),
    transform 1.18s cubic-bezier(.16,1,.3,1);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.motion-ready [data-reveal].is-visible{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* Cards: no blur. softer lift + slight scale */
.motion-ready .pcard[data-reveal="component"]{
  opacity:0;
  transform:translate3d(0,44px,0) scale(.978);
  filter:none !important;
  transition:
    opacity .92s cubic-bezier(.16,1,.3,1),
    transform 1.16s cubic-bezier(.16,1,.3,1);
}
.motion-ready .pcard[data-reveal="component"].is-visible{
  opacity:1;
  transform:translate3d(0,0,0) scale(1);
}
.product-grid .pcard:nth-child(1){--reveal-delay:0ms}
.product-grid .pcard:nth-child(2){--reveal-delay:120ms}
.product-grid .pcard:nth-child(3){--reveal-delay:240ms}

/* Main large modules */
.motion-ready .cat-viewport[data-reveal="component"],
.motion-ready .journey-stage[data-reveal="component"],
.motion-ready .journey-nav[data-reveal="component"],
.motion-ready .journey-today[data-reveal="component"],
.motion-ready .service-card[data-reveal="component"]{
  transform:translate3d(0,32px,0) scale(.988);
  transition:
    opacity 1s cubic-bezier(.16,1,.3,1),
    transform 1.2s cubic-bezier(.16,1,.3,1);
}
.motion-ready .cat-viewport[data-reveal="component"].is-visible,
.motion-ready .journey-stage[data-reveal="component"].is-visible,
.motion-ready .journey-nav[data-reveal="component"].is-visible,
.motion-ready .journey-today[data-reveal="component"].is-visible,
.motion-ready .service-card[data-reveal="component"].is-visible{
  transform:translate3d(0,0,0) scale(1);
}

/* Titles: soft masked rise */
.reveal-title{
  overflow:hidden !important;
}
.reveal-title .reveal-title-inner{
  display:block !important;
}
.motion-ready .reveal-title .reveal-title-inner{
  opacity:.22;
  transform:translate3d(0,104%,0);
  transition:
    transform 1.05s cubic-bezier(.16,1,.3,1),
    opacity .78s ease;
}
.motion-ready .reveal-title.is-visible .reveal-title-inner{
  opacity:1;
  transform:translate3d(0,0,0);
}

/* Text follows title quietly */
.motion-ready [data-reveal="text"]{
  transform:translate3d(0,18px,0);
  transition-duration:.98s;
}

/* Category carousel movement itself becomes more liquid */
.cat-track{
  transition:transform .82s cubic-bezier(.16,1,.3,1) !important;
}

/* Category arrows: more refined and synced */
.cat-arrow{
  width:42px !important;
  height:42px !important;
  border:1px solid rgba(28,34,38,.105) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 -1px 0 rgba(28,34,38,.028),
    0 1px 2px rgba(18,22,25,.025) !important;
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    border-color .25s ease,
    background .25s ease !important;
}
.cat-arrow:hover{
  transform:translateY(-2px) !important;
  border-color:rgba(225,27,37,.16) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,0)),
    rgba(225,27,37,.065) !important;
}

/* ---------- CATEGORY CHIPS / PILLS ---------- */
.cat-points span{
  border:1px solid rgba(28,34,38,.075) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(18,22,25,.018) !important;
  color:#697277 !important;
}

/* ---------- SOFT INDUSTRIAL SURFACES CONSISTENCY ---------- */
.pcard,
.cat-panel,
.journey-stage,
.journey-nav{
  border:1px solid rgba(28,34,38,.105) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 1px 2px rgba(18,22,25,.025),
    0 12px 34px rgba(18,22,25,.035) !important;
}

.pmedia{
  border:1px solid rgba(28,34,38,.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 1px 2px rgba(18,22,25,.02) !important;
}

@media(prefers-reduced-motion:reduce){
  .cat-tabs .liquid-indicator,
  .cat-track{
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   V20 — LIQUID SELECTOR POSITION FIX + SOFT INDUSTRIAL EDGES
   ========================================================= */

/* ---------- CATEGORY PANEL EDGES: remove hard/double strokes ---------- */
.cat-panel{
  border:1px solid rgba(28,34,38,.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 1px 2px rgba(18,22,25,.018) !important;
}
.cat-image{
  border:1px solid rgba(28,34,38,.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 1px 2px rgba(18,22,25,.018) !important;
}

/* ---------- AFTER SALES: true soft-industrial navy shell ---------- */
.after-shell{
  border:1px solid rgba(255,255,255,.075) !important;
  outline:0 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055),
    0 1px 2px rgba(18,22,25,.025),
    0 14px 36px rgba(18,22,25,.035) !important;
}

/* kill any extra pseudo-outline around the navy component */
.after-shell::before,
.after-shell::after{
  border:0 !important;
  outline:0 !important;
  box-shadow:none !important;
}

/* title treatment: no rectangular bar */
.after-copy .eyebrow,
.after-copy .kicker{
  width:max-content !important;
  max-width:100% !important;
  min-height:32px !important;
  padding:0 11px !important;
  display:inline-flex !important;
  align-items:center !important;
  border-radius:999px !important;
  border:1px solid rgba(255,255,255,.085) !important;
  background:rgba(255,255,255,.045) !important;
  color:rgba(255,255,255,.88) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.055) !important;
}

/* remove any hard line inherited around copy/service columns */
.after-copy,
.service-card{
  outline:0 !important;
}
.after-copy{
  border:0 !important;
  box-shadow:none !important;
}
.service-card{
  border:1px solid rgba(255,255,255,.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.055) !important;
}

@media(max-width:640px){
  
  
}


/* =========================================================
   V21 — CATEGORY SELECTOR REBUILT FROM BASE
   ========================================================= */
.cat-controls{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  margin-bottom:22px !important;
}

.cat-selector{
  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  gap:4px !important;
  padding:5px !important;
  width:max-content !important;
  max-width:100% !important;
  min-height:48px !important;
  overflow:hidden !important;
  direction:rtl !important;

  border:1px solid rgba(28,34,38,.095) !important;
  border-radius:999px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.18)),
    rgba(247,247,245,.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 1px 2px rgba(18,22,25,.025) !important;
}

.cat-selector-indicator{
  position:absolute !important;
  top:5px !important;
  left:5px !important;
  height:38px !important;
  width:0;
  border-radius:999px !important;
  border:1px solid rgba(225,27,37,.15) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,0)),
    rgba(225,27,37,.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 1px 2px rgba(225,27,37,.025) !important;
  pointer-events:none !important;
  z-index:0 !important;

  transition:
    left .68s cubic-bezier(.16,1,.3,1),
    width .68s cubic-bezier(.16,1,.3,1) !important;
}

.cat-selector button{
  position:relative !important;
  z-index:1 !important;
  flex:0 0 auto !important;
  height:38px !important;
  padding:0 16px !important;
  margin:0 !important;

  border:0 !important;
  border-radius:999px !important;
  background:transparent !important;
  box-shadow:none !important;
  outline:0 !important;

  color:#70797E !important;
  font-family:"Yekan Bakh","YekanBakh",Tahoma,Arial,sans-serif !important;
  font-size:12px !important;
  font-weight:600 !important;
  line-height:1 !important;
  white-space:nowrap !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;

  transition:
    color .28s ease,
    transform .28s cubic-bezier(.16,1,.3,1) !important;
}

.cat-selector button:hover{
  color:#4C575D !important;
}
.cat-selector button.is-active{
  color:var(--red) !important;
}
.cat-selector button:active{
  transform:scale(.985) !important;
}

/* arrows stay separate from selector */
.cat-arrows{
  display:flex !important;
  align-items:center !important;
  gap:6px !important;
  direction:ltr !important;
  flex:0 0 auto !important;
}
.cat-arrow{
  position:relative !important;
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
  border:1px solid rgba(28,34,38,.095) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(18,22,25,.025) !important;
  cursor:pointer !important;
  outline:0 !important;
  -webkit-tap-highlight-color:transparent !important;
  transition:
    transform .26s cubic-bezier(.16,1,.3,1),
    border-color .24s ease,
    background .24s ease !important;
}
.cat-arrow::before{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:8px !important;
  height:8px !important;
  border-top:2px solid var(--navy) !important;
  border-right:2px solid var(--navy) !important;
  transform-origin:center !important;
}
#catPrev::before{
  transform:translate(-38%,-50%) rotate(-135deg) !important;
}
#catNext::before{
  transform:translate(-62%,-50%) rotate(45deg) !important;
}
.cat-arrow:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(225,27,37,.15) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,0)),
    rgba(225,27,37,.055) !important;
}
.cat-arrow:hover::before{
  border-color:var(--red) !important;
}

@media(max-width:760px){
  .cat-controls{
    align-items:flex-start !important;
    gap:10px !important;
  }
  .cat-selector{
    max-width:calc(100vw - 112px) !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    scrollbar-width:none !important;
  }
  .cat-selector::-webkit-scrollbar{
    display:none !important;
  }
}


/* =========================================================
   V22 — ISOLATED CATEGORY SWITCH
   No dependency on any previous category-control classes.
   ========================================================= */

.ac-controls{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  margin:0 0 22px;
}

.ac-switch{
  position:relative;
  display:inline-flex;
  flex-direction:row-reverse; /* first item sits physically on the right */
  direction:ltr;
  align-items:center;
  gap:4px;
  width:max-content;
  max-width:100%;
  min-height:48px;
  padding:5px;

  overflow:hidden;
  border:1px solid rgba(28,34,38,.095);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.20)),
    rgba(247,247,245,.95);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 1px 2px rgba(18,22,25,.025);
}

.ac-switch__indicator{
  position:absolute;
  top:5px;
  left:5px;
  width:0;
  height:38px;
  z-index:0;
  pointer-events:none;

  border:1px solid rgba(225,27,37,.15);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.58),rgba(255,255,255,0)),
    rgba(225,27,37,.075);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 1px 2px rgba(225,27,37,.025);

  transition:
    left .66s cubic-bezier(.16,1,.3,1),
    width .66s cubic-bezier(.16,1,.3,1);
}

.ac-switch__btn{
  position:relative;
  z-index:1;
  flex:0 0 auto;
  height:38px;
  margin:0;
  padding:0 16px;

  border:0;
  border-radius:999px;
  background:transparent;
  box-shadow:none;
  outline:0;

  direction:rtl;
  color:#70797E;
  font-family:"Yekan Bakh","YekanBakh",Tahoma,Arial,sans-serif;
  font-size:12px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;

  cursor:pointer;
  -webkit-tap-highlight-color:transparent;

  transition:
    color .26s ease,
    transform .26s cubic-bezier(.16,1,.3,1);
}

.ac-switch__btn:hover{color:#4D585E}
.ac-switch__btn.is-active{color:var(--red)}
.ac-switch__btn:active{transform:scale(.985)}

.ac-nav{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  gap:6px;
  direction:ltr;
}

.ac-nav__btn{
  position:relative;
  width:42px;
  height:42px;
  padding:0;
  border-radius:50%;
  border:1px solid rgba(28,34,38,.095);
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96));
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(18,22,25,.025);
  outline:0;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:
    transform .26s cubic-bezier(.16,1,.3,1),
    border-color .24s ease,
    background .24s ease;
}

.ac-nav__btn::before{
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:8px;
  height:8px;
  border-top:2px solid var(--navy);
  border-right:2px solid var(--navy);
  transform-origin:center;
}

.ac-nav__btn--prev::before{
  transform:translate(-38%,-50%) rotate(-135deg);
}
.ac-nav__btn--next::before{
  transform:translate(-62%,-50%) rotate(45deg);
}

.ac-nav__btn:hover{
  transform:translateY(-1px);
  border-color:rgba(225,27,37,.15);
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,0)),
    rgba(225,27,37,.055);
}
.ac-nav__btn:hover::before{border-color:var(--red)}

@media(max-width:760px){
  .ac-controls{
    align-items:flex-start;
    gap:10px;
  }
  .ac-switch{
    max-width:calc(100vw - 112px);
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .ac-switch::-webkit-scrollbar{display:none}
}


/* =========================================================
   V23 — LIQUID MOTION POLISH FOR CATEGORY SWITCH
   ========================================================= */

.ac-switch__indicator{
  transform-origin:center center !important;
  will-change:left,width,transform,border-radius !important;

  transition:
    left .76s cubic-bezier(.18,.92,.22,1.08),
    width .82s cubic-bezier(.16,1,.3,1),
    transform .48s cubic-bezier(.16,1,.3,1),
    border-radius .48s cubic-bezier(.16,1,.3,1) !important;
}

/* a very subtle inner liquid highlight */
.ac-switch__indicator::after{
  content:"";
  position:absolute;
  inset:2px 9px auto;
  height:1px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  opacity:.72;
  pointer-events:none;
}

/* stretch slightly in the travel direction */
.ac-switch__indicator.is-liquid-moving{
  transform:scaleX(1.075) scaleY(.94) !important;
  border-radius:46% / 58% !important;
}

/* then softly settle into the destination */
.ac-switch__indicator.is-liquid-settle{
  transform:scaleX(.985) scaleY(1.025) !important;
  border-radius:999px !important;
}

/* tiny tactile response on label itself */
.ac-switch__btn.is-active{
  transform:translateY(-.5px);
  transition:
    color .26s ease,
    transform .46s cubic-bezier(.16,1,.3,1) !important;
}

@media(prefers-reduced-motion:reduce){
  .ac-switch__indicator{
    transition-duration:.01ms !important;
  }
  .ac-switch__indicator.is-liquid-moving,
  .ac-switch__indicator.is-liquid-settle{
    transform:none !important;
  }
}


/* =========================================================
   V24 — SUBTLE LIQUID POLISH
   softer, smaller state changes
   ========================================================= */

.ac-switch__indicator{
  transition:
    left .82s cubic-bezier(.20,.86,.24,1),
    width .88s cubic-bezier(.18,.92,.22,1),
    transform .58s cubic-bezier(.16,1,.3,1),
    border-radius .58s cubic-bezier(.16,1,.3,1) !important;
}

/* softer highlight, less visual noise */
.ac-switch__indicator::after{
  inset:2px 12px auto !important;
  opacity:.52 !important;
}

/* only a very small stretch while traveling */
.ac-switch__indicator.is-liquid-moving{
  transform:scaleX(1.035) scaleY(.975) !important;
  border-radius:44% / 54% !important;
}

/* tiny settle — almost imperceptible */
.ac-switch__indicator.is-liquid-settle{
  transform:scaleX(.995) scaleY(1.012) !important;
  border-radius:999px !important;
}

/* labels stay calm */
.ac-switch__btn.is-active{
  transform:translateY(-.2px) !important;
}


/* =========================================================
   V25 — ULTRA SOFT LIQUID GLIDE
   almost no shape deformation, much smoother travel
   ========================================================= */

.ac-switch__indicator{
  transition:
    left 1.02s cubic-bezier(.18,.84,.22,1),
    width 1.04s cubic-bezier(.18,.84,.22,1),
    transform .72s cubic-bezier(.16,1,.3,1),
    border-radius .72s cubic-bezier(.16,1,.3,1) !important;
}

/* remove the visibly oval morph */
.ac-switch__indicator.is-liquid-moving{
  transform:scaleX(1.012) scaleY(.995) !important;
  border-radius:999px !important;
}

/* no bounce / no noticeable settle */
.ac-switch__indicator.is-liquid-settle{
  transform:scale(1) !important;
  border-radius:999px !important;
}

/* even quieter highlight */
.ac-switch__indicator::after{
  opacity:.34 !important;
}

/* active label stays still */
.ac-switch__btn.is-active{
  transform:none !important;
}



/* =========================================================
   NEW HERO V9 — integrated into homepage V26
   Only .bhero* selectors are introduced. Existing homepage
   sections/styles remain untouched.
   ========================================================= */

.bhero{
  width:100%;
  background:var(--page);
}
.bhero > .container{
  width:min(1180px,calc(100% - 40px));
  margin-inline:auto;
  padding:64px 0 18px;
}

/* ===================== BENTO HERO ===================== */
.bhero-grid{
  display:grid;
  grid-template-columns:minmax(240px,290px) 1fr;
  gap:18px;
  align-items:stretch;
}

.bhero-card{
  position:relative;
  overflow:hidden;
  border-radius:36px;
  border:1px solid var(--line);
  box-shadow:
    inset 0 1px 0 var(--highlight),
    inset 0 -1px 0 rgba(28,34,38,.025),
    0 1px 2px rgba(18,22,25,.025),
    0 18px 40px rgba(18,22,25,.045);
}

/* ---- main card (image + title) : LEFT side, larger ---- */
.bhero-main{
  grid-column:2;
  grid-row:1;
  background:var(--surface);
  padding:52px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-end;
  min-height:600px;
}
.bhero-kicker{
  width:max-content;
  max-width:100%;
  min-height:34px;
  padding:0 8px 0 14px;
  display:inline-flex;
  align-items:center;
  gap:9px;
  border-radius:999px;
  border:1px solid rgba(225,27,37,.15);
  background:var(--red-soft);
  color:var(--red);
  font-size:11px;
  font-weight:700;
  margin-bottom:22px;
}


.bhero-main h1{
  margin:0;
  max-width:560px;
  text-align:right;
  font-size:clamp(38px,4.3vw,60px);
  line-height:1.24;
  letter-spacing:-1.5px;
  font-weight:650;
}
.bhero-main h1 b{color:var(--red);font-weight:650}
.bhero-main p{
  max-width:460px;
  text-align:right;
  margin:18px 0 0;
  color:#7D8589;
  font-size:14px;
  line-height:2.05;
}
.bhero-actions{display:flex;gap:10px;margin-top:30px}
.bhero-btn{
  min-width:150px;
  min-height:52px;
  padding:0 22px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-size:12.5px;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}
.bhero-btn.is-dark{
  background:var(--ink);
  color:#fff;
  border:1px solid rgba(0,0,0,.25);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 1px 2px rgba(0,0,0,.12);
}
.bhero-btn.is-dark:hover{transform:translateY(-1px);background:#000}
.bhero-btn.is-ghost{
  background:transparent;
  color:var(--ink);
  border:1px solid var(--line);
}
.bhero-btn.is-ghost:hover{border-color:rgba(28,34,38,.2);background:rgba(255,255,255,.6)}

.bhero-visual{
  position:absolute;
  right:-4%;
  bottom:-8%;
  width:50%;
  max-width:480px;
  pointer-events:none;
  z-index:1;
}
.bhero-visual img{
  width:100%;
  filter:drop-shadow(0 30px 26px rgba(18,22,25,.14));
}
.bhero-ring{
  position:absolute;
  right:6%;
  bottom:-4%;
  width:66%;
  aspect-ratio:1/1;
  border-radius:50%;
  border:1px solid rgba(32,55,70,.06);
  box-shadow:0 0 0 40px rgba(32,55,70,.012),0 0 0 80px rgba(225,27,37,.008);
  z-index:0;
}

/* ---- side stack: RIGHT side, small squares, functional widgets ---- */
.bhero-side{
  grid-column:1;
  grid-row:1;
  display:grid;
  grid-template-rows:1fr 1fr;
  gap:18px;
}
.bhero-sq{
  aspect-ratio:1/1;
  padding:22px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

/* warranty widget */
.bhero-warranty{
  background:var(--red);
  color:#fff;
  border:1px solid rgba(151,7,17,.22);
}
.bhero-w-icon{
  width:36px;height:36px;border-radius:50%;
  background:rgba(255,255,255,.16);
  display:grid;place-items:center;
}
.bhero-w-icon svg{width:18px;height:18px}
.bhero-warranty h4{margin:0;font-size:17px;line-height:1.5;font-weight:650}
.bhero-warranty .sub{margin-top:4px;font-size:10.5px;color:rgba(255,255,255,.72)}
.bhero-w-chip{
  align-self:flex-start;
  min-height:26px;
  padding:0 10px;
  border-radius:999px;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.2);
  font-size:9.5px;
  font-weight:700;
  display:flex;
  align-items:center;
  gap:5px;
}
.bhero-w-chip svg{width:10px;height:10px}

/* support widget */
.bhero-support{
  background:var(--navy);
  color:#fff;
  border:1px solid rgba(16,31,40,.25);
}
.bhero-support h4{margin:0;font-size:17px;line-height:1.5;font-weight:650}
.bhero-support .sub{margin-top:4px;font-size:10.5px;color:rgba(255,255,255,.6)}
/* Support CTA — shared hero button language */
.bhero-support-cta{
  width:100%;
  min-width:0;
  min-height:40px;
  height:40px;
  padding:0 7px 0 12px;
  border-radius:999px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  background:rgba(255,255,255,.065) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    0 1px 2px rgba(0,0,0,.035) !important;
  transform:none !important;
}
.bhero-support-cta:hover{
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(255,255,255,.19) !important;
  transform:translateY(-1px) !important;
}
.bhero-support-cta span{
  font-size:10.5px;
  font-weight:700;
  white-space:nowrap;
}
.bhero-support-cta i{
  width:28px;
  height:28px;
  flex:0 0 28px;
  border-radius:50%;
  background:var(--red);
  display:grid;
  place-items:center;
  transform:rotate(180deg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.bhero-support-cta i svg{width:12px;height:12px}

@media(max-width:900px){
  .bhero-grid{grid-template-columns:1fr;grid-template-rows:auto;}
  .bhero-main{grid-column:1;grid-row:1;padding:130px 26px 52px;min-height:520px;align-items:flex-start}
  .bhero-main h1,.bhero-main p{text-align:right}
  .bhero-side{grid-column:1;grid-row:2;grid-template-columns:1fr 1fr;grid-template-rows:none}
  .bhero-visual{right:auto;left:50%;transform:translateX(-50%);bottom:-4%;width:60%}
  .bhero-main h1{max-width:100%}
}
@media(max-width:640px){
  .bhero-main{padding:120px 20px 44px}
  .bhero-main h1{font-size:34px;letter-spacing:-.5px}
  .bhero-actions{flex-wrap:wrap}
  .bhero-side{grid-template-columns:1fr 1fr}
  .bhero-sq{padding:16px}
  .bhero-warranty h4,.bhero-support h4{font-size:14px}
}



/* =========================================================
   SOFT INDUSTRIAL MATERIAL PASS — HERO ONLY
   Geometry/content/layout intentionally preserved.
   ========================================================= */

:root{
  --si-page:#EEF0EF;
  --si-surface:#F7F7F5;
  --si-surface-hi:#FBFBFA;
  --si-ink:#1B252B;
  --si-navy:#203746;
  --si-red:#E11B25;
  --si-line:rgba(32,55,70,.085);
  --si-line-soft:rgba(32,55,70,.045);
  --si-highlight:rgba(255,255,255,.92);
}

/* Softer industrial page material: warm mineral grey, not pure white */
html,
body{
  background:
    radial-gradient(circle at 78% 14%,rgba(255,255,255,.72),transparent 31%),
    radial-gradient(circle at 12% 88%,rgba(225,27,37,.025),transparent 27%),
    var(--si-page) !important;
}

/* Main hero shell:
   low-contrast edge + tiny inner highlight + restrained depth.
   No glassmorphism, no hard decorative stroke. */
.bhero-card{
  border:1px solid var(--si-line) !important;
  border-radius:36px !important;
  box-shadow:
    inset 0 1px 0 var(--si-highlight),
    inset 0 -1px 0 rgba(32,55,70,.018),
    0 1px 2px rgba(25,40,48,.022),
    0 14px 34px rgba(25,40,48,.040) !important;
}

/* Main material is nearly flat, with a very subtle surface gradient */
.bhero-main{
  background:
    radial-gradient(circle at 82% 18%,rgba(255,255,255,.68),transparent 34%),
    radial-gradient(circle at 18% 88%,rgba(225,27,37,.018),transparent 27%),
    linear-gradient(145deg,var(--si-surface-hi),var(--si-surface)) !important;
}

/* Remove the feeling of a graphic "ring"; keep only a quiet material depth cue */
.bhero-ring{
  border:1px solid rgba(32,55,70,.038) !important;
  box-shadow:
    0 0 0 40px rgba(32,55,70,.008),
    0 0 0 80px rgba(225,27,37,.004) !important;
}

/* Kicker follows the same soft inset material language */
.bhero-kicker{
  border:1px solid rgba(225,27,37,.12) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0)),
    rgba(225,27,37,.045) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.86),
    0 1px 1px rgba(225,27,37,.012) !important;
}

/* Buttons: soft industrial surfaces, not glossy pills */
.bhero-btn{
  transition:
    transform .28s cubic-bezier(.2,.8,.2,1),
    background-color .28s ease,
    border-color .28s ease,
    box-shadow .28s ease !important;
}

.bhero-btn.is-dark{
  background:var(--si-ink) !important;
  border:1px solid rgba(0,0,0,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    0 2px 5px rgba(18,22,25,.08) !important;
}

.bhero-btn.is-dark:hover{
  background:#20272B !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    0 5px 12px rgba(18,22,25,.09) !important;
}

.bhero-btn.is-ghost{
  background:rgba(255,255,255,.42) !important;
  border:1px solid rgba(32,55,70,.085) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.82),
    0 1px 2px rgba(25,40,48,.018) !important;
}

.bhero-btn.is-ghost:hover{
  background:rgba(255,255,255,.68) !important;
  border-color:rgba(32,55,70,.12) !important;
}

/* Product image gets restrained physical depth rather than a floating/glow effect */
.bhero-visual img{
  filter:
    drop-shadow(0 18px 18px rgba(18,22,25,.075))
    drop-shadow(0 3px 5px rgba(18,22,25,.045)) !important;
}

/* Red side module: keep brand color, but give it a denser manufactured surface */
.bhero-warranty{
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),transparent 52%),
    var(--si-red) !important;
  border:1px solid rgba(151,7,17,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 -1px 0 rgba(122,10,18,.10),
    0 12px 28px rgba(122,10,18,.055) !important;
}

/* Navy side module: same material family */
.bhero-support{
  background:
    linear-gradient(145deg,rgba(255,255,255,.045),transparent 58%),
    var(--si-navy) !important;
  border:1px solid rgba(16,31,40,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.085),
    inset 0 -1px 0 rgba(12,25,32,.12),
    0 12px 28px rgba(18,31,38,.055) !important;
}

/* Side icon/chip surfaces become quiet tactile details */
.bhero-w-icon{
  background:rgba(255,255,255,.13) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10) !important;
}

.bhero-w-chip{
  background:rgba(255,255,255,.085) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07) !important;
}




/* =========================================================
   V3 — CLEAN NEW HERO / SOFT INDUSTRIAL
   Only this new bento hero is affected.
   ========================================================= */

/* Main copy: smaller and calmer */
.bhero-main{
  padding:54px 46px 92px !important;
  justify-content:flex-start !important;
  align-items:flex-end !important;
  min-height:600px !important;
}

.bhero-kicker{
  position:absolute !important;
  top:18px !important;
  right:22px !important;
  margin:0 !important;
  min-height:32px !important;
  height:32px !important;
  padding:0 13px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  border:1px solid rgba(225,27,37,.15) !important;
  background:var(--red-soft) !important;
  color:var(--red) !important;
  font-size:9.8px !important;
  font-weight:700 !important;
  white-space:nowrap !important;
  z-index:6 !important;
}
.bhero-kicker .dot,
.bhero-kicker i,
.bhero-kicker::before,
.bhero-kicker::after{
  display:none !important;
  content:none !important;
}

.bhero-main h1{
  max-width:470px !important;
  font-size:clamp(30px,3.15vw,44px) !important;
  line-height:1.20 !important;
  letter-spacing:-1px !important;
}
.bhero-main p{
  max-width:410px !important;
  margin-top:14px !important;
  font-size:12.3px !important;
  line-height:1.9 !important;
}

/* Larger product visual */
.bhero-visual{
  right:-8% !important;
  bottom:-10% !important;
  width:68% !important;
  max-width:610px !important;
  z-index:2 !important;
}
.bhero-visual img{
  width:100% !important;
}
.bhero-ring{
  right:1% !important;
  bottom:-8% !important;
  width:82% !important;
}

/* Only one red CTA, positioned to the left at the bottom */
.bhero-actions{
  position:absolute !important;
  left:28px !important;
  right:auto !important;
  bottom:24px !important;
  z-index:7 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:flex-start !important;
  margin:0 !important;
  width:auto !important;
  max-width:none !important;
}

.bhero-actions .bhero-btn{
  min-width:164px !important;
  min-height:42px !important;
  height:42px !important;
  padding:0 18px !important;
  border-radius:999px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  cursor:pointer !important;
  line-height:1 !important;
  font-size:10.5px !important;
  font-weight:700 !important;
}

.bhero-actions .bhero-btn.is-dark{
  color:#fff !important;
  background:#E11B25 !important;
  border:1px solid rgba(151,7,17,.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(124,8,16,.10),
    0 1px 2px rgba(122,10,18,.10) !important;
  padding:0 18px !important;
}
.bhero-actions .bhero-btn.is-dark:hover{
  background:#D71923 !important;
  transform:translateY(-1px) !important;
}
.bhero-actions .bhero-btn.is-dark::before,
.bhero-actions .bhero-btn.is-dark::after{
  content:none !important;
  display:none !important;
}

/* Support CTA: integrated with the navy card, no extra circle/arrow */
.bhero-support .bhero-support-cta{
  width:100% !important;
  min-width:0 !important;
  min-height:40px !important;
  height:40px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-decoration:none !important;
  background:rgba(255,255,255,.075) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.12) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.075),
    0 1px 2px rgba(0,0,0,.035) !important;
  font-size:10.5px !important;
  font-weight:700 !important;
  transition:background .25s ease,border-color .25s ease,transform .25s ease !important;
}
.bhero-support .bhero-support-cta:hover{
  background:rgba(255,255,255,.11) !important;
  border-color:rgba(255,255,255,.17) !important;
  transform:translateY(-1px) !important;
}
.bhero-support .bhero-support-cta::before,
.bhero-support .bhero-support-cta::after{
  content:none !important;
  display:none !important;
}

@media(max-width:900px){
  .bhero-main{
    padding:108px 26px 88px !important;
    min-height:520px !important;
  }
  .bhero-main h1{
    max-width:100% !important;
    font-size:clamp(30px,6.2vw,40px) !important;
  }
  .bhero-main p{
    font-size:12px !important;
  }
  .bhero-visual{
    right:auto !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    bottom:-4% !important;
    width:78% !important;
    max-width:none !important;
  }
  .bhero-actions{
    left:24px !important;
    bottom:20px !important;
  }
}

@media(max-width:640px){
  .bhero-main{
    padding:100px 20px 82px !important;
  }
  .bhero-main h1{
    font-size:29px !important;
    letter-spacing:-.6px !important;
  }
  .bhero-main p{
    font-size:11.5px !important;
    line-height:1.8 !important;
  }
  .bhero-kicker{
    top:16px !important;
    right:16px !important;
    min-height:30px !important;
    height:30px !important;
    font-size:9px !important;
  }
  .bhero-visual{
    width:84% !important;
    bottom:-2% !important;
  }
  .bhero-actions{
    left:18px !important;
    bottom:16px !important;
  }
  .bhero-actions .bhero-btn{
    min-width:148px !important;
    height:40px !important;
    min-height:40px !important;
    font-size:10px !important;
  }
}



/* =========================================================
   V4 — HERO ALIGNMENT + SOFT INDUSTRIAL SLIDESHOW CONTROL
   ========================================================= */

/* Install-free chip to the left side of the main hero card */
.bhero-kicker{
  right:auto !important;
  left:22px !important;
  top:18px !important;
}

/* Title and copy a little lower and perfectly right aligned */
.bhero-main{
  padding-top:78px !important;
}
.bhero-main h1,
.bhero-main p{
  width:100% !important;
  text-align:right !important;
  align-self:flex-end !important;
}
.bhero-main h1{
  margin-top:26px !important;
}
.bhero-main p{
  margin-top:14px !important;
}

/* Slideshow control */
.bhero-slider-control{
  width:min(100% - 40px, 1180px);
  margin:14px auto 0;
  min-height:52px;
  padding:6px 8px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  direction:ltr;

  border:1px solid rgba(32,55,70,.08);
  border-radius:999px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.28)),
    rgba(247,248,246,.92);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 -1px 0 rgba(32,55,70,.018),
    0 6px 18px rgba(18,22,25,.035);
  backdrop-filter:blur(10px);
}

.bhero-slide-nav{
  width:38px;
  height:38px;
  flex:0 0 38px;
  border:1px solid rgba(32,55,70,.08);
  border-radius:50%;
  background:#fff;
  color:#22353f;
  display:grid;
  place-items:center;
  padding:0;
  font:inherit;
  font-size:22px;
  line-height:1;
  cursor:pointer;
  transition:
    transform .25s cubic-bezier(.2,.8,.2,1),
    background .25s ease,
    border-color .25s ease;
}
.bhero-slide-nav:hover{
  transform:translateY(-1px);
  background:#F2F4F2;
  border-color:rgba(32,55,70,.13);
}

.bhero-slide-status{
  min-width:86px;
  height:38px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid rgba(32,55,70,.07);
  border-radius:999px;
  background:rgba(255,255,255,.55);
  color:#66737A;
  font-size:10px;
  font-weight:700;
  letter-spacing:.4px;
}
.bhero-slide-current{
  color:#1F2D34;
}
.bhero-slide-divider{
  width:18px;
  height:1px;
  background:rgba(32,55,70,.16);
}

.bhero-slide-dots{
  min-width:112px;
  height:38px;
  padding:0 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  border:1px solid rgba(32,55,70,.07);
  border-radius:999px;
  background:rgba(255,255,255,.42);
}
.bhero-slide-dot{
  width:7px;
  height:7px;
  padding:0;
  border:0;
  border-radius:999px;
  background:#C8CECB;
  cursor:pointer;
  transition:
    width .32s cubic-bezier(.2,.8,.2,1),
    background .25s ease,
    transform .25s cubic-bezier(.2,.8,.2,1);
}
.bhero-slide-dot:hover{
  transform:scale(1.08);
}
.bhero-slide-dot.is-active{
  width:24px;
  background:#E11B25;
}

/* The control should feel attached to the hero, not like another full card */
.bhero + .bhero-slider-control{
  position:relative;
  z-index:8;
}

@media(max-width:900px){
  .bhero-kicker{
    left:18px !important;
    right:auto !important;
  }
  .bhero-main{
    padding-top:112px !important;
  }
  .bhero-main h1{
    margin-top:18px !important;
  }
  .bhero-slider-control{
    width:calc(100% - 28px);
    margin-top:10px;
  }
}

@media(max-width:640px){
  .bhero-kicker{
    left:16px !important;
    top:16px !important;
  }
  .bhero-main{
    padding-top:104px !important;
  }
  .bhero-main h1{
    margin-top:14px !important;
  }
  .bhero-slider-control{
    width:calc(100% - 20px);
    min-height:48px;
    padding:5px 6px;
    gap:7px;
  }
  .bhero-slide-nav{
    width:34px;
    height:34px;
    flex-basis:34px;
    font-size:20px;
  }
  .bhero-slide-status,
  .bhero-slide-dots{
    height:34px;
  }
  .bhero-slide-status{
    min-width:74px;
    padding:0 9px;
  }
  .bhero-slide-dots{
    min-width:92px;
    padding:0 9px;
  }
}



.bhero,.bhero-main{background:transparent!important;box-shadow:none!important}
.bhero-main{justify-content:flex-start!important;align-items:flex-start!important;padding:96px 46px 86px!important}
.bhero-main h1,.bhero-main p{position:relative!important;z-index:6!important;width:48%!important;max-width:520px!important;margin-right:0!important;margin-left:auto!important;text-align:right!important;align-self:flex-start!important}
.bhero-main h1{margin-top:10px!important}.bhero-main p{margin-top:18px!important}
.bhero-visual{width:55%!important;right:-2%!important;bottom:-5%!important}
.bhero-slider-control{width:auto!important;min-height:0!important;margin:14px 0 0 28px!important;padding:0!important;display:flex!important;justify-content:flex-start!important;gap:8px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important}
.bhero-slide-status,.bhero-slide-dots{display:none!important}
.bhero-slide-nav{width:40px!important;height:40px!important;flex:0 0 40px!important;padding:0!important;border-radius:50%!important;display:grid!important;place-items:center!important;background:rgba(255,255,255,.72)!important;border:1px solid rgba(32,55,70,.08)!important;color:#22353f!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 4px 12px rgba(18,22,25,.025)!important;font-size:0!important;transition:transform .25s cubic-bezier(.2,.8,.2,1),border-color .25s ease,background .25s ease!important}
.bhero-slide-nav::before{content:""!important;width:8px!important;height:8px!important;border-top:1.8px solid currentColor!important;border-right:1.8px solid currentColor!important;display:block!important}
.bhero-slide-prev::before{transform:rotate(-135deg)!important}
.bhero-slide-next{color:#E11B25!important;border-color:rgba(225,27,37,.18)!important;background:rgba(255,247,247,.76)!important}
.bhero-slide-next::before{transform:rotate(45deg)!important}.bhero-slide-nav:hover{transform:translateY(-1px)!important}
@media(max-width:900px){.bhero-main{padding:94px 28px 82px!important}.bhero-main h1,.bhero-main p{width:56%!important}.bhero-visual{width:58%!important}}
@media(max-width:640px){.bhero-main{padding:88px 20px 78px!important}.bhero-main h1,.bhero-main p{width:100%!important;max-width:100%!important}.bhero-visual{width:80%!important;opacity:.38!important}.bhero-slider-control{margin-left:18px!important}}



/* =========================================================
   V6 — COPY IN LEFT ZONE + CENTERED MINIMAL SLIDER CONTROLS
   ========================================================= */

/* Put title + description fully inside the left text zone,
   away from the product illustration. */
.bhero-main{
  position:relative !important;
  padding:0 !important;
}

.bhero-main h1,
.bhero-main p{
  position:absolute !important;
  right:auto !important;
  left:46px !important;
  width:44% !important;
  max-width:470px !important;
  margin:0 !important;
  text-align:right !important;
  z-index:7 !important;
}

.bhero-main h1{
  top:128px !important;
}

.bhero-main p{
  top:255px !important;
  color:#7B858B !important;
}

/* Product stays on the right half and never sits under the copy. */
.bhero-visual{
  right:1% !important;
  left:auto !important;
  bottom:-3% !important;
  width:54% !important;
  max-width:590px !important;
}

/* Keep the install chip in the upper-left corner. */
.bhero-kicker{
  left:22px !important;
  right:auto !important;
  top:18px !important;
}

/* Minimal slideshow controls: centered under hero. */
.bhero-slider-control{
  width:max-content !important;
  min-height:0 !important;
  margin:16px auto 0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  direction:ltr !important;

  border:0 !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.bhero-slide-status,
.bhero-slide-dots{
  display:none !important;
}

/* Both arrows are neutral by default. */
.bhero-slide-nav{
  width:40px !important;
  height:40px !important;
  flex:0 0 40px !important;
  padding:0 !important;
  border-radius:50% !important;

  display:grid !important;
  place-items:center !important;

  background:rgba(255,255,255,.82) !important;
  border:1px solid rgba(32,55,70,.08) !important;
  color:#22353F !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 4px 12px rgba(18,22,25,.028) !important;

  font-size:0 !important;
  cursor:pointer !important;

  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    color .26s ease,
    border-color .26s ease,
    background .26s ease,
    box-shadow .26s ease !important;
}

/* Build clean chevrons rather than using the text glyph. */
.bhero-slide-nav::before{
  content:"" !important;
  width:8px !important;
  height:8px !important;
  display:block !important;
  border-top:1.8px solid currentColor !important;
  border-right:1.8px solid currentColor !important;
}

.bhero-slide-prev::before{
  transform:rotate(-135deg) !important;
}
.bhero-slide-next::before{
  transform:rotate(45deg) !important;
}

/* Highlight only on interaction — no permanently active arrow. */
.bhero-slide-nav:hover,
.bhero-slide-nav:focus-visible,
.bhero-slide-nav:active,
.bhero-slide-nav.is-clicked{
  color:#E11B25 !important;
  border-color:rgba(225,27,37,.20) !important;
  background:rgba(255,246,247,.94) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 5px 14px rgba(225,27,37,.055) !important;
}

.bhero-slide-nav:hover{
  transform:translateY(-1px) !important;
}
.bhero-slide-nav:active,
.bhero-slide-nav.is-clicked{
  transform:scale(.96) !important;
}

/* Explicitly cancel V5's permanently red next arrow. */
.bhero-slide-next{
  color:#22353F !important;
  border-color:rgba(32,55,70,.08) !important;
  background:rgba(255,255,255,.82) !important;
}

.bhero-slide-next:hover,
.bhero-slide-next:focus-visible,
.bhero-slide-next:active,
.bhero-slide-next.is-clicked{
  color:#E11B25 !important;
  border-color:rgba(225,27,37,.20) !important;
  background:rgba(255,246,247,.94) !important;
}

@media(max-width:900px){
  .bhero-main h1,
  .bhero-main p{
    left:28px !important;
    width:48% !important;
  }
  .bhero-main h1{
    top:118px !important;
  }
  .bhero-main p{
    top:242px !important;
  }
  .bhero-visual{
    width:53% !important;
  }
}

@media(max-width:640px){
  .bhero-main{
    padding:88px 20px 78px !important;
  }

  /* Mobile returns to a normal flow so nothing overlaps. */
  .bhero-main h1,
  .bhero-main p{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    max-width:100% !important;
  }

  .bhero-main h1{
    margin-top:28px !important;
  }

  .bhero-main p{
    margin-top:14px !important;
  }

  .bhero-visual{
    width:78% !important;
    opacity:.34 !important;
  }

  .bhero-slider-control{
    margin-top:12px !important;
  }

  .bhero-slide-nav{
    width:38px !important;
    height:38px !important;
    flex-basis:38px !important;
  }
}



/* Exact Soft Industrial navigation button language from the approved homepage control.
   No active state; both buttons are neutral until hover. */

.bhero-slider-control{
  width:max-content !important;
  margin:16px auto 0 !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:6px !important;
  direction:ltr !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  backdrop-filter:none !important;
}

.bhero-slide-status,
.bhero-slide-dots{
  display:none !important;
}

.bhero-slide-nav{
  position:relative !important;
  width:42px !important;
  height:42px !important;
  flex:0 0 42px !important;
  padding:0 !important;
  border-radius:50% !important;
  border:1px solid rgba(28,34,38,.095) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96)) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(18,22,25,.025) !important;
  outline:0 !important;
  cursor:pointer !important;
  -webkit-tap-highlight-color:transparent !important;
  color:inherit !important;
  font-size:0 !important;
  transition:
    transform .26s cubic-bezier(.16,1,.3,1),
    border-color .24s ease,
    background .24s ease !important;
}

/* Arrow is always present — the button is never visually empty. */
.bhero-slide-nav::before{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:8px !important;
  height:8px !important;
  display:block !important;
  border-top:2px solid #203746 !important;
  border-right:2px solid #203746 !important;
  transform-origin:center !important;
}

.bhero-slide-prev::before{
  transform:translate(-38%,-50%) rotate(-135deg) !important;
}
.bhero-slide-next::before{
  transform:translate(-62%,-50%) rotate(45deg) !important;
}

.bhero-slide-nav:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(225,27,37,.15) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,0)),
    rgba(225,27,37,.055) !important;
}
.bhero-slide-nav:hover::before{
  border-color:#E11B25 !important;
}

/* Remove all V5/V6 pseudo-active/click styles */
.bhero-slide-nav:active,
.bhero-slide-nav:focus,
.bhero-slide-nav:focus-visible,
.bhero-slide-nav.is-clicked,
.bhero-slide-next,
.bhero-slide-next:hover,
.bhero-slide-next:focus-visible,
.bhero-slide-next:active,
.bhero-slide-next.is-clicked{
  color:inherit !important;
}

.bhero-slide-nav:active{
  transform:scale(.985) !important;
}

/* Do not let the old rules paint the next button red at rest. */
.bhero-slide-next{
  border-color:rgba(28,34,38,.095) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96)) !important;
}
.bhero-slide-next::before{
  border-color:#203746 !important;
}
.bhero-slide-next:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(225,27,37,.15) !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.56),rgba(255,255,255,0)),
    rgba(225,27,37,.055) !important;
}
.bhero-slide-next:hover::before{
  border-color:#E11B25 !important;
}



/* Real slideshow transitions */
.bhero-main h1,
.bhero-main p,
.bhero-kicker,
.bhero-visual img{
  transition:
    opacity .42s cubic-bezier(.2,.8,.2,1),
    transform .52s cubic-bezier(.2,.8,.2,1),
    filter .52s ease !important;
}

.bhero.is-changing .bhero-main h1,
.bhero.is-changing .bhero-main p,
.bhero.is-changing .bhero-kicker{
  opacity:0 !important;
  transform:translateY(12px) !important;
}

.bhero.is-changing .bhero-visual img{
  opacity:.18 !important;
  transform:translateX(14px) scale(.985) !important;
}

.bhero.is-entering .bhero-main h1,
.bhero.is-entering .bhero-main p,
.bhero.is-entering .bhero-kicker{
  animation:bheroSlideTextIn .62s cubic-bezier(.16,1,.3,1) both;
}

.bhero.is-entering .bhero-visual img{
  animation:bheroSlideVisualIn .72s cubic-bezier(.16,1,.3,1) both;
}

@keyframes bheroSlideTextIn{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}
@keyframes bheroSlideVisualIn{
  from{opacity:.18;transform:translateX(16px) scale(.985)}
  to{opacity:1;transform:translateX(0) scale(1)}
}

@media(prefers-reduced-motion:reduce){
  .bhero-main h1,
  .bhero-main p,
  .bhero-kicker,
  .bhero-visual img{
    transition:none !important;
    animation:none !important;
  }
}



/* Smaller controls + visible pagination dots between arrows */
.bhero-slider-control{
  gap:8px !important;
  align-items:center !important;
}

.bhero-slide-nav{
  width:34px !important;
  height:34px !important;
  flex:0 0 34px !important;
}
.bhero-slide-nav::before{
  width:7px !important;
  height:7px !important;
  border-top-width:1.7px !important;
  border-right-width:1.7px !important;
}

/* Bring the dots back, but keep them minimal and centered */
.bhero-slide-dots{
  min-width:auto !important;
  width:auto !important;
  height:34px !important;
  padding:0 2px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:7px !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
}

.bhero-slide-dot{
  width:6px !important;
  height:6px !important;
  flex:0 0 6px !important;
  padding:0 !important;
  border:0 !important;
  border-radius:50% !important;
  background:rgba(225,27,37,.22) !important;
  transition:
    transform .28s cubic-bezier(.16,1,.3,1),
    background .24s ease,
    opacity .24s ease !important;
  opacity:1 !important;
}

.bhero-slide-dot.is-active{
  width:7px !important;
  height:7px !important;
  flex-basis:7px !important;
  background:#E11B25 !important;
  transform:scale(1.05) !important;
}

.bhero-slide-status{
  display:none !important;
}

/* Components animate independently with the slide */
.bhero-warranty,
.bhero-support{
  transition:
    opacity .42s cubic-bezier(.2,.8,.2,1),
    transform .5s cubic-bezier(.2,.8,.2,1),
    background .4s ease !important;
}

.bhero.is-changing .bhero-warranty{
  opacity:0 !important;
  transform:translateY(12px) scale(.985) !important;
}
.bhero.is-changing .bhero-support{
  opacity:0 !important;
  transform:translateY(16px) scale(.985) !important;
}

.bhero.is-entering .bhero-warranty{
  animation:bheroCompInA .64s cubic-bezier(.16,1,.3,1) both;
}
.bhero.is-entering .bhero-support{
  animation:bheroCompInB .72s cubic-bezier(.16,1,.3,1) both;
}

@keyframes bheroCompInA{
  from{opacity:0;transform:translateY(14px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}
@keyframes bheroCompInB{
  from{opacity:0;transform:translateY(18px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:640px){
  .bhero-slide-nav{
    width:32px !important;
    height:32px !important;
    flex-basis:32px !important;
  }
  .bhero-slide-dots{
    height:32px !important;
    gap:6px !important;
  }
}


@media(max-width:640px){
  .bhero > .container{
    width:calc(100% - 20px);
    padding:36px 0 12px;
  }
}



/* =========================================================
   HERO / BRAND INTEGRATION FIX
   No other homepage sections are changed.
   ========================================================= */

/* Reserve the fixed-header height above the whole homepage. */
body > main{
  padding-top:92px !important;
}

/* Hero control belongs below hero, centered, with its own clear breathing room. */
.bhero-slider-control{
  position:relative !important;
  z-index:8 !important;
  width:max-content !important;
  margin:16px auto 30px !important;
  padding:0 !important;
}

/* Brands must start AFTER the slider controls — no negative overlap. */
.brands-v18{
  position:relative !important;
  z-index:2 !important;
  margin:0 !important;
  padding:0 0 74px !important;
  background:transparent !important;
}

/* Remove any visual "strip/card" feeling from the brand section. */
.brand-v18-wrap,
.brand-v18-head,
.brand-v18-viewport,
.brand-v18-track,
.brand-v18-cycle,
.brand-marquee-item{
  background:transparent !important;
  box-shadow:none !important;
}

.brand-v18-viewport{
  border:0 !important;
  outline:0 !important;
}

/* Keep the loop edge fades, but fade into the SAME page background. */
.brand-v18-viewport::before{
  background:linear-gradient(90deg,rgba(239,239,237,0),var(--page)) !important;
}
.brand-v18-viewport::after{
  background:linear-gradient(-90deg,rgba(239,239,237,0),var(--page)) !important;
}

/* No inherited negative connection from the old brand positioning. */
.bhero + .bhero-slider-control + .brands-v18{
  margin-top:0 !important;
}

@media(max-width:900px){
  body > main{
    padding-top:84px !important;
  }
  .bhero-slider-control{
    margin-top:14px !important;
    margin-bottom:24px !important;
  }
}

@media(max-width:640px){
  body > main{
    padding-top:76px !important;
  }
  .bhero-slider-control{
    margin-top:12px !important;
    margin-bottom:20px !important;
  }
  .brands-v18{
    margin:0 !important;
    padding-top:0 !important;
  }
}



/* =========================================================
   MOBILE HERO CENTER + LIGHTER UNIFIED PAGE BACKGROUND
   ========================================================= */

:root{
  --page:#F6F6F4 !important;
}

/* Make the whole homepage use one lighter background tone. */
html,
body,
body > main,
.bhero,
.brands-v18,
.products,
.categories,
.trust,
.after-sales{
  background:var(--page) !important;
}

/* Brand section must fully blend into the page background. */
.brand-v18-wrap,
.brand-v18-head,
.brand-v18-viewport,
.brand-v18-track,
.brand-v18-cycle,
.brand-marquee-item{
  background:transparent !important;
}

.brand-v18-viewport::before{
  background:linear-gradient(
    90deg,
    rgba(246,246,244,0) 0%,
    rgba(246,246,244,.72) 58%,
    #F6F6F4 100%
  ) !important;
}

.brand-v18-viewport::after{
  background:linear-gradient(
    -90deg,
    rgba(246,246,244,0) 0%,
    rgba(246,246,244,.72) 58%,
    #F6F6F4 100%
  ) !important;
}

/* Mobile: center the product illustration in the hero. */
@media(max-width:640px){
  .bhero-visual{
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:82% !important;
    max-width:none !important;
    bottom:-2% !important;
    margin:0 !important;
  }

  .bhero-visual img{
    margin-inline:auto !important;
  }

  .brand-v18-viewport::before,
  .brand-v18-viewport::after{
    width:54px !important;
  }
}



@media(max-width:640px){
  /* Keep the copy in its own upper zone */
  .bhero-copy,
  .bhero-main{
    position:relative !important;
    z-index:4 !important;
  }

  /* Push the product illustration lower so it never sits behind the description */
  .bhero-visual{
    top:auto !important;
    bottom:10% !important;
    left:50% !important;
    right:auto !important;
    transform:translateX(-50%) !important;
    width:76% !important;
    z-index:2 !important;
  }

  /* Add a little breathing room below the description */
  .bhero-main p{
    margin-bottom:28px !important;
  }
}



/* =========================================================
   MOBILE HERO — REAL SEPARATED ZONES
   text / image / CTA no longer share the same vertical space
   ========================================================= */
@media(max-width:640px){

  .bhero-main{
    min-height:760px !important;
    height:auto !important;
    padding:88px 20px 82px !important;
    display:block !important;
    overflow:hidden !important;
  }

  /* Copy stays in the upper zone */
  .bhero-main h1,
  .bhero-main p{
    position:relative !important;
    top:auto !important;
    left:auto !important;
    right:auto !important;
    width:100% !important;
    max-width:100% !important;
    z-index:7 !important;
    text-align:right !important;
  }

  .bhero-main h1{
    margin:28px 0 0 !important;
  }

  .bhero-main p{
    margin:16px 0 0 !important;
    padding:0 !important;
  }

  /* Product gets its own middle zone — never behind the copy */
  .bhero-visual{
    position:absolute !important;
    top:350px !important;
    bottom:auto !important;
    left:50% !important;
    right:auto !important;
    width:72% !important;
    max-width:340px !important;
    margin:0 !important;
    transform:translateX(-50%) !important;
    opacity:.42 !important;
    z-index:2 !important;
  }

  .bhero-visual img{
    width:100% !important;
    margin:0 auto !important;
  }

  /* CTA stays in its own lower zone */
  .bhero-actions{
    left:20px !important;
    right:auto !important;
    bottom:20px !important;
    z-index:8 !important;
  }
}

/* Extra breathing room for very narrow phones */
@media(max-width:420px){
  .bhero-main{
    min-height:790px !important;
  }
  .bhero-visual{
    top:372px !important;
    width:76% !important;
  }
}



@media(max-width:640px){
  .bhero-visual{
    top:342px !important;
    width:88% !important;
    max-width:410px !important;
  }
}

@media(max-width:420px){
  .bhero-visual{
    top:360px !important;
    width:92% !important;
    max-width:390px !important;
  }
}



/* فقط بزرگ‌تر کردن تصویر پمپ در موبایل */
@media(max-width:640px){
  .bhero-visual{
    top:330px !important;
    width:104% !important;
    max-width:480px !important;
  }
}

@media(max-width:420px){
  .bhero-visual{
    top:350px !important;
    width:108% !important;
    max-width:450px !important;
  }
}



/* فقط کمی بالاتر آوردن پمپ در موبایل */
@media(max-width:640px){
  .bhero-visual{
    top:305px !important;
  }
}

@media(max-width:420px){
  .bhero-visual{
    top:325px !important;
  }
}



@media(max-width:760px){
  .ac-switch{
    scroll-behavior:smooth !important;
    scroll-padding-inline:18px !important;
    overscroll-behavior-x:contain !important;
    -webkit-overflow-scrolling:touch !important;
  }

  .ac-switch__btn:first-of-type{
    margin-right:8px !important;
  }

  .ac-switch__btn:last-of-type{
    margin-left:8px !important;
  }
}



/* =========================================================
   CATEGORY COMPONENT — CLEAN SOFT INDUSTRIAL MATERIAL
   Remove the double stroke and keep one controlled edge.
   ========================================================= */

/* The viewport is only a clipping mask; it must NOT draw another border. */
.cat-viewport.shell{
  border:0 !important;
  box-shadow:none !important;
  background:transparent !important;
  border-radius:40px !important;
}

/* One single Soft Industrial shell around the component. */
.cat-panel.shell{
  border:1px solid rgba(32,55,70,.075) !important;
  outline:0 !important;
  border-radius:40px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.48),rgba(255,255,255,.16)),
    #F3F4F1 !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.94),
    0 1px 2px rgba(18,22,25,.018),
    0 12px 30px rgba(18,22,25,.025) !important;
}

/* Image well uses a softer recessed material instead of a second hard frame. */
.cat-image{
  border:1px solid rgba(32,55,70,.055) !important;
  outline:0 !important;
  border-radius:30px !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.42)),
    rgba(248,249,247,.88) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.98),
    inset 0 -1px 0 rgba(32,55,70,.012),
    0 1px 2px rgba(18,22,25,.014) !important;
}

/* Pills follow the same restrained material. */
.cat-points span{
  background:rgba(255,255,255,.64) !important;
  border:1px solid rgba(32,55,70,.055) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.92) !important;
  color:#667278 !important;
}

/* Keep mobile geometry clean as well. */
@media(max-width:760px){
  .cat-viewport.shell,
  .cat-panel.shell{
    border-radius:32px !important;
  }

  .cat-image{
    border-radius:26px !important;
  }
}



/* Journey timeline: line starts/ends at node centers */
.journey-bars:before,
.journey-bars:after{
  right:8.333333% !important;
  left:8.333333% !important;
  width:auto !important;
}

.journey-bars:after{
  transform:scaleX(var(--journey-progress-scale,0)) !important;
  transform-origin:right center !important;
  transition:transform .38s cubic-bezier(.2,.8,.2,1) !important;
}



/* =========================================================
   CLEAN SCROLL MOTION — COMPACT PRODUCT CARD TRAVEL
   - no blur
   - no fade
   - tighter movement radius
   - no oversized empty gap under product section
   ========================================================= */

[data-scroll-motion]{
  --motion-p:0;
  --motion-y:38px;
  transform:translate3d(0,calc((1 - var(--motion-p)) * var(--motion-y)),0) !important;
  opacity:1 !important;
  filter:none !important;
  will-change:transform;
}

[data-scroll-motion="text"]{
  --motion-y:26px;
}

[data-scroll-motion="component"]{
  --motion-y:36px;
}

/* ---------- product cards ---------- */

.products{
  overflow:hidden !important;
  padding-bottom:0 !important;
  margin-bottom:0 !important;
}

.product-grid{
  position:relative !important;
  overflow:visible !important;
  padding-bottom:34px !important;
  margin-bottom:0 !important;
}

.product-grid .pcard{
  --card-scroll-p:0;
  opacity:1 !important;
  visibility:visible !important;
  filter:none !important;
  will-change:transform;
}

/* Much smaller travel radius, still visibly staggered */
.product-grid .pcard:nth-child(1){
  transform:translate3d(0,calc((1 - var(--card-scroll-p)) * 72px),0) !important;
}
.product-grid .pcard:nth-child(2){
  transform:translate3d(0,calc((1 - var(--card-scroll-p)) * 102px),0) !important;
}
.product-grid .pcard:nth-child(3){
  transform:translate3d(0,calc((1 - var(--card-scroll-p)) * 132px),0) !important;
}

/* Make sure the next section sits naturally close underneath */
.product-grid + *,
.products + *{
  margin-top:0 !important;
}

/* Category carousel keeps its original behavior */
.categories .cat-track,
.categories .cat-slide,
.categories .cat-panel{
  animation:none !important;
  filter:none !important;
}

@media(max-width:760px){
  .product-grid{
    padding-bottom:22px !important;
  }

  .product-grid .pcard:nth-child(1){
    transform:translate3d(0,calc((1 - var(--card-scroll-p)) * 54px),0) !important;
  }
  .product-grid .pcard:nth-child(2){
    transform:translate3d(0,calc((1 - var(--card-scroll-p)) * 76px),0) !important;
  }
  .product-grid .pcard:nth-child(3){
    transform:translate3d(0,calc((1 - var(--card-scroll-p)) * 98px),0) !important;
  }
}

@media(prefers-reduced-motion:reduce){
  [data-scroll-motion],
  .product-grid .pcard{
    transform:none !important;
  }
}



/* =========================================================
   VALUE / SUPPORT STRIP — AFTER-SALES MATERIAL, BRAND RED
   Same structure; material language taken from the existing
   after-sales section, recolored to Aras red.
   ========================================================= */

.aras-value-section{
  padding:0 0 34px;
  background:transparent;
}

.aras-value-shell{
  position:relative;
  overflow:hidden;
  border-radius:42px;
  padding:34px;

  /* same dense soft-industrial body as after-sales, but red */
  background:
    radial-gradient(circle at 86% 12%,rgba(255,255,255,.07),transparent 30%),
    radial-gradient(circle at 12% 88%,rgba(107,7,14,.12),transparent 34%),
    #D71923;

  border:1px solid rgba(116,8,15,.16);

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -1px 0 rgba(84,5,10,.08),
    0 16px 36px rgba(122,8,15,.09);
}

/* geometric soft-industrial arcs, like the after-sales section */
.aras-value-shell::before,
.aras-value-shell::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.065);
}

.aras-value-shell::before{
  width:360px;
  height:360px;
  right:-150px;
  top:-170px;
}

.aras-value-shell::after{
  width:520px;
  height:520px;
  right:-235px;
  top:-245px;
}

.aras-value-head{
  position:relative;
  z-index:2;
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:24px;
  direction:rtl;
}

.aras-value-kicker{
  color:rgba(255,255,255,.56);
  font-size:9px;
  font-weight:700;
  letter-spacing:.08em;
  direction:ltr;
}

.aras-value-head h2{
  margin:0;
  color:#fff;
  font-size:clamp(26px,2.45vw,36px);
  line-height:1.22;
  letter-spacing:-.8px;
}

/* Keep the same four-card structure, but make the cards feel
   like inset service modules instead of white floating tiles. */
.aras-value-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
}

.aras-value-card{
  min-height:170px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:22px;
  padding:18px;
  border-radius:26px;

  background:
    linear-gradient(180deg,rgba(255,255,255,.11),rgba(255,255,255,.055)),
    rgba(151,10,18,.34);

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

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.11),
    0 8px 22px rgba(99,6,12,.055);

  direction:rtl;

  transition:
    transform .26s cubic-bezier(.2,.8,.2,1),
    background .26s ease,
    border-color .26s ease;
}

.aras-value-card:hover{
  transform:translateY(-2px);
  background:
    linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.07)),
    rgba(151,10,18,.42);
  border-color:rgba(255,255,255,.18);
}

.aras-value-icon{
  width:46px;
  height:46px;
  display:grid;
  place-items:center;
  border-radius:15px;

  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.12);
}

.aras-value-icon svg{
  width:25px;
  height:25px;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.aras-value-copy h3{
  margin:0 0 7px;
  color:#fff;
  font-size:16px;
  line-height:1.45;
}

.aras-value-copy p{
  margin:0;
  color:rgba(255,255,255,.66);
  font-size:11.5px;
  line-height:1.9;
}

@media(max-width:900px){
  .aras-value-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media(max-width:640px){
  .aras-value-section{
    padding-bottom:24px;
  }

  .aras-value-shell{
    border-radius:32px;
    padding:20px;
  }

  .aras-value-head{
    align-items:flex-start;
    flex-direction:column;
    gap:8px;
    margin-bottom:16px;
  }

  .aras-value-head h2{
    font-size:27px;
  }

  .aras-value-grid{
    grid-template-columns:1fr;
    gap:10px;
  }

  .aras-value-card{
    min-height:0;
    flex-direction:row-reverse;
    align-items:center;
    justify-content:flex-end;
    gap:14px;
    padding:15px;
    border-radius:22px;
  }

  .aras-value-icon{
    flex:0 0 44px;
    width:44px;
    height:44px;
    border-radius:14px;
  }
}



/* Swap header sides: main title on left, kicker on right. */
.aras-value-head{
  direction:ltr !important;
  align-items:flex-end !important;
}
.aras-value-head h2{
  order:1 !important;
  margin-right:auto !important;
  margin-left:0 !important;
  text-align:left !important;
  direction:rtl !important;
}
.aras-value-kicker{
  order:2 !important;
  margin-left:auto !important;
  margin-right:0 !important;
  text-align:right !important;
}

/* Align card titles and descriptions to identical vertical zones. */
.aras-value-card{
  display:grid !important;
  grid-template-rows:48px 1fr !important;
  align-content:stretch !important;
  min-height:170px !important;
}
.aras-value-icon{
  align-self:start !important;
}
.aras-value-copy{
  align-self:end !important;
  width:100% !important;
}
.aras-value-copy h3{
  min-height:24px !important;
  display:flex !important;
  align-items:flex-end !important;
  margin:0 0 7px !important;
}
.aras-value-copy p{
  min-height:44px !important;
}

/* Mobile keeps the compact composition. */
@media(max-width:640px){
  .aras-value-head{
    direction:rtl !important;
  }
  .aras-value-head h2,
  .aras-value-kicker{
    order:initial !important;
    margin:0 !important;
    text-align:right !important;
  }
  .aras-value-card{
    display:flex !important;
    grid-template-rows:none !important;
    min-height:0 !important;
  }
  .aras-value-copy h3,
  .aras-value-copy p{
    min-height:0 !important;
  }
}



/* Main Persian title on the RIGHT, ARAS / SUPPORT NETWORK on the LEFT */
.aras-value-head{
  direction:rtl !important;
  display:flex !important;
  align-items:flex-end !important;
  justify-content:space-between !important;
}

.aras-value-head h2{
  order:1 !important;
  margin:0 !important;
  margin-left:auto !important;
  margin-right:0 !important;
  text-align:right !important;
  direction:rtl !important;
}

.aras-value-kicker{
  order:2 !important;
  margin:0 !important;
  margin-right:auto !important;
  margin-left:0 !important;
  text-align:left !important;
  direction:ltr !important;
}

@media(max-width:640px){
  .aras-value-head{
    direction:rtl !important;
  }

  .aras-value-head h2{
    margin:0 !important;
    text-align:right !important;
  }

  .aras-value-kicker{
    margin:0 !important;
    text-align:right !important;
    direction:ltr !important;
  }
}



/* =========================================================
   WORDPRESS / ELEMENTOR INTEGRATION
   Keep theme header/footer, make the custom homepage full-width.
   ========================================================= */
.arap-soft-home-root{
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  overflow:clip;
}

.arap-soft-home-root > .aras-agency-page{
  width:100% !important;
}

body.home .elementor,
body.home .elementor-section-wrap,
body.home .elementor-widget-wrap,
body.home .elementor-widget-container{
  max-width:none;
}



/* =========================================================
   WORDPRESS / ELEMENTOR COMPATIBILITY FIX — v2.0.1
   Keep the original homepage design while neutralizing theme
   button/heading styles and fixed header overlap.
   ========================================================= */

.arap-soft-home-root{
  --arap-header-offset:0px;
  box-sizing:border-box;
  padding-top:var(--arap-header-offset) !important;
  background:#F2F3F0 !important;
}

.arap-soft-home-root,
.arap-soft-home-root *{
  box-sizing:border-box;
}

/* ---------------------------------------------------------
   HERO — never sit underneath a fixed/sticky theme header
   --------------------------------------------------------- */
.arap-soft-home-root .bhero > .container{
  padding-top:36px !important;
}

.arap-soft-home-root .bhero-grid{
  position:relative;
  z-index:1;
}

/* ---------------------------------------------------------
   CATEGORY SWITCH — reset WordPress/theme button skin
   --------------------------------------------------------- */
.arap-soft-home-root .ac-switch{
  background:
    linear-gradient(180deg,rgba(255,255,255,.74),rgba(255,255,255,.36)),
    #F4F5F2 !important;
  border:1px solid rgba(32,55,70,.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 1px 2px rgba(18,22,25,.025) !important;
}

.arap-soft-home-root .ac-switch__btn,
.arap-soft-home-root .ac-switch__btn:hover,
.arap-soft-home-root .ac-switch__btn:focus,
.arap-soft-home-root .ac-switch__btn:active{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#70797E !important;
  text-shadow:none !important;
}

.arap-soft-home-root .ac-switch__btn.is-active{
  color:#E11B25 !important;
  background:transparent !important;
}

.arap-soft-home-root .ac-switch__indicator{
  background:
    linear-gradient(180deg,rgba(255,255,255,.62),rgba(255,255,255,0)),
    rgba(225,27,37,.075) !important;
  border:1px solid rgba(225,27,37,.15) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.92),
    0 1px 2px rgba(225,27,37,.025) !important;
}

.arap-soft-home-root .ac-nav__btn,
.arap-soft-home-root .ac-nav__btn:hover,
.arap-soft-home-root .ac-nav__btn:focus,
.arap-soft-home-root .ac-nav__btn:active{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:
    linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96)) !important;
  color:#203746 !important;
  border:1px solid rgba(28,34,38,.095) !important;
  box-shadow:
    inset 0 1px 0 #fff,
    0 1px 2px rgba(18,22,25,.025) !important;
}

/* ---------------------------------------------------------
   JOURNEY — neutralize theme button backgrounds
   --------------------------------------------------------- */
.arap-soft-home-root .journey-nav{
  background:#fff !important;
  border:1px solid rgba(28,34,38,.08) !important;
}

.arap-soft-home-root .journey-step,
.arap-soft-home-root .journey-step:focus,
.arap-soft-home-root .journey-step:active{
  appearance:none !important;
  -webkit-appearance:none !important;
  background:transparent !important;
  background-color:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  color:#596369 !important;
  text-shadow:none !important;
}

.arap-soft-home-root .journey-step:hover{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(28,34,38,.065) !important;
  color:#596369 !important;
}

.arap-soft-home-root .journey-step.active,
.arap-soft-home-root .journey-step.active:hover,
.arap-soft-home-root .journey-step.active:focus{
  background:rgba(225,27,37,.075) !important;
  border-color:rgba(225,27,37,.15) !important;
  color:#E11B25 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important;
}

.arap-soft-home-root .journey-step-copy strong{
  color:currentColor !important;
}

.arap-soft-home-root .journey-step-copy span{
  color:#9AA0A4 !important;
}

/* ---------------------------------------------------------
   TYPOGRAPHY COLORS — protect the designed palette from theme
   --------------------------------------------------------- */
.arap-soft-home-root .section-head h2,
.arap-soft-home-root .cat-copy h2,
.arap-soft-home-root .journey-stage h2,
.arap-soft-home-root .journey-stage h3,
.arap-soft-home-root .bhero-main h1{
  color:#1C2226 !important;
}

.arap-soft-home-root .bhero-main h1 b,
.arap-soft-home-root .section-head .eyebrow,
.arap-soft-home-root .journey-stage .accent{
  color:#E11B25 !important;
}

.arap-soft-home-root .journey-today,
.arap-soft-home-root .after,
.arap-soft-home-root .service-card{
  color:#fff !important;
}

.arap-soft-home-root .journey-today h2,
.arap-soft-home-root .journey-today h3,
.arap-soft-home-root .journey-today strong,
.arap-soft-home-root .journey-metric-value,
.arap-soft-home-root .after h2,
.arap-soft-home-root .after h3,
.arap-soft-home-root .after strong,
.arap-soft-home-root .service-card h2,
.arap-soft-home-root .service-card h3,
.arap-soft-home-root .service-card strong{
  color:#fff !important;
}

.arap-soft-home-root .journey-today p,
.arap-soft-home-root .after p,
.arap-soft-home-root .service-card p{
  color:rgba(255,255,255,.62) !important;
}

/* Support network remains white-on-red */
.arap-soft-home-root .aras-value-head h2,
.arap-soft-home-root .aras-value-copy h3,
.arap-soft-home-root .aras-value-icon{
  color:#fff !important;
}

/* ---------------------------------------------------------
   COMMON BUTTON MATERIAL — stop theme from recoloring
   --------------------------------------------------------- */
.arap-soft-home-root .btn,
.arap-soft-home-root .bhero-btn,
.arap-soft-home-root .pcard a,
.arap-soft-home-root .pcard button{
  font-family:"Yekan Bakh","YekanBakh",Tahoma,Arial,sans-serif !important;
  text-decoration:none !important;
}

.arap-soft-home-root .btn-primary,
.arap-soft-home-root .bhero-btn--primary,
.arap-soft-home-root .pcard .buy-btn{
  background:#E11B25 !important;
  color:#fff !important;
}

/* ---------------------------------------------------------
   RESPONSIVE header clearance
   --------------------------------------------------------- */
@media(max-width:760px){
  .arap-soft-home-root .bhero > .container{
    padding-top:22px !important;
  }
}


/* =========================================================
   v2.0.2 — FINAL WORDPRESS / ELEMENTOR COMPATIBILITY
   ========================================================= */

/* Keep hero completely below the live sticky header. */
.arap-soft-home-root{
  --arap-header-offset:118px;
  padding-top:var(--arap-header-offset) !important;
}
.arap-soft-home-root .bhero > .container{
  padding-top:26px !important;
}

/* Hero side-card typography must stay white on red/navy material. */
.arap-soft-home-root .bhero-warranty,
.arap-soft-home-root .bhero-support,
.arap-soft-home-root .bhero-warranty h4,
.arap-soft-home-root .bhero-support h4{
  color:#fff !important;
}
.arap-soft-home-root .bhero-warranty .sub{color:rgba(255,255,255,.72) !important;}
.arap-soft-home-root .bhero-support .sub{color:rgba(255,255,255,.60) !important;}
.arap-soft-home-root .bhero-w-chip{color:#fff !important;}

/* Category navigation: force the exact circular Soft Industrial controls. */
.arap-soft-home-root .ac-nav{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}
.arap-soft-home-root button.ac-nav__btn,
.arap-soft-home-root button.ac-nav__btn:hover,
.arap-soft-home-root button.ac-nav__btn:focus,
.arap-soft-home-root button.ac-nav__btn:active{
  width:42px !important;
  min-width:42px !important;
  max-width:42px !important;
  height:42px !important;
  min-height:42px !important;
  max-height:42px !important;
  padding:0 !important;
  margin:0 !important;
  border-radius:50% !important;
  display:grid !important;
  place-items:center !important;
  border:1px solid rgba(28,34,38,.095) !important;
  background:linear-gradient(180deg,rgba(255,255,255,.98),rgba(250,250,248,.96)) !important;
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(18,22,25,.025) !important;
  color:transparent !important;
  font-size:0 !important;
  line-height:0 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.arap-soft-home-root button.ac-nav__btn::before{
  content:"" !important;
  display:block !important;
  position:absolute !important;
  top:50% !important;
  left:50% !important;
  width:8px !important;
  height:8px !important;
  border-top:2px solid #203746 !important;
  border-right:2px solid #203746 !important;
}
.arap-soft-home-root button.ac-nav__btn--prev::before{
  transform:translate(-38%,-50%) rotate(-135deg) !important;
}
.arap-soft-home-root button.ac-nav__btn--next::before{
  transform:translate(-62%,-50%) rotate(45deg) !important;
}
.arap-soft-home-root button.ac-nav__btn:hover::before{
  border-color:#E11B25 !important;
}

/* Category tabs: theme button rules must never paint the whole switch red. */
.arap-soft-home-root .ac-switch__btn,
.arap-soft-home-root .ac-switch__btn:hover,
.arap-soft-home-root .ac-switch__btn:focus,
.arap-soft-home-root .ac-switch__btn:active{
  background:transparent !important;
  background-color:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  color:#70797E !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.arap-soft-home-root .ac-switch__btn.is-active{color:#E11B25 !important;}

/* Journey list: preserve neutral rows + one soft-red active row. */
.arap-soft-home-root .journey-nav{
  background:#fff !important;
  border:1px solid rgba(28,34,38,.08) !important;
}
.arap-soft-home-root button.journey-step,
.arap-soft-home-root button.journey-step:focus,
.arap-soft-home-root button.journey-step:active{
  background:transparent !important;
  border:1px solid transparent !important;
  box-shadow:none !important;
  color:#596369 !important;
  appearance:none !important;
  -webkit-appearance:none !important;
}
.arap-soft-home-root button.journey-step:hover{
  background:rgba(255,255,255,.78) !important;
  border-color:rgba(28,34,38,.065) !important;
}
.arap-soft-home-root button.journey-step.active,
.arap-soft-home-root button.journey-step.active:hover,
.arap-soft-home-root button.journey-step.active:focus{
  color:#E11B25 !important;
  background:rgba(225,27,37,.075) !important;
  border-color:rgba(225,27,37,.15) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.88) !important;
}

/* Journey progress is a single continuous line between node centers. */
.arap-soft-home-root .journey-bars{
  position:relative !important;
  direction:rtl !important;
}
.arap-soft-home-root .journey-bars::before,
.arap-soft-home-root .journey-bars::after{
  content:"" !important;
  position:absolute !important;
  top:7px !important;
  right:8.333333% !important;
  left:8.333333% !important;
  width:auto !important;
  height:2px !important;
  border-radius:999px !important;
}
.arap-soft-home-root .journey-bars::before{
  background:#DADFE1 !important;
}
.arap-soft-home-root .journey-bars::after{
  background:#E11B25 !important;
  transform:scaleX(var(--journey-progress-scale,0)) !important;
  transform-origin:right center !important;
  transition:transform .38s cubic-bezier(.2,.8,.2,1) !important;
}

/* Theme heading colors must not leak into dark modules. */
.arap-soft-home-root .journey-today,
.arap-soft-home-root .journey-today h3,
.arap-soft-home-root .journey-today strong,
.arap-soft-home-root .journey-metric-value,
.arap-soft-home-root .after,
.arap-soft-home-root .after h2,
.arap-soft-home-root .after h3,
.arap-soft-home-root .after strong,
.arap-soft-home-root .service-card,
.arap-soft-home-root .service-card h2,
.arap-soft-home-root .service-card h3,
.arap-soft-home-root .service-card strong{
  color:#fff !important;
}

@media(max-width:900px){
  .arap-soft-home-root{--arap-header-offset:104px;}
}
@media(max-width:640px){
  .arap-soft-home-root{--arap-header-offset:92px;}
}

/* v3.0.2 — Aras red glass material for the after-sales request card only. */
.arap-soft-home-root .after .service-card{
  isolation:isolate;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 0%,rgba(255,255,255,.22),transparent 42%),
    linear-gradient(145deg,rgba(235,35,46,.88),rgba(181,8,20,.72)) !important;
  border:1px solid rgba(255,255,255,.26) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.30),
    inset 0 -1px 0 rgba(100,0,8,.18),
    0 18px 44px rgba(153,9,20,.22) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  backdrop-filter:blur(18px) saturate(140%);
}
.arap-soft-home-root .after .service-card::before{
  content:"";
  position:absolute;
  z-index:-1;
  width:220px;
  height:220px;
  inset:-105px auto auto -75px;
  border-radius:50%;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 0 0 42px rgba(255,255,255,.035);
  pointer-events:none;
}
.arap-soft-home-root .after .service-card small{
  color:rgba(255,255,255,.78) !important;
}
.arap-soft-home-root .after .service-list div{
  color:rgba(255,255,255,.90) !important;
  border-bottom-color:rgba(255,255,255,.18) !important;
}
.arap-soft-home-root .after .service-card .btn{
  background:rgba(104,0,9,.28) !important;
  border-color:rgba(255,255,255,.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 8px 22px rgba(87,0,8,.16) !important;
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.arap-soft-home-root .after .service-card .btn:hover{
  background:rgba(92,0,8,.42) !important;
}

/* v3.0.3 — light-gray section + the subtle Aras red-glass treatment. */
.arap-soft-home-root .after .after-shell{
  background:
    radial-gradient(circle at 92% 8%,rgba(255,255,255,.92),transparent 38%),
    linear-gradient(145deg,#f5f5f3,#ececea) !important;
  color:#1c2226 !important;
  border:1px solid rgba(28,34,38,.075) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 18px 44px rgba(18,22,25,.07) !important;
}
.arap-soft-home-root .after .after-copy,
.arap-soft-home-root .after .after-copy h2,
.arap-soft-home-root .after .after-copy h3,
.arap-soft-home-root .after .after-copy strong,
.arap-soft-home-root .after .after-stat strong{
  color:#1c2226 !important;
}
.arap-soft-home-root .after .after-copy p{
  color:rgba(28,34,38,.62) !important;
}
.arap-soft-home-root .after .after-copy .kicker{
  color:#d71923 !important;
  background:rgba(225,27,37,.045) !important;
  border-color:rgba(225,27,37,.16) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.82) !important;
}
.arap-soft-home-root .after .after-stat{
  border-top-color:rgba(28,34,38,.09) !important;
}
.arap-soft-home-root .after .after-stat span{
  color:rgba(28,34,38,.48) !important;
}
.arap-soft-home-root .after .service-card{
  background:
    radial-gradient(circle at 12% 0%,rgba(255,255,255,.76),transparent 40%),
    linear-gradient(145deg,rgba(225,27,37,.075),rgba(225,27,37,.035)) !important;
  color:#1c2226 !important;
  border:1px solid rgba(225,27,37,.17) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.90),
    0 14px 34px rgba(140,12,20,.075) !important;
  -webkit-backdrop-filter:blur(18px) saturate(125%);
  backdrop-filter:blur(18px) saturate(125%);
}
.arap-soft-home-root .after .service-card::before{
  background:rgba(225,27,37,.035) !important;
  border-color:rgba(225,27,37,.08) !important;
  box-shadow:0 0 0 42px rgba(225,27,37,.018) !important;
}
.arap-soft-home-root .after .service-card small{
  color:#d71923 !important;
}
.arap-soft-home-root .after .service-list div{
  color:rgba(28,34,38,.72) !important;
  border-bottom-color:rgba(225,27,37,.105) !important;
}
.arap-soft-home-root .after .service-list b{
  color:#d71923 !important;
}
.arap-soft-home-root .after .service-card .btn{
  color:#d71923 !important;
  background:rgba(225,27,37,.045) !important;
  border-color:rgba(225,27,37,.17) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.86),0 7px 18px rgba(140,12,20,.06) !important;
}
.arap-soft-home-root .after .service-card .btn:hover{
  color:#bd111b !important;
  background:rgba(225,27,37,.085) !important;
}


/* =========================================================
   v2.0.3 — standalone public front-page body
   The old Elementor page body is no longer rendered at all.
   ========================================================= */
body.home .arap-soft-home-root{
  display:block !important;
  min-height:0 !important;
}

body.home .arap-soft-home-root ~ .elementor,
body.home .arap-soft-home-root ~ .site-main,
body.home .arap-soft-home-root ~ main{
  display:none !important;
}



/* =========================================================
   v2.0.4 — GREEN REFERENCE MATCH
   Final public homepage refinements.
   ========================================================= */

/* ---------- PAGE / HEADER TRANSITION ---------- */
/* The band directly under the sticky header must be the same page tone. */
html,
body,
body.home,
body.home #page,
body.home .site,
body.home .site-content,
body.home .content-area,
body.home main,
body.home .arap-soft-home-root{
  background:#F6F6F4 !important;
}

.arap-soft-home-root{
  --page:#F6F6F4 !important;
}

/* Never paint a white gap above the hero. */
.arap-soft-home-root,
.arap-soft-home-root .bhero,
.arap-soft-home-root .bhero > .container{
  background:#F6F6F4 !important;
}

/* ---------- BRAND NETWORK — match green reference ---------- */
.arap-soft-home-root .brands-v18{
  padding:22px 0 58px !important;
}

.arap-soft-home-root .brand-v18-wrap{
  width:min(1180px,calc(100% - 40px)) !important;
}

.arap-soft-home-root .brand-v18-head{
  min-height:28px !important;
  margin-bottom:18px !important;
}

.arap-soft-home-root .brand-v18-viewport{
  height:126px !important;
}

.arap-soft-home-root .brand-v18-track,
.arap-soft-home-root .brand-v18-cycle{
  height:126px !important;
}

.arap-soft-home-root .brand-marquee-item{
  width:210px !important;
  flex-basis:210px !important;
  height:126px !important;
  padding:18px 26px !important;
}

.arap-soft-home-root .brand-marquee-item img{
  max-width:148px !important;
  max-height:52px !important;
}

/* ---------- CATEGORY CONTROL — compact width / correct material ---------- */
.arap-soft-home-root .ac-controls{
  gap:14px !important;
  margin-bottom:18px !important;
}

.arap-soft-home-root .ac-switch{
  min-height:44px !important;
  padding:4px !important;
  gap:2px !important;
  width:auto !important;
  max-width:720px !important;
}

.arap-soft-home-root .ac-switch__btn{
  height:36px !important;
  padding:0 12px !important;
  font-size:10.7px !important;
  font-weight:600 !important;
}

.arap-soft-home-root .ac-switch__indicator{
  top:4px !important;
height:36px !important;
  border-radius:999px !important;
}

.arap-soft-home-root .ac-nav{
  gap:7px !important;
}

.arap-soft-home-root .ac-nav__btn{
  width:40px !important;
  height:40px !important;
  border-radius:50% !important;
  padding:0 !important;
}

/* ---------- JOURNEY NAV — green reference proportions ---------- */
.arap-soft-home-root .journey-main{
  grid-template-columns:minmax(270px,315px) minmax(0,1fr) !important;
  gap:18px !important;
}

.arap-soft-home-root .journey-nav{
  padding:12px !important;
  gap:6px !important;
  border-radius:34px !important;
  overflow:hidden !important;
}

.arap-soft-home-root .journey-step{
  min-height:66px !important;
  padding:10px 14px !important;
  grid-template-columns:62px 1fr !important;
  border-radius:24px !important;
}

.arap-soft-home-root .journey-step:hover{
  border-radius:24px !important;
}

.arap-soft-home-root .journey-step.active,
.arap-soft-home-root .journey-step.active:hover,
.arap-soft-home-root .journey-step.active:focus{
  border-radius:24px !important;
  background:rgba(225,27,37,.075) !important;
  border-color:rgba(225,27,37,.17) !important;
}

/* ---------- TODAY STRIP — compact metrics ---------- */
.arap-soft-home-root .journey-today{
  margin-top:18px !important;
  padding:16px !important;
  grid-template-columns:minmax(270px, .82fr) minmax(0, 2.18fr) !important;
  gap:14px !important;
  border-radius:30px !important;
  min-height:0 !important;
  align-items:center !important;
}

.arap-soft-home-root .journey-today-copy{
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
  padding:4px 6px !important;
}

.arap-soft-home-root .journey-today-copy h3{
  margin-top:8px !important;
  font-size:21px !important;
  line-height:1.55 !important;
  max-width:310px !important;
}

.arap-soft-home-root .journey-today-copy p{
  margin-top:9px !important;
  font-size:10.8px !important;
  line-height:1.9 !important;
  max-width:330px !important;
}

.arap-soft-home-root .journey-metrics{
  gap:7px !important;
  align-items:center !important;
}

.arap-soft-home-root .journey-metric{
  min-height:76px !important;
  height:auto !important;
  padding:10px 11px !important;
  border-radius:15px !important;
  justify-content:space-between !important;
  gap:8px !important;
}

.arap-soft-home-root .journey-metric small{
  font-size:7.8px !important;
  line-height:1.35 !important;
}

.arap-soft-home-root .journey-metric>span{
  font-size:8px !important;
  line-height:1.35 !important;
}

.arap-soft-home-root .journey-metric-value{
  min-height:32px !important;
  align-items:center !important;
}

.arap-soft-home-root .journey-metric-value .unit{
  padding-bottom:0 !important;
  font-size:7px !important;
}

/* ---------- Desktop tuning from the reference screenshots ---------- */
@media(min-width:1001px){
  .arap-soft-home-root .ac-controls{
    justify-content:space-between !important;
  }

  .arap-soft-home-root .ac-switch{
    flex:0 1 690px !important;
  }

  .arap-soft-home-root .journey-nav{
    width:100% !important;
  }
}

/* ---------- Tablet/mobile retain the established responsive behavior ---------- */
@media(max-width:1000px){
  .arap-soft-home-root .journey-main{
    grid-template-columns:1fr !important;
  }

  .arap-soft-home-root .journey-today{
    grid-template-columns:1fr !important;
  }
}

@media(max-width:640px){
  .arap-soft-home-root .brand-v18-viewport,
  .arap-soft-home-root .brand-v18-track,
  .arap-soft-home-root .brand-v18-cycle{
    height:94px !important;
  }

  .arap-soft-home-root .brand-marquee-item{
    height:94px !important;
    width:160px !important;
    flex-basis:160px !important;
  }

  .arap-soft-home-root .ac-switch{
    max-width:none !important;
    min-height:42px !important;
  }

  .arap-soft-home-root .ac-switch__btn{
    height:34px !important;
    font-size:10px !important;
    padding:0 11px !important;
  }

  .arap-soft-home-root .ac-switch__indicator{
    height:34px !important;
  }
}





/* =========================================================
   v2.0.6 — CATEGORY SELECTOR / NAV FINAL FIX
   ========================================================= */

/* One positioning system only: the original JS writes left + width. */
.arap-soft-home-root .ac-switch{
  position:relative !important;
}

.arap-soft-home-root .ac-switch__indicator{
  position:absolute !important;
  top:4px !important;
  bottom:auto !important;
  height:36px !important;
  transform:none !important;
  border-radius:999px !important;
  pointer-events:none !important;

  transition:
    left .52s cubic-bezier(.22,.88,.26,1),
    width .52s cubic-bezier(.22,.88,.26,1),
    border-radius .34s ease,
    box-shadow .34s ease !important;
}

.arap-soft-home-root .ac-switch__btn{
  position:relative !important;
  z-index:2 !important;
}

/* Both category arrows share exactly the same interaction material. */
.arap-soft-home-root button.ac-nav__btn:hover,
.arap-soft-home-root button.ac-nav__btn:focus-visible,
.arap-soft-home-root button.ac-nav__btn:active,
.arap-soft-home-root button.ac-nav__btn.is-glass-pressed{
  color:#E11B25 !important;

  background:
    linear-gradient(
      180deg,
      rgba(255,255,255,.82),
      rgba(255,255,255,.24)
    ),
    rgba(225,27,37,.085) !important;

  border-color:rgba(225,27,37,.20) !important;

  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.96),
    0 5px 14px rgba(225,27,37,.07) !important;
}

.arap-soft-home-root button.ac-nav__btn:hover::before,
.arap-soft-home-root button.ac-nav__btn:focus-visible::before,
.arap-soft-home-root button.ac-nav__btn:active::before,
.arap-soft-home-root button.ac-nav__btn.is-glass-pressed::before{
  border-color:#E11B25 !important;
}

/* No directional button gets a special neutral hover override anymore. */
.arap-soft-home-root button.ac-nav__btn--prev:hover,
.arap-soft-home-root button.ac-nav__btn--next:hover{
  color:#E11B25 !important;
}

@media(max-width:640px){
  .arap-soft-home-root .ac-switch__indicator{
    height:34px !important;
  }
}


/* =========================================================
   v2.0.7 — CATEGORY GLASS POSITION FINAL
   IMPORTANT: no CSS left value here.
   JS owns left + width so the glass aligns to the active tab.
   ========================================================= */
.arap-soft-home-root .ac-switch__indicator{
  right:auto !important;
  margin:0 !important;
}

/* Active tab stays above the moving glass. */
.arap-soft-home-root .ac-switch__btn.is-active{
  position:relative !important;
  z-index:3 !important;
}


/* =========================================================
   v2.0.8 — CATEGORY EDGE BALANCE + HERO HEADER GAP
   ========================================================= */

/* Category selector: equal visual inset on both ends */
.arap-soft-home-root .ac-switch{
  padding-inline:8px !important;
}

.arap-soft-home-root .ac-switch__btn:first-of-type{
  margin-inline-start:0 !important;
}

.arap-soft-home-root .ac-switch__btn:last-of-type{
  margin-inline-end:0 !important;
}

/* Keep the liquid indicator inside the same balanced inner rail */
.arap-soft-home-root .ac-switch__indicator{
  max-width:calc(100% - 16px) !important;
}

.arap-soft-home-root .bhero{
  margin-top:0 !important;
  padding-top:0 !important;
}

.arap-soft-home-root .bhero > .container{
  padding-top:14px !important;
}

/* reduce oversized top breathing room created by previous header-clearance patch */
.arap-soft-home-root .bhero-grid{
  margin-top:0 !important;
}

@media(max-width:760px){
  .arap-soft-home-root .bhero > .container{
    padding-top:12px !important;
  }
}


/* =========================================================
   v2.0.9 — HERO BELOW STICKY HEADER
   Restore measured header clearance; keep only a small gap.
   ========================================================= */
.arap-soft-home-root{
  padding-top:var(--arap-header-offset, 0px) !important;
}

.arap-soft-home-root .bhero{
  margin-top:0 !important;
  padding-top:0 !important;
}

.arap-soft-home-root .bhero > .container{
  padding-top:10px !important;
}

@media(max-width:760px){
  .arap-soft-home-root .bhero > .container{
    padding-top:8px !important;
  }
}

/* =========================================================
   v2.0.10 — MOBILE HERO COMPACT FLOW
   Reduce text/image dead space and always start at document top.
   ========================================================= */
@media(max-width:640px){
  .arap-soft-home-root .bhero-main{
    min-height:660px !important;
    padding:54px 20px 34px !important;
  }
  .arap-soft-home-root .bhero-main h1{
    margin-top:22px !important;
    margin-bottom:0 !important;
  }
  .arap-soft-home-root .bhero-main p{
    margin-top:16px !important;
    margin-bottom:0 !important;
  }
  .arap-soft-home-root .bhero-visual{
    top:255px !important;
    bottom:auto !important;
    width:100% !important;
    max-width:450px !important;
  }
}
@media(max-width:420px){
  .arap-soft-home-root .bhero-main{
    min-height:625px !important;
    padding-top:48px !important;
  }
  .arap-soft-home-root .bhero-visual{
    top:245px !important;
    width:104% !important;
    max-width:420px !important;
  }
}


/* =========================================================
   v2.0.11 — HERO TYPE SAFETY + MOBILE STABLE COMPACT LAYOUT
   ========================================================= */
@media(min-width:901px){
  .arap-soft-home-root .bhero-main h1{
    width:48% !important;
    max-width:570px !important;
    line-height:1.28 !important;
    letter-spacing:-1px !important;
    margin-top:12px !important;
    margin-bottom:0 !important;
  }
  .arap-soft-home-root .bhero-main p{
    width:48% !important;
    max-width:570px !important;
    line-height:2 !important;
    margin-top:24px !important;
    margin-bottom:0 !important;
    position:relative !important;
    z-index:8 !important;
  }
}

/* v3.0.6 — plain category kicker; no extra red frame behind its title. */
.arap-soft-home-root .cat-copy .kicker{
  width:max-content !important;
  min-height:0 !important;
  padding:0 !important;
  color:#d71923 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}

/* Remove the decorative semicircle/ring strokes inside the glass service card. */
.arap-soft-home-root .after .service-card::before,
.arap-soft-home-root .after .service-card::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* v3.0.7 final cascade override: never reveal the retired outline placeholder. */
.arap-soft-home-root .bhero-visual img.arap-hero-image-loading{
  opacity:0 !important;
}
.arap-soft-home-root .bhero-visual img.arap-hero-image-ready{
  opacity:1 !important;
  transition:opacity .22s ease !important;
}

/* v3.0.7 — show only the configured Hero image after it is fully loaded. */
.arap-soft-home-root .bhero-visual img.arap-hero-image-loading{
  opacity:0 !important;
}
.arap-soft-home-root .bhero-visual img.arap-hero-image-ready{
  opacity:1 !important;
  transition:opacity .22s ease !important;
}

@media(max-width:760px){
  /* Prevent late header measurements from visually pulling the hero upward. */
  .arap-soft-home-root{
    transition:none !important;
  }
  .arap-soft-home-root .bhero > .container{
    padding-top:8px !important;
  }
  .arap-soft-home-root .bhero-main{
    min-height:585px !important;
    height:auto !important;
    padding:42px 20px 28px !important;
  }
  .arap-soft-home-root .bhero-main h1{
    line-height:1.34 !important;
    margin:18px 0 0 !important;
  }
  .arap-soft-home-root .bhero-main p{
    line-height:1.95 !important;
    margin:12px 0 0 !important;
  }
  .arap-soft-home-root .bhero-visual{
    top:218px !important;
    bottom:auto !important;
    width:96% !important;
    max-width:410px !important;
    opacity:.42 !important;
  }
}
@media(max-width:420px){
  .arap-soft-home-root .bhero-main{
    min-height:555px !important;
    padding-top:38px !important;
  }
  .arap-soft-home-root .bhero-visual{
    top:210px !important;
    width:100% !important;
    max-width:390px !important;
  }
}

/* v2.0.12 — Journey desktop layout restoration */
@media (min-width:1001px){
  .arap-soft-home-root .journey-main{
    grid-template-columns:minmax(0,1fr) 360px !important;
    gap:18px !important;
    min-height:500px !important;
    align-items:stretch !important;
  }
  .arap-soft-home-root .journey-stage{
    min-width:0 !important;
    width:auto !important;
    padding:34px !important;
  }
  .arap-soft-home-root .journey-nav{
    width:auto !important;
    min-width:0 !important;
    padding:12px !important;
  }
  .arap-soft-home-root .journey-step{
    width:100% !important;
    min-height:70px !important;
    grid-template-columns:64px minmax(0,1fr) !important;
    padding:10px 12px !important;
  }
  .arap-soft-home-root .journey-stage-content{
    padding:28px 0 22px !important;
  }
  .arap-soft-home-root .journey-stage h3{
    font-size:28px !important;
    line-height:1.5 !important;
  }
}

/* =========================================================
   v2.0.13 — FINAL QA: hero flow, category glass, journey layout
   ========================================================= */
.arap-soft-home-root{background:#f7f7f5 !important;}

/* Category rail: balanced edges; JS owns exact glass geometry. */
.arap-soft-home-root .ac-controls{align-items:center !important;}
.arap-soft-home-root .ac-switch{
  width:100% !important;
  flex:1 1 auto !important;
  padding:5px 8px !important;
}
.arap-soft-home-root .ac-switch__btn{
  flex:1 1 0 !important;
  min-width:max-content !important;
  padding-inline:16px !important;
}
.arap-soft-home-root .ac-switch__indicator{
  max-width:none !important;
  transform:none !important;
}

/* Desktop hero: preserve a clean text column and prevent title/copy collision. */
@media(min-width:901px){
  .arap-soft-home-root .bhero-main{
    padding:78px 46px 48px !important;
    justify-content:flex-start !important;
    align-items:flex-end !important;
  }
  .arap-soft-home-root .bhero-main h1{
    width:48% !important;
    max-width:520px !important;
    margin:56px 0 0 !important;
    font-size:clamp(34px,3.25vw,48px) !important;
    line-height:1.42 !important;
    letter-spacing:-.7px !important;
    position:relative !important;
    z-index:6 !important;
  }
  .arap-soft-home-root .bhero-main p{
    width:48% !important;
    max-width:520px !important;
    margin:22px 0 0 !important;
    font-size:13px !important;
    line-height:2.05 !important;
    position:relative !important;
    z-index:6 !important;
  }
  .arap-soft-home-root .bhero-visual{
    right:49% !important;
    left:auto !important;
    top:205px !important;
    bottom:auto !important;
    width:45% !important;
    max-width:480px !important;
    transform:translateX(50%) !important;
  }
  .arap-soft-home-root .bhero-actions{
    margin-top:auto !important;
    align-self:flex-start !important;
    position:relative !important;
    z-index:7 !important;
  }
}

/* Mobile hero: deterministic document flow; no late absolute-position jump. */
@media(max-width:900px){
  .arap-soft-home-root .bhero-main{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto auto auto auto !important;
    align-content:start !important;
    min-height:0 !important;
    height:auto !important;
    padding:38px 20px 28px !important;
  }
  .arap-soft-home-root .bhero-kicker{
    position:relative !important;
    inset:auto !important;
    grid-row:1 !important;
    justify-self:start !important;
    margin:0 0 22px !important;
  }
  .arap-soft-home-root .bhero-main h1{
    grid-row:2 !important;
    width:100% !important;
    max-width:none !important;
    margin:0 !important;
    text-align:right !important;
    align-self:auto !important;
    font-size:clamp(34px,8vw,48px) !important;
    line-height:1.38 !important;
    position:relative !important;
    z-index:5 !important;
  }
  .arap-soft-home-root .bhero-main p{
    grid-row:3 !important;
    width:100% !important;
    max-width:none !important;
    margin:18px 0 0 !important;
    text-align:right !important;
    line-height:2 !important;
    position:relative !important;
    z-index:5 !important;
  }
  .arap-soft-home-root .bhero-visual{
    grid-row:4 !important;
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    justify-self:center !important;
    width:min(94%,460px) !important;
    max-width:460px !important;
    margin:-4px auto 0 !important;
    opacity:.46 !important;
  }
  .arap-soft-home-root .bhero-actions{
    grid-row:5 !important;
    margin:8px 0 0 !important;
    justify-self:start !important;
    position:relative !important;
    z-index:7 !important;
  }
}
@media(max-width:480px){
  .arap-soft-home-root .bhero-main{padding:34px 18px 24px !important;}
  .arap-soft-home-root .bhero-main h1{font-size:36px !important;line-height:1.42 !important;}
  .arap-soft-home-root .bhero-main p{margin-top:14px !important;font-size:13px !important;}
  .arap-soft-home-root .bhero-visual{width:96% !important;margin-top:-10px !important;}
  .arap-soft-home-root .bhero-actions{margin-top:6px !important;}
}

/* Journey: reference layout = navigation on the left, large stage on the right. */
@media(min-width:1001px){
  .arap-soft-home-root .journey-main{
    grid-template-columns:360px minmax(0,1fr) !important;
    direction:ltr !important;
  }
  .arap-soft-home-root .journey-nav{
    grid-column:1 !important;
    grid-row:1 !important;
    direction:rtl !important;
  }
  .arap-soft-home-root .journey-stage{
    grid-column:2 !important;
    grid-row:1 !important;
    direction:rtl !important;
  }
  .arap-soft-home-root .journey-today{direction:rtl !important;}
}

/* =========================================================
   v2.0.14 — HERO LAYOUT HARD FIX
   ========================================================= */
@media (min-width:901px){
  .arap-soft-home-root .bhero-main{
    position:relative!important;
    display:block!important;
    min-height:600px!important;
    padding:0!important;
    overflow:hidden!important;
  }
  .arap-soft-home-root .bhero-kicker{
    position:absolute!important;top:18px!important;left:22px!important;right:auto!important;
    margin:0!important;z-index:10!important;
  }
  .arap-soft-home-root .bhero-main h1{
    position:absolute!important;
    top:142px!important;left:46px!important;right:auto!important;
    width:46%!important;max-width:500px!important;
    margin:0!important;padding:0!important;
    text-align:right!important;
    font-size:clamp(38px,3.35vw,52px)!important;
    line-height:1.38!important;letter-spacing:-1px!important;
    z-index:8!important;
  }
  .arap-soft-home-root .bhero-main p{
    position:absolute!important;
    top:300px!important;left:46px!important;right:auto!important;
    width:46%!important;max-width:500px!important;
    margin:0!important;padding:0!important;
    text-align:right!important;
    font-size:13px!important;line-height:2.05!important;
    z-index:8!important;
  }
  .arap-soft-home-root .bhero-visual{
    position:absolute!important;
    top:190px!important;right:3%!important;left:auto!important;bottom:auto!important;
    width:48%!important;max-width:520px!important;
    transform:none!important;margin:0!important;
    z-index:3!important;
  }
  .arap-soft-home-root .bhero-actions{
    position:absolute!important;left:28px!important;right:auto!important;bottom:28px!important;
    margin:0!important;z-index:9!important;
  }
}
@media (max-width:900px){
  .arap-soft-home-root .bhero-main{
    display:flex!important;flex-direction:column!important;align-items:stretch!important;
    min-height:0!important;height:auto!important;padding:36px 20px 26px!important;
  }
  .arap-soft-home-root .bhero-kicker{order:1!important;position:relative!important;inset:auto!important;align-self:flex-start!important;margin:0 0 26px!important;}
  .arap-soft-home-root .bhero-main h1{order:2!important;position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;margin:0!important;text-align:right!important;line-height:1.4!important;}
  .arap-soft-home-root .bhero-main p{order:3!important;position:relative!important;inset:auto!important;width:100%!important;max-width:none!important;margin:16px 0 0!important;text-align:right!important;line-height:1.9!important;}
  .arap-soft-home-root .bhero-visual{order:4!important;position:relative!important;inset:auto!important;width:min(82%,390px)!important;max-width:390px!important;transform:none!important;margin:-18px auto -4px!important;opacity:.48!important;}
  .arap-soft-home-root .bhero-actions{order:5!important;position:relative!important;inset:auto!important;align-self:flex-start!important;margin:0!important;}
}
@media (max-width:480px){
 .arap-soft-home-root .bhero-main{padding:32px 18px 22px!important;}
 .arap-soft-home-root .bhero-kicker{margin-bottom:22px!important;}
 .arap-soft-home-root .bhero-main h1{font-size:36px!important;line-height:1.42!important;}
 .arap-soft-home-root .bhero-main p{font-size:13px!important;margin-top:14px!important;}
 .arap-soft-home-root .bhero-visual{width:78%!important;margin:-22px auto -8px!important;}
}


/* =========================================================
   v2.0.15 — HERO COPY STRUCTURE FIX
   Title and paragraph are one protected flow block. This
   intentionally overrides legacy absolute/flex hero rules.
   ========================================================= */
.arap-soft-home-root .bhero-copy-block{
  position:relative !important;
  z-index:8 !important;
  box-sizing:border-box !important;
}
.arap-soft-home-root .bhero-copy-block h1,
.arap-soft-home-root .bhero-copy-block p{
  position:static !important;
  inset:auto !important;
  transform:none !important;
  float:none !important;
  width:100% !important;
  max-width:none !important;
  height:auto !important;
}
@media(min-width:901px){
  .arap-soft-home-root .bhero-main{
    display:grid !important;
    grid-template-columns:minmax(0,52%) minmax(0,48%) !important;
    grid-template-rows:auto 1fr auto !important;
    align-items:center !important;
    align-content:stretch !important;
    padding:30px 42px 32px !important;
    min-height:510px !important;
  }
  .arap-soft-home-root .bhero-kicker{
    grid-column:1 / -1 !important;
    grid-row:1 !important;
    justify-self:start !important;
    align-self:start !important;
    position:relative !important;
    inset:auto !important;
    margin:0 !important;
  }
  .arap-soft-home-root .bhero-copy-block{
    grid-column:1 !important;
    grid-row:2 !important;
    align-self:center !important;
    justify-self:stretch !important;
    padding:18px 18px 12px 0 !important;
    text-align:right !important;
  }
  .arap-soft-home-root .bhero-copy-block h1{
    margin:0 !important;
    font-size:clamp(36px,3.15vw,50px) !important;
    line-height:1.55 !important;
    letter-spacing:-.7px !important;
    text-align:right !important;
  }
  .arap-soft-home-root .bhero-copy-block p{
    margin:24px 0 0 !important;
    font-size:13px !important;
    line-height:2.05 !important;
    text-align:right !important;
    color:#8b959b !important;
  }
  .arap-soft-home-root .bhero-visual{
    grid-column:2 !important;
    grid-row:2 / 4 !important;
    align-self:center !important;
    justify-self:center !important;
    position:relative !important;
    inset:auto !important;
    right:auto !important;
    left:auto !important;
    top:auto !important;
    bottom:auto !important;
    transform:none !important;
    width:min(96%,470px) !important;
    max-width:470px !important;
    margin:0 !important;
  }
  .arap-soft-home-root .bhero-actions{
    grid-column:1 !important;
    grid-row:3 !important;
    align-self:end !important;
    justify-self:start !important;
    margin:0 !important;
    position:relative !important;
    inset:auto !important;
  }
}
@media(max-width:900px){
  .arap-soft-home-root .bhero-main{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    min-height:0 !important;
    height:auto !important;
    padding:34px 20px 26px !important;
  }
  .arap-soft-home-root .bhero-kicker{
    order:1 !important;
    align-self:flex-start !important;
    position:relative !important;
    inset:auto !important;
    margin:0 0 22px !important;
  }
  .arap-soft-home-root .bhero-copy-block{
    order:2 !important;
    width:100% !important;
    padding:0 !important;
  }
  .arap-soft-home-root .bhero-copy-block h1{
    margin:0 !important;
    font-size:clamp(34px,8vw,46px) !important;
    line-height:1.48 !important;
    text-align:right !important;
  }
  .arap-soft-home-root .bhero-copy-block p{
    margin:16px 0 0 !important;
    font-size:13px !important;
    line-height:2 !important;
    text-align:right !important;
  }
  .arap-soft-home-root .bhero-visual{
    order:3 !important;
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    align-self:center !important;
    width:min(90%,430px) !important;
    max-width:430px !important;
    margin:-12px auto -4px !important;
    opacity:.46 !important;
  }
  .arap-soft-home-root .bhero-actions{
    order:4 !important;
    align-self:flex-start !important;
    margin:0 !important;
    position:relative !important;
    inset:auto !important;
  }
}


/* =========================================================
   v2.0.16 — HERO COPY NO-OVERLAP HARD LAYOUT
   Title and paragraph are forced into separate flex rows.
   ========================================================= */
@media(min-width:901px){
  .arap-soft-home-root .bhero-main{
    grid-template-columns:minmax(0,58%) minmax(0,42%) !important;
  }
  .arap-soft-home-root .bhero-copy-block{
    display:flex !important;
    flex-direction:column !important;
    align-items:stretch !important;
    justify-content:center !important;
    gap:30px !important;
    min-width:0 !important;
    padding:16px 12px 12px 0 !important;
    overflow:visible !important;
  }
  .arap-soft-home-root .bhero-copy-block h1{
    display:block !important;
    flex:0 0 auto !important;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    font-size:clamp(36px,3vw,46px) !important;
    line-height:1.34 !important;
    letter-spacing:-.7px !important;
    overflow:visible !important;
  }
  .arap-soft-home-root .bhero-copy-block p{
    display:block !important;
    flex:0 0 auto !important;
    clear:both !important;
    margin:0 !important;
    padding:0 !important;
    font-size:13px !important;
    line-height:2.05 !important;
    overflow:visible !important;
  }
  .arap-soft-home-root .bhero-visual{
    width:min(100%,445px) !important;
    max-width:445px !important;
  }
}

@media(max-width:900px){
  .arap-soft-home-root .bhero-copy-block{
    display:flex !important;
    flex-direction:column !important;
    gap:18px !important;
  }
  .arap-soft-home-root .bhero-copy-block h1,
  .arap-soft-home-root .bhero-copy-block p{
    margin:0 !important;
  }
}

/* =========================================================
   v2.0.17 — HERO DESKTOP COMPOSITION
   Physical layout is locked LTR so RTL direction cannot swap grid columns.
   Copy stays RTL; image sits to its right; CTA stays bottom-left.
   ========================================================= */
@media (min-width:901px){
  .arap-soft-home-root .bhero-main{
    direction:ltr !important;
    grid-template-columns:minmax(0,56%) minmax(0,44%) !important;
    grid-template-rows:auto 1fr auto !important;
    column-gap:18px !important;
  }
  .arap-soft-home-root .bhero-kicker{
    direction:rtl !important;
    grid-column:1 / -1 !important;
    justify-self:start !important;
  }
  .arap-soft-home-root .bhero-copy-block{
    direction:rtl !important;
    grid-column:1 !important;
    grid-row:2 !important;
    justify-self:stretch !important;
    align-self:center !important;
    padding:12px 0 12px 18px !important;
    gap:22px !important;
    text-align:right !important;
  }
  .arap-soft-home-root .bhero-copy-block h1{
    font-size:clamp(32px,2.55vw,41px) !important;
    line-height:1.42 !important;
    letter-spacing:-.55px !important;
  }
  .arap-soft-home-root .bhero-copy-block p{
    max-width:560px !important;
    font-size:12px !important;
    line-height:2 !important;
  }
  .arap-soft-home-root .bhero-visual{
    direction:rtl !important;
    grid-column:2 !important;
    grid-row:2 / 4 !important;
    width:min(118%,560px) !important;
    max-width:560px !important;
    justify-self:center !important;
    align-self:center !important;
  }
  .arap-soft-home-root .bhero-visual img{
    width:100% !important;
    max-width:none !important;
  }
  .arap-soft-home-root .bhero-actions{
    direction:rtl !important;
    grid-column:1 !important;
    grid-row:3 !important;
    justify-self:start !important;
    align-self:end !important;
  }
}

/* =========================================================
   v2.0.18 — support strip scale + category active-pill alignment
   ========================================================= */
@media (min-width:901px){
  .arap-soft-home-root .aras-value-section{padding-bottom:28px !important;}
  .arap-soft-home-root .aras-value-shell{
    border-radius:34px !important;
    padding:26px 28px 28px !important;
  }
  .arap-soft-home-root .aras-value-head{
    gap:18px !important;
    margin-bottom:18px !important;
  }
  .arap-soft-home-root .aras-value-head h2{
    font-size:clamp(22px,1.9vw,30px) !important;
    line-height:1.22 !important;
  }
  .arap-soft-home-root .aras-value-grid{gap:10px !important;}
  .arap-soft-home-root .aras-value-card{
    min-height:138px !important;
    grid-template-rows:38px 1fr !important;
    gap:10px !important;
    padding:14px 16px !important;
    border-radius:22px !important;
  }
  .arap-soft-home-root .aras-value-icon{
    width:38px !important;
    height:38px !important;
    border-radius:12px !important;
  }
  .arap-soft-home-root .aras-value-icon svg{
    width:20px !important;
    height:20px !important;
  }
  .arap-soft-home-root .aras-value-copy h3{
    min-height:0 !important;
    margin:0 0 4px !important;
    font-size:14px !important;
    line-height:1.38 !important;
  }
  .arap-soft-home-root .aras-value-copy p{
    min-height:0 !important;
    font-size:10px !important;
    line-height:1.7 !important;
  }
}

/* Category active glass: equal top/bottom inset and true text centering. */
.arap-soft-home-root .ac-switch{
  box-sizing:border-box !important;
  padding-block:4px !important;
}
.arap-soft-home-root .ac-switch__btn{
  box-sizing:border-box !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:0 !important;
  padding-top:0 !important;
  padding-bottom:0 !important;
  line-height:1 !important;
}
.arap-soft-home-root .ac-switch__indicator{
  top:4px !important;
  bottom:4px !important;
  height:auto !important;
  margin:0 !important;
  box-sizing:border-box !important;
}


/* =========================================================
   v2.0.19 — HARD FIX: compact support network + centered category glass
   ========================================================= */
@media (min-width:901px){
  .arap-soft-home-root .aras-value-shell{
    padding:20px 24px 22px !important;
    border-radius:32px !important;
  }
  .arap-soft-home-root .aras-value-head{
    margin-bottom:14px !important;
    min-height:0 !important;
  }
  .arap-soft-home-root .aras-value-head h2{
    font-size:24px !important;
    line-height:1.25 !important;
  }
  .arap-soft-home-root .aras-value-grid{
    gap:10px !important;
    align-items:stretch !important;
  }
  .arap-soft-home-root .aras-value-card{
    min-height:0 !important;
    height:150px !important;
    padding:14px 16px !important;
    border-radius:22px !important;
    display:grid !important;
    grid-template-rows:34px 1fr !important;
    gap:8px !important;
  }
  .arap-soft-home-root .aras-value-icon{
    width:34px !important;
    height:34px !important;
    border-radius:11px !important;
  }
  .arap-soft-home-root .aras-value-icon svg{width:18px !important;height:18px !important;}
  .arap-soft-home-root .aras-value-copy{align-self:end !important;}
  .arap-soft-home-root .aras-value-copy h3{
    min-height:0 !important;
    font-size:15px !important;
    line-height:1.35 !important;
    margin:0 0 3px !important;
  }
  .arap-soft-home-root .aras-value-copy p{
    min-height:0 !important;
    font-size:10px !important;
    line-height:1.65 !important;
  }
}

/* active category material must sit exactly centered vertically */
.arap-soft-home-root .ac-switch{
  position:relative !important;
  padding-top:5px !important;
  padding-bottom:5px !important;
}
.arap-soft-home-root .ac-switch__indicator{
  top:5px !important;
  bottom:5px !important;
  height:auto !important;
  min-height:0 !important;
}
.arap-soft-home-root .ac-switch__btn{
  min-height:0 !important;
  height:100% !important;
  padding-block:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  line-height:1.2 !important;
}

/* v2.0.26 — user-selected support network icons */
.aras-value-icon img{
  width:25px;
  height:25px;
  object-fit:contain;
  display:block;
}
@media (max-width:780px){
  .arap-soft-home-root .aras-value-icon img{
    width:20px !important;
    height:20px !important;
  }
}

/* v2.0.28 — Journey metric cards: balanced square proportions */
@media (min-width:1001px){
  .arap-soft-home-root .journey-metrics{
    align-items:stretch !important;
  }
  .arap-soft-home-root .journey-metric{
    aspect-ratio:1 / 1 !important;
    min-height:0 !important;
    height:auto !important;
    padding:14px 15px !important;
    border-radius:20px !important;
    justify-content:space-between !important;
    gap:10px !important;
  }
  .arap-soft-home-root .journey-metric-value{
    min-height:42px !important;
  }
}

/* =========================================================
   v2.0.29 — Mobile journey uses timeline as selector
   Desktop journey is intentionally untouched.
   ========================================================= */
@media (max-width:768px){
  .arap-soft-home-root #journey .journey-main{
    grid-template-columns:1fr !important;
  }
  .arap-soft-home-root #journey .journey-nav{
    display:none !important;
  }
  .arap-soft-home-root #journey .journey-stage{
    width:100% !important;
    min-width:0 !important;
  }
  .arap-soft-home-root #journey .journey-stage-footer{
    display:block !important;
  }
  .arap-soft-home-root #journey .journey-stage-footer>span{
    margin-bottom:14px !important;
  }
  .arap-soft-home-root #journey .journey-bars{
    min-height:58px !important;
    width:100% !important;
    touch-action:manipulation;
  }
  .arap-soft-home-root #journey .journey-bars .journey-node{
    min-height:54px !important;
    cursor:pointer !important;
    outline:0 !important;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
  }
  .arap-soft-home-root #journey .journey-bars .journey-node i{
    width:14px !important;
    height:14px !important;
    transition:transform .2s ease,background-color .2s ease,box-shadow .2s ease !important;
  }
  .arap-soft-home-root #journey .journey-bars .journey-node span{
    font-size:9px !important;
    transition:color .2s ease,font-weight .2s ease !important;
  }
  .arap-soft-home-root #journey .journey-bars .journey-node:active i,
  .arap-soft-home-root #journey .journey-bars .journey-node:focus-visible i{
    transform:scale(1.12) !important;
  }
}

@media (max-width:768px) and (hover:hover) and (pointer:fine){
  .arap-soft-home-root #journey .journey-bars .journey-node:hover i{
    background:var(--red) !important;
    box-shadow:0 0 0 5px var(--red-faint) !important;
    transform:scale(1.08) !important;
  }
  .arap-soft-home-root #journey .journey-bars .journey-node:hover span{
    color:var(--red) !important;
    font-weight:700 !important;
  }
}

/* =========================================================
   v2.0.30 — Mobile density pass
   Compact support network + remove excess category whitespace.
   Desktop geometry is intentionally untouched.
   ========================================================= */
@media (max-width:640px){
  /* Support network: keep the same visual language, use much less vertical space. */
  .arap-soft-home-root .aras-value-section{
    padding-top:0 !important;
    padding-bottom:18px !important;
  }
  .arap-soft-home-root .aras-value-shell{
    padding:16px 14px 16px !important;
    border-radius:28px !important;
  }
  .arap-soft-home-root .aras-value-head{
    gap:5px !important;
    margin-bottom:12px !important;
  }
  .arap-soft-home-root .aras-value-head h2{
    font-size:24px !important;
    line-height:1.24 !important;
    letter-spacing:-.35px !important;
  }
  .arap-soft-home-root .aras-value-kicker{
    font-size:8px !important;
  }
  .arap-soft-home-root .aras-value-grid{
    gap:8px !important;
  }
  .arap-soft-home-root .aras-value-card{
    min-height:112px !important;
    height:auto !important;
    padding:12px !important;
    gap:12px !important;
    border-radius:19px !important;
    display:grid !important;
    grid-template-columns:42px minmax(0,1fr) !important;
    grid-template-rows:1fr !important;
    align-items:center !important;
  }
  .arap-soft-home-root .aras-value-icon{
    width:42px !important;
    height:42px !important;
    flex:0 0 42px !important;
    border-radius:13px !important;
    align-self:center !important;
  }
  .arap-soft-home-root .aras-value-icon svg{
    width:21px !important;
    height:21px !important;
  }
  .arap-soft-home-root .aras-value-icon img{
    width:21px !important;
    height:21px !important;
  }
  .arap-soft-home-root .aras-value-copy{
    align-self:center !important;
  }
  .arap-soft-home-root .aras-value-copy h3{
    font-size:18px !important;
    line-height:1.35 !important;
    margin:0 0 4px !important;
  }
  .arap-soft-home-root .aras-value-copy p{
    font-size:10px !important;
    line-height:1.65 !important;
    margin:0 !important;
  }

  /* Categories: collapse the oversized text area and bring image/content together. */
  .arap-soft-home-root .categories{
    padding-top:34px !important;
  }
  .arap-soft-home-root .cat-controls{
    margin-bottom:12px !important;
    gap:10px !important;
  }
  .arap-soft-home-root .cat-viewport,
  .arap-soft-home-root .cat-track,
  .arap-soft-home-root .cat-slide,
  .arap-soft-home-root .cat-panel{
    min-height:0 !important;
  }
  .arap-soft-home-root .cat-panel{
    height:auto !important;
    max-height:none !important;
    grid-template-columns:1fr !important;
    align-content:start !important;
  }
  .arap-soft-home-root .cat-copy{
    height:auto !important;
    min-height:0 !important;
    padding:24px 20px 16px !important;
    justify-content:flex-start !important;
  }
  .arap-soft-home-root .cat-copy .kicker{
    margin-bottom:10px !important;
  }
  .arap-soft-home-root .cat-copy h3{
    margin:0 0 10px !important;
    font-size:28px !important;
    line-height:1.45 !important;
  }
  .arap-soft-home-root .cat-copy p{
    font-size:12px !important;
    line-height:1.85 !important;
  }
  .arap-soft-home-root .cat-points{
    gap:6px !important;
    margin:14px 0 !important;
  }
  .arap-soft-home-root .cat-points span{
    height:30px !important;
    padding-inline:10px !important;
    font-size:9.5px !important;
  }
  .arap-soft-home-root .cat-copy .btn{
    min-height:44px !important;
    margin-top:0 !important;
  }
  .arap-soft-home-root .cat-image{
    height:260px !important;
    min-height:0 !important;
    margin:8px 12px 12px !important;
    border-radius:24px !important;
  }
  .arap-soft-home-root .cat-image img{
    width:78% !important;
    height:78% !important;
    max-width:78% !important;
    max-height:78% !important;
  }
}


/* v2.0.31 — custom hero side-card icons */
.arap-soft-home-root .bhero-w-icon .bhero-custom-icon{width:18px!important;height:18px!important;object-fit:contain!important;display:block!important;}

/* =========================================================
   v2.0.32 — HERO COMPONENT LAYOUT MODE
   Admin can switch each slide between the original 3-card bento
   and one full-width main image/text card. Original mode unchanged.
   ========================================================= */
.arap-soft-home-root .bhero.is-single-component .bhero-grid{
  grid-template-columns:1fr !important;
}
.arap-soft-home-root .bhero.is-single-component .bhero-main{
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  min-width:0 !important;
}
.arap-soft-home-root .bhero.is-single-component .bhero-side{
  display:none !important;
}

@media(max-width:900px){
  .arap-soft-home-root .bhero.is-single-component .bhero-grid{
    display:grid !important;
    grid-template-columns:1fr !important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-main{
    grid-column:1 !important;
    width:100% !important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-side{
    display:none !important;
  }
}

/* =========================================================
   v3.0.4 — ONE SHARED ARAS PALE RED-GLASS MATERIAL
   ========================================================= */
.arap-soft-home-root{
  --aras-red-glass-bg:linear-gradient(180deg,rgba(255,255,255,.72),rgba(225,27,37,.055));
  --aras-red-glass-border:rgba(225,27,37,.16);
  --aras-red-glass-shadow:inset 0 1px 0 rgba(255,255,255,.92),0 6px 18px rgba(140,12,20,.045);
}

.arap-soft-home-root .score,
.arap-soft-home-root .journey-label,
.arap-soft-home-root button.journey-step.active,
.arap-soft-home-root button.journey-step.active:hover,
.arap-soft-home-root button.journey-step.active:focus,
.arap-soft-home-root .bhero-kicker,
.arap-soft-home-root .cat-copy .kicker,
.arap-soft-home-root .after-copy .kicker,
.arap-soft-home-root .after .service-card{
  color:#d71923 !important;
  background:var(--aras-red-glass-bg) !important;
  border-color:var(--aras-red-glass-border) !important;
  box-shadow:var(--aras-red-glass-shadow) !important;
  -webkit-backdrop-filter:blur(14px) saturate(120%);
  backdrop-filter:blur(14px) saturate(120%);
}

/* The large section remains the approved light-gray material. */
.arap-soft-home-root .after .after-shell{
  background:linear-gradient(145deg,#f5f5f3,#ececea) !important;
  color:#1c2226 !important;
  border-color:rgba(28,34,38,.075) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.96),0 18px 44px rgba(18,22,25,.07) !important;
}
.arap-soft-home-root .after .after-copy,
.arap-soft-home-root .after .after-copy h2,
.arap-soft-home-root .after .after-copy h3,
.arap-soft-home-root .after .after-copy strong,
.arap-soft-home-root .after .after-stat strong{
  color:#1c2226 !important;
}
.arap-soft-home-root .after .after-copy p{
  color:rgba(28,34,38,.62) !important;
}
.arap-soft-home-root .after .after-stat{
  border-top-color:rgba(28,34,38,.09) !important;
}
.arap-soft-home-root .after .after-stat span{
  color:rgba(28,34,38,.48) !important;
}
.arap-soft-home-root .after .service-list div{
  color:rgba(28,34,38,.72) !important;
  border-bottom-color:rgba(225,27,37,.105) !important;
}
.arap-soft-home-root .after .service-list b,
.arap-soft-home-root .after .service-card small{
  color:#d71923 !important;
}

/* CTA is intentionally the original solid red, not a pale glass chip. */
.arap-soft-home-root .after .service-card .btn,
.arap-soft-home-root .after .service-card .btn:visited{
  color:#fff !important;
  background:#e11b25 !important;
  border-color:rgba(151,7,17,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -1px 0 rgba(124,8,16,.10),0 8px 20px rgba(151,7,17,.16) !important;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
}
.arap-soft-home-root .after .service-card .btn:hover,
.arap-soft-home-root .after .service-card .btn:focus{
  color:#fff !important;
  background:#d71923 !important;
}

/* v3.0.5 — single Hero changes width only; desktop height matches 3-card mode. */
@media(min-width:901px){
  .arap-soft-home-root .bhero.is-single-component .bhero-grid{
    height:598px !important;
    min-height:598px !important;
    max-height:598px !important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-main{
    height:598px !important;
    min-height:598px !important;
    max-height:598px !important;
    box-sizing:border-box !important;
  }
}

/* v3.0.6 final cascade overrides. */
.arap-soft-home-root .cat-copy .kicker{
  width:max-content !important;
  min-height:0 !important;
  padding:0 !important;
  color:#d71923 !important;
  background:transparent !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.arap-soft-home-root .after .service-card::before,
.arap-soft-home-root .after .service-card::after{
  content:none !important;
  display:none !important;
  border:0 !important;
  box-shadow:none !important;
}

/* v3.0.7 — keep the Hero image transparent until the saved image is ready. */
.arap-soft-home-root .bhero-visual img.arap-hero-image-loading{
  opacity:0 !important;
  display:none !important;
}
.arap-soft-home-root .bhero-visual img.arap-hero-image-ready{
  opacity:1 !important;
  display:block !important;
  transition:opacity .22s ease !important;
}

/* v3.0.10 — stable Journey hover without layout movement or jitter. */
.arap-soft-home-root button.journey-step,
.arap-soft-home-root button.journey-step:hover,
.arap-soft-home-root button.journey-step:focus,
.arap-soft-home-root button.journey-step:active,
.arap-soft-home-root button.journey-step.active{
  box-sizing:border-box !important;
  height:66px !important;
  min-height:66px !important;
  max-height:66px !important;
  margin:0 !important;
  transform:none !important;
  translate:none !important;
  scale:none !important;
  transition:color .28s ease,background-color .34s ease,border-color .34s ease,box-shadow .34s ease !important;
}
.arap-soft-home-root .journey-step-year,
.arap-soft-home-root .journey-step-copy{
  transform:none !important;
  transition:color .28s ease,opacity .28s ease !important;
}

/* v3.0.11 — lightweight Journey feedback; undo the rigid v3.0.10 sizing. */
.arap-soft-home-root button.journey-step,
.arap-soft-home-root button.journey-step:hover,
.arap-soft-home-root button.journey-step:focus,
.arap-soft-home-root button.journey-step:active,
.arap-soft-home-root button.journey-step.active{
  height:auto !important;
  min-height:66px !important;
  max-height:none !important;
  transform:none !important;
  translate:none !important;
  scale:none !important;
  transition:color .2s ease,background-color .2s ease,border-color .2s ease !important;
}
.arap-soft-home-root button.journey-step.active,
.arap-soft-home-root button.journey-step.active:hover,
.arap-soft-home-root button.journey-step.active:focus{
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.72) !important;
}

/* v3.0.13 — crisp, constant-width Journey progress with a soft point-to-point reveal. */
.arap-soft-home-root .journey-bars::before,
.arap-soft-home-root .journey-bars::after{
  top:7px !important;
  height:2px !important;
  min-height:2px !important;
  max-height:2px !important;
  transform:none !important;
}
.arap-soft-home-root .journey-bars::after{
  clip-path:inset(0 0 0 var(--journey-progress-clip,100%)) !important;
  transition:clip-path .68s cubic-bezier(.22,.8,.24,1) !important;
  will-change:clip-path;
}
.arap-soft-home-root .journey-bars .journey-node span{
  direction:ltr !important;
  unicode-bidi:isolate !important;
  font-variant-numeric:tabular-nums;
}

/* v3.0.16 — unified, low-jank motion language across the homepage. */
.arap-soft-home-root{
  --arap-motion-ease:cubic-bezier(.22,.8,.24,1);
  --arap-motion-fast:.28s;
  --arap-motion-normal:.52s;
  --arap-motion-slow:.86s;
}
.arap-soft-home-root [data-scroll-motion],
.arap-soft-home-root .product-grid .pcard,
.arap-soft-home-root .cat-track,
.arap-soft-home-root .bhero-visual img{
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}
.motion-ready .arap-soft-home-root [data-reveal]{
  transition-property:opacity,transform !important;
  transition-duration:var(--arap-motion-slow),var(--arap-motion-slow) !important;
  transition-timing-function:var(--arap-motion-ease),var(--arap-motion-ease) !important;
  filter:none !important;
}
.motion-ready .arap-soft-home-root [data-reveal].is-visible{
  will-change:auto;
}
.arap-soft-home-root .pcard,
.arap-soft-home-root .aras-value-card,
.arap-soft-home-root .cat-panel,
.arap-soft-home-root .journey-stage,
.arap-soft-home-root .journey-nav,
.arap-soft-home-root .journey-today,
.arap-soft-home-root .after-shell,
.arap-soft-home-root .service-card{
  transition-property:border-color,background-color,box-shadow,opacity !important;
  transition-duration:var(--arap-motion-normal) !important;
  transition-timing-function:var(--arap-motion-ease) !important;
}
.arap-soft-home-root .aras-value-card,
.arap-soft-home-root .cat-panel,
.arap-soft-home-root .journey-stage,
.arap-soft-home-root .journey-nav,
.arap-soft-home-root .journey-today,
.arap-soft-home-root .after-shell,
.arap-soft-home-root .service-card{
  transition-property:transform,border-color,background-color,box-shadow,opacity !important;
}
.arap-soft-home-root button,
.arap-soft-home-root a,
.arap-soft-home-root .cat-arrow,
.arap-soft-home-root .ac-nav__btn{
  transition-timing-function:var(--arap-motion-ease) !important;
}
.arap-soft-home-root .cat-track{
  transition-duration:var(--arap-motion-slow) !important;
  transition-timing-function:var(--arap-motion-ease) !important;
}
@media(prefers-reduced-motion:reduce){
  .arap-soft-home-root *,
  .arap-soft-home-root *::before,
  .arap-soft-home-root *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* v3.0.21 final cascade — identical mobile footprint for 1/3 components. */
@media(max-width:900px){
  .arap-soft-home-root .bhero-grid,
  .arap-soft-home-root .bhero.is-single-component .bhero-grid{
    grid-template-columns:1fr !important;
    grid-template-rows:1fr !important;
  }
  .arap-soft-home-root .bhero-main{
    grid-column:1 !important;
    grid-row:1 !important;
    height:clamp(570px,145vw,680px) !important;
    min-height:clamp(570px,145vw,680px) !important;
    max-height:clamp(570px,145vw,680px) !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-main{
    grid-column:1 !important;
    grid-row:1 !important;
    height:clamp(570px,145vw,680px) !important;
    min-height:clamp(570px,145vw,680px) !important;
    max-height:clamp(570px,145vw,680px) !important;
  }
  .arap-soft-home-root .bhero-side,
  .arap-soft-home-root .bhero.is-single-component .bhero-side{
    display:none !important;
  }
}

/* v3.0.23 final cascade — full-opacity image, anchored CTA, compact side cards. */
@media(max-width:900px){
  .arap-soft-home-root .bhero-grid,
  .arap-soft-home-root .bhero.is-single-component .bhero-grid{position:relative!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:1fr!important}
  .arap-soft-home-root .bhero-main,
  .arap-soft-home-root .bhero.is-single-component .bhero-main{position:relative!important;display:block!important;height:clamp(620px,158vw,680px)!important;min-height:clamp(620px,158vw,680px)!important;max-height:clamp(620px,158vw,680px)!important;padding:30px 18px 78px!important;overflow:hidden!important}
  .arap-soft-home-root .bhero-kicker{position:relative!important;inset:auto!important;margin:0 0 20px!important}
  .arap-soft-home-root .bhero-copy-block{position:relative!important;z-index:6!important;gap:12px!important}
  .arap-soft-home-root .bhero-copy-block h1{font-size:clamp(29px,8.1vw,38px)!important;line-height:1.34!important}
  .arap-soft-home-root .bhero-copy-block p{font-size:12px!important;line-height:1.82!important}
  .arap-soft-home-root .bhero-visual{position:absolute!important;inset:auto auto 64px 50%!important;transform:translateX(-50%)!important;width:min(68%,300px)!important;max-width:300px!important;margin:0!important;opacity:1!important;z-index:3!important}
  .arap-soft-home-root .bhero-visual img,
  .arap-soft-home-root .bhero-visual img.arap-hero-image-ready{opacity:1!important;filter:drop-shadow(0 14px 16px rgba(18,22,25,.07))!important}
  .arap-soft-home-root .bhero-actions{position:absolute!important;inset:auto auto 18px 18px!important;margin:0!important;z-index:12!important}
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-main{padding-bottom:164px!important}
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-visual{bottom:146px!important;width:min(57%,250px)!important}
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-actions{bottom:102px!important}
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-side{position:absolute!important;inset:auto 14px 14px 14px!important;z-index:10!important;display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:76px!important;gap:9px!important;visibility:visible!important;pointer-events:auto!important}
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-sq{width:auto!important;height:76px!important;min-height:76px!important;aspect-ratio:auto!important;padding:10px 12px!important;border-radius:20px!important;display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:flex-start!important;gap:9px!important}
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-w-icon{width:30px!important;height:30px!important;flex:0 0 30px!important}
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-sq h4{margin:0!important;font-size:11px!important;line-height:1.5!important}
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-sq .sub,
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-w-chip,
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-support-cta{display:none!important}
  .arap-soft-home-root .bhero.is-single-component .bhero-side{display:none!important}
  .arap-soft-home-root .bhero.has-long-copy .bhero-visual{width:min(48%,190px)!important;max-width:190px!important}
  .arap-soft-home-root .bhero.has-long-copy:not(.is-single-component) .bhero-visual{bottom:142px!important;width:min(43%,170px)!important;max-width:170px!important}
}

/* v3.0.24 final mobile tuning — compact copy, large product, no transform jank. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero.has-long-copy .bhero-copy-block h1{
    font-size:clamp(26px,7.2vw,32px)!important;
    line-height:1.3!important;
    text-align:right!important;
  }
  .arap-soft-home-root .bhero.has-long-copy .bhero-copy-block p{
    display:-webkit-box!important;
    -webkit-box-orient:vertical!important;
    -webkit-line-clamp:5!important;
    overflow:hidden!important;
    font-size:10.5px!important;
    line-height:1.72!important;
    text-align:right!important;
  }
  .arap-soft-home-root .bhero.has-long-copy .bhero-visual{
    bottom:66px!important;
    width:min(64%,280px)!important;
    max-width:280px!important;
  }
  .arap-soft-home-root .bhero.has-long-copy:not(.is-single-component) .bhero-visual{
    bottom:140px!important;
    width:min(56%,245px)!important;
    max-width:245px!important;
  }
  .arap-soft-home-root .bhero.is-changing .bhero-main h1,
  .arap-soft-home-root .bhero.is-changing .bhero-main p,
  .arap-soft-home-root .bhero.is-changing .bhero-kicker,
  .arap-soft-home-root .bhero.is-changing .bhero-visual img{
    transform:none!important;
  }
  .arap-soft-home-root .bhero.is-entering .bhero-main h1,
  .arap-soft-home-root .bhero.is-entering .bhero-main p,
  .arap-soft-home-root .bhero.is-entering .bhero-kicker,
  .arap-soft-home-root .bhero.is-entering .bhero-visual img{
    animation:arapHeroMobileFade .32s ease both!important;
  }
}
@keyframes arapHeroMobileFade{from{opacity:0}to{opacity:1}}

/* v3.0.25 — larger, copy-aware mobile Hero imagery. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero-visual,
  .arap-soft-home-root .bhero.has-long-copy .bhero-visual{
    top:clamp(260px,70vw,300px)!important;
    right:auto!important;
    bottom:auto!important;
    left:50%!important;
    width:min(78%,340px)!important;
    max-width:340px!important;
    transform:translateX(-50%)!important;
  }
  .arap-soft-home-root .bhero.has-long-copy .bhero-visual{
    top:clamp(285px,76vw,325px)!important;
    width:min(74%,320px)!important;
    max-width:320px!important;
  }
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-visual,
  .arap-soft-home-root .bhero.has-long-copy:not(.is-single-component) .bhero-visual{
    top:clamp(270px,72vw,310px)!important;
    bottom:auto!important;
    width:min(70%,305px)!important;
    max-width:305px!important;
  }
  .arap-soft-home-root .bhero.has-long-copy:not(.is-single-component) .bhero-visual{
    top:clamp(290px,77vw,325px)!important;
    width:min(68%,295px)!important;
    max-width:295px!important;
  }
}

/* v3.0.27 final cascade — no display reflow for mobile side cards. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero .bhero-side,
  .arap-soft-home-root .bhero.is-single-component .bhero-side,
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-side{position:absolute!important;inset:auto 14px 14px 14px!important;z-index:10!important;display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:76px!important;gap:9px!important;opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0)!important;pointer-events:auto!important;will-change:opacity,transform;transition:opacity .34s cubic-bezier(.22,.8,.24,1),transform .42s cubic-bezier(.22,.8,.24,1),visibility 0s linear 0s!important}
  .arap-soft-home-root .bhero.is-changing .bhero-side{opacity:0!important;transform:translate3d(0,7px,0)!important;pointer-events:none!important}
  .arap-soft-home-root .bhero.is-single-component .bhero-side{opacity:0!important;visibility:hidden!important;transform:translate3d(0,7px,0)!important;pointer-events:none!important;transition:opacity .28s cubic-bezier(.22,.8,.24,1),transform .36s cubic-bezier(.22,.8,.24,1),visibility 0s linear .36s!important}
  .arap-soft-home-root .bhero.is-entering:not(.is-single-component) .bhero-side{animation:arapHeroSideCardsIn .44s cubic-bezier(.16,1,.3,1) both!important}
}

/* v3.0.28 — one reveal only; prevent the second enter animation flash. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero.is-entering .bhero-side,
  .arap-soft-home-root .bhero.is-entering:not(.is-single-component) .bhero-side{
    animation:none!important;
  }
}

/* v3.0.29 final cascade — never hide cards during a 3-to-3 slide change. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-side,
  .arap-soft-home-root .bhero.is-changing:not(.is-single-component) .bhero-side,
  .arap-soft-home-root .bhero.is-entering:not(.is-single-component) .bhero-side{display:grid!important;opacity:1!important;visibility:visible!important;transform:translate3d(0,0,0)!important;animation:none!important;pointer-events:auto!important}
  .arap-soft-home-root .bhero.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-changing.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-entering.is-single-component .bhero-side{display:grid!important;opacity:0!important;visibility:hidden!important;transform:translate3d(0,6px,0)!important;animation:none!important;pointer-events:none!important}
}

/* v3.0.30 final cascade — fixed compact layer with opacity-only state. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero .bhero-side,
  .arap-soft-home-root .bhero.is-changing .bhero-side,
  .arap-soft-home-root .bhero.is-entering .bhero-side,
  .arap-soft-home-root .bhero.is-single-component .bhero-side,
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-side{position:absolute!important;inset:auto 14px 14px 14px!important;z-index:10!important;display:grid!important;grid-template-columns:1fr 1fr!important;grid-template-rows:76px!important;gap:9px!important;width:auto!important;height:76px!important;opacity:1!important;visibility:visible!important;transform:none!important;animation:none!important;pointer-events:auto!important;will-change:auto!important;transition:opacity .22s ease!important}
  .arap-soft-home-root .bhero .bhero-side .bhero-sq{width:auto!important;height:76px!important;min-height:76px!important;max-height:76px!important;aspect-ratio:auto!important;transform:none!important;animation:none!important}
  .arap-soft-home-root .bhero.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-changing.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-entering.is-single-component .bhero-side{opacity:0!important;visibility:visible!important;transform:none!important;pointer-events:none!important}
}

/* v3.0.31 — no translucent outgoing frame on card-to-cardless changes. */
@media(max-width:760px), (pointer:coarse){
  .arap-soft-home-root .bhero .bhero-side{
    isolation:isolate!important;
    backface-visibility:hidden!important;
    -webkit-backface-visibility:hidden!important;
  }
  .arap-soft-home-root .bhero.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-changing.is-single-component .bhero-side,
  .arap-soft-home-root .bhero.is-entering.is-single-component .bhero-side{
    opacity:0!important;
    transition:none!important;
  }
  .arap-soft-home-root .bhero:not(.is-single-component) .bhero-side{
    transition:opacity .22s cubic-bezier(.22,.8,.24,1)!important;
  }
}

/* v3.0.37 — approved navy glass for the After Sales service component. */
.arap-soft-home-root .after .service-card{
  color:#fff !important;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,255,255,.115),transparent 42%),
    linear-gradient(145deg,rgba(43,73,88,.985),rgba(29,54,67,.985)) !important;
  border-color:rgba(255,255,255,.13) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 14px 34px rgba(18,39,50,.12) !important;
  -webkit-backdrop-filter:blur(18px) saturate(118%) !important;
  backdrop-filter:blur(18px) saturate(118%) !important;
}

.arap-soft-home-root .after .service-list div{
  color:rgba(255,255,255,.74) !important;
  border-bottom-color:rgba(255,255,255,.095) !important;
}

.arap-soft-home-root .after .service-list b{
  color:#fff !important;
}

.arap-soft-home-root .after .service-card small{
  color:#ff727a !important;
}

/* Persian glyphs sit optically high; the top inset keeps this pill centered. */
.arap-soft-home-root .after .after-copy .kicker{
  box-sizing:border-box !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:44px !important;
  min-height:44px !important;
  padding:3px 18px 0 !important;
  line-height:1 !important;
  vertical-align:middle !important;
}