/* ============================================================
   Auto Performance Widgets
============================================================ */

/* === SERVICES WIDGET === */
.apw-services {
   padding: 5rem 5%;
   position: relative;
   overflow: hidden;
   background-size: cover;
   background-position: center;
   background-attachment: fixed
}

.apw-services * {
   box-sizing: border-box
}

.apw-services .apw-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 0;
   pointer-events: none
}

.apw-services .apw-glow, .apw-about .apw-glow {
   position: absolute;
   width: 500px;
   height: 500px;
   border-radius: 50%;
   z-index: 0;
   filter: blur(80px);
   opacity: .4;
   pointer-events: none
}

.apw-services .apw-glow-1, .apw-about .apw-glow-1 {
   top: -200px;
   left: -200px
}

.apw-services .apw-glow-2, .apw-about .apw-glow-2 {
   bottom: -100px;
   right: -200px
}

.apw-services .apw-pattern, .apw-about .apw-pattern {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-image: linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
   background-size: 50px 50px;
   opacity: .5;
   z-index: 0;
   pointer-events: none
}

.apw-services .apw-inner {
   max-width: 1400px;
   margin: 0 auto;
   position: relative;
   z-index: 2
}

.apw-services .apw-sh {
   text-align: center;
   max-width: 600px;
   margin: 0 auto 4rem auto
}

.apw-services .apw-sub {
   text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 2px;
   font-size: .9rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 1rem
}

.apw-services .apw-sub::before,
.apw-services .apw-sub::after {
   content: '';
   height: 1px;
   width: 40px
}

.apw-services .apw-stitle {
   font-size: 3rem;
   font-weight: 900;
   text-transform: uppercase;
   margin-bottom: 1.5rem;
   line-height: 1.1
}

.apw-services .apw-sdesc {
   font-size: 1.1rem;
   line-height: 1.6;
   opacity: .7
}

.apw-services .apw-grid {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
   gap: 2rem
}

.apw-services .apw-scard {
   background: var(--apw-card-bg, rgba(20, 20, 25, 0.6));
   border: 1px solid var(--apw-card-border, rgba(255, 255, 255, 0.08));
   border-radius: 20px;
   padding: 2.2rem;
   transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
   position: relative;
   overflow: hidden;
   backdrop-filter: blur(12px);
   -webkit-backdrop-filter: blur(12px);
}

.apw-services .apw-scard::before {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 0;
   height: 3px;
   background: var(--apw-accent, #d32f2f);
   transition: width 0.4s ease;
   z-index: 10;
}

.apw-services .apw-scard:hover::before {
   width: 100%;
}

.apw-services .apw-scard:hover {
   transform: translateY(-10px);
   background: var(--apw-card-bg-hover, rgba(30, 30, 35, 0.7));
   border-color: var(--apw-accent, #d32f2f);
   box-shadow: 0 15px 45px rgba(0,0,0,0.4), 0 0 20px var(--apw-accent-glow, rgba(211, 47, 47, 0.2));
}

.apw-services .apw-scard-link-overlay {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: 5;
}

.apw-services .apw-scard-top {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 1.5rem;
   position: relative;
   z-index: 2;
}

.apw-services .apw-sname {
   font-size: 1.6rem;
   font-weight: 800;
   line-height: 1.2;
   margin: 0;
   color: var(--apw-text-main, #fff);
}

.apw-services .apw-sicon {
   width: 50px;
   height: 50px;
   border-radius: 12px;
   display: flex;
   align-items: center;
   justify-content: center;
   flex-shrink: 0;
   color: #fff;
   transition: transform 0.4s ease, background 0.4s ease;
   position: relative;
   z-index: 2;
}

.apw-services .apw-scard:hover .apw-sicon {
   transform: rotate(10deg) scale(1.1);
}

.apw-services .apw-sicon svg {
   width: 26px;
   height: 26px;
   stroke-width: 2;
}

.apw-services .apw-sdiv {
   width: 100%;
   height: 1px;
   background: rgba(255, 255, 255, 0.15);
   margin: 0.5rem 0;
   position: relative;
   z-index: 2;
}

.apw-services .apw-stext {
   font-size: 0.95rem;
   line-height: 1.6;
   margin: 0;
   opacity: 0.8;
   color: var(--apw-text-muted, #a0a0a0);
   position: relative;
   z-index: 2;
}

.apw-services .apw-simg-wrap {
   width: 100%;
   height: 180px;
   border-radius: 12px;
   overflow: hidden;
   margin-top: 0.5rem;
   border: 1px solid var(--apw-card-border, rgba(255, 255, 255, 0.08));
   position: relative;
   z-index: 2;
}

.apw-services .apw-simg-wrap img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   transition: transform 0.6s ease;
}

.apw-services .apw-scard:hover .apw-simg-wrap img {
   transform: scale(1.1);
}

.apw-services .apw-sbtn-wrap {
   margin-top: auto;
   width: 100%;
   position: relative;
   z-index: 2;
}

.apw-services .apw-sbtn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 0.8rem;
   width: 100%;
   padding: 0.9rem 1.5rem;
   background: transparent;
   color: var(--apw-text-main, #fff);
   border: 1px solid var(--apw-card-border, rgba(255, 255, 255, 0.08));
   border-radius: 8px;
   font-weight: 600;
   font-size: 0.85rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all 0.3s ease;
}

.apw-services .apw-sbtn svg {
   width: 16px;
   height: 16px;
   transition: transform 0.3s ease;
}

.apw-services .apw-scard:hover .apw-sbtn svg {
   transform: translateX(5px);
}

@media(max-width:992px) {
   .apw-services {
      padding: 4rem 5%
   }

   .apw-services .apw-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 1.5rem
   }

   .apw-services .apw-sh {
      margin-bottom: 3rem
   }

   .apw-services .apw-stitle {
      font-size: 2.5rem
   }
}

@media(max-width:768px) {
   .apw-services .apw-grid {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 1rem;
      padding-bottom: 1.5rem
   }

   .apw-services .apw-grid::-webkit-scrollbar {
      height: 4px
   }

   .apw-services .apw-grid::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 2px
   }

   .apw-services .apw-grid::-webkit-scrollbar-thumb {
      background: #e3000f;
      border-radius: 2px
   }

   .apw-services .apw-scard {
      min-width: 85vw;
      flex-shrink: 0;
      scroll-snap-align: start;
      padding: 1.8rem;
   }

   .apw-services .apw-stitle {
      font-size: 2.2rem
   }
}

/* === ABOUT WIDGET === */
.apw-about {
   padding: 5rem 5%;
   position: relative;
   overflow: hidden
}

.apw-about * {
   box-sizing: border-box
}

.apw-about .apw-inner {
   max-width: 1400px;
   margin: 0 auto;
   position: relative;
   z-index: 2
}

.apw-about .apw-layout {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 5rem;
   align-items: center;
   margin-bottom: 5rem
}

.apw-about .apw-visual {
   position: relative
}

.apw-about .apw-imgwrap {
   position: relative;
   border-radius: 20px;
   overflow: hidden
}

.apw-about .apw-imgwrap img {
   width: 100%;
   height: 500px;
   object-fit: cover;
   display: block;
   transition: transform .6s ease
}

.apw-about .apw-imgwrap:hover img {
   transform: scale(1.05)
}

.apw-about .apw-imgov {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: linear-gradient(180deg, transparent 40%, rgba(0, 0, 0, .6) 100%);
   pointer-events: none
}

.apw-about .apw-badge {
   position: absolute;
   bottom: -25px;
   right: 30px;
   color: #fff;
   padding: 1.5rem 2rem;
   border-radius: 16px;
   display: flex;
   align-items: center;
   gap: 1rem;
   z-index: 3;
   border: 2px solid rgba(255, 255, 255, .15)
}

.apw-about .apw-badge-num {
   font-size: 2.5rem;
   font-weight: 900;
   line-height: 1
}

.apw-about .apw-badge-txt {
   font-size: .8rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 1px;
   line-height: 1.3;
   opacity: .9
}

.apw-about .apw-stripe {
   position: absolute;
   top: -15px;
   left: -15px;
   width: 100%;
   height: 100%;
   border-radius: 20px;
   z-index: -1;
   opacity: .3
}

.apw-about .apw-content {
   display: flex;
   flex-direction: column;
   gap: 1.5rem
}

.apw-about .apw-tag {
   display: flex;
   align-items: center;
   gap: 1rem
}

.apw-about .apw-tag-line {
   width: 40px;
   height: 2px
}

.apw-about .apw-tag span {
   font-weight: 700;
   font-size: .9rem;
   text-transform: uppercase;
   letter-spacing: 2px
}

.apw-about .apw-heading {
   font-size: 2.5rem;
   font-weight: 900;
   line-height: 1.15
}

.apw-about .apw-txt {
   line-height: 1.7;
   font-size: 1rem;
   opacity: .7
}

.apw-about .apw-bento {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 1rem;
   margin-top: .5rem
}

.apw-about .apw-bc {
   display: flex;
   align-items: flex-start;
   gap: 1rem;
   padding: 1.2rem;
   border-radius: 14px;
   transition: transform .3s ease, border-color .3s ease
}

.apw-about .apw-bc:hover {
   transform: translateY(-4px)
}

.apw-about .apw-bicon {
   width: 42px;
   height: 42px;
   min-width: 42px;
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   transition: transform .3s ease
}

.apw-about .apw-bc:hover .apw-bicon {
   transform: scale(1.1) rotate(5deg)
}

.apw-about .apw-bicon svg {
   width: 22px;
   height: 22px
}

.apw-about .apw-binfo {
   display: flex;
   flex-direction: column;
   gap: .15rem
}

.apw-about .apw-btitle {
   font-weight: 700;
   font-size: .95rem
}

.apw-about .apw-bdesc {
   font-size: .8rem;
   opacity: .6;
   line-height: 1.4
}

.apw-about .apw-cta {
   display: flex;
   gap: 1.2rem;
   margin-top: 1rem
}

.apw-about .apw-btn {
   display: inline-flex;
   align-items: center;
   gap: .6rem;
   padding: .9rem 2rem;
   border-radius: 4px;
   font-weight: 600;
   font-size: .9rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   text-decoration: none;
   transition: all .3s ease
}

.apw-about .apw-btn-p {
   color: #fff
}

.apw-about .apw-btn-p:hover {
   filter: brightness(1.15);
   transform: translateY(-3px)
}

.apw-about .apw-btn-s {
   backdrop-filter: blur(12px)
}

.apw-about .apw-btn-s:hover {
   transform: translateY(-3px)
}

.apw-about .apw-timeline {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   position: relative;
   padding-top: 2rem
}

.apw-about .apw-timeline::before {
   content: '';
   position: absolute;
   top: calc(2rem + 43px + 12px) !important;
   left: 0;
   width: 100%;
   height: 3px
}

.apw-about .apw-tl-item {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   position: relative;
   padding: 0 1rem
}

.apw-about .apw-tl-year {
   font-size: 2rem;
   font-weight: 900;
   margin-bottom: 1rem;
   line-height: 1
}

.apw-about .apw-tl-dot {
   width: 16px;
   height: 16px;
   border-radius: 50%;
   position: relative;
   z-index: 2;
   margin-bottom: 1.5rem;
   transition: transform .3s ease, box-shadow .3s ease
}

.apw-about .apw-tl-item:hover .apw-tl-dot {
   transform: scale(1.3)
}

.apw-about .apw-tl-h {
   font-size: 1.1rem;
   font-weight: 800;
   margin-bottom: .5rem
}

.apw-about .apw-tl-p {
   font-size: .85rem;
   line-height: 1.5;
   max-width: 240px;
   margin: 0 auto;
   opacity: .7
}
.apw-sh .apw-sub{
    text-transform: uppercase;
   font-weight: 700;
   letter-spacing: 2px;
   font-size: .9rem;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 1rem;
   margin-bottom: 1rem
}

.apw-sh .apw-sub::before, .apw-sh .apw-sub::after{
    content: "";
    height: 1px;
    width: 40px;
    background: #e8363c;
}
@media(max-width:992px) {
   .apw-about .apw-layout {
      grid-template-columns: 1fr;
      gap: 4rem
   }

   .apw-about .apw-visual {
      max-width: 600px;
      margin: 0 auto
   }

   .apw-about .apw-imgwrap img {
      height: 400px
   }

   .apw-about .apw-content {
      text-align: left;
      align-items: flex-start;
   }

   .apw-about .apw-tag {
      justify-content: flex-start;
   }

   .apw-about .apw-cta {
      justify-content: flex-start;
   }

   .apw-about .apw-timeline {
      grid-template-columns: repeat(2, 1fr);
      gap: 3rem
   }

   .apw-about .apw-timeline::before {
      display: none;
   }

   .apw-about .apw-tl-item {
      align-items: flex-start;
      text-align: left;
   }
}

@media(max-width:768px) {
   .apw-about .apw-heading {
      font-size: 1.8rem;
   }

   .apw-about .apw-bento {
      grid-template-columns: 1fr;
   }

   .apw-about .apw-cta {
      flex-direction: column;
      align-items: flex-start;
   }

   .apw-about .apw-timeline {
      grid-template-columns: 1fr;
      gap: 2.5rem;
   }

   .apw-about .apw-tl-item {
      flex-direction: row;
      text-align: left;
      gap: 1.2rem;
      padding: 0
   }

   .apw-about .apw-tl-year {
      min-width: 60px;
      margin-bottom: 0;
      font-size: 1.5rem;
   }

   .apw-about .apw-tl-dot {
      margin-bottom: 0;
      min-width: 16px;
   }

   .apw-about .apw-tl-p {
      max-width: 100%;
   }

   .apw-about .apw-imgwrap img {
      height: 300px;
   }

   .apw-about .apw-stripe {
      display: none
   }
   .apw-sh .apw-sub{
   justify-content: flex-start;
}

.apw-sh .apw-sub::after{
    display: none;
}
}

/* === FEATURED PRODUCTS WIDGET === */
.apw-feat {
   padding: 5rem 5%;
   position: relative
}

.apw-feat * {
   box-sizing: border-box;
   margin: 0;
   padding: 0
}

.apw-feat a {
   text-decoration: none
}

.apw-feat .apw-inner {
   max-width: 1400px;
   margin: 0 auto
}

.apw-feat .apw-fhd {
   display: flex;
   justify-content: space-between;
   align-items: flex-start;
   gap: 3rem;
   margin-bottom: 3rem
}

.apw-feat .apw-fhl {
   flex: 1;
   max-width: 550px
}

.apw-feat .apw-ftitle {
   font-size: 3rem;
   font-weight: 900;
   line-height: 1.1;
   margin-bottom: 1.5rem
}

.apw-feat .apw-fbtns {
   display: flex;
   gap: 1rem;
   flex-wrap: wrap
}

.apw-feat .apw-fbtn {
   display: inline-flex;
   align-items: center;
   gap: .5rem;
   padding: .9rem 2rem;
   border-radius: 4px;
   font-weight: 600;
   font-size: .85rem;
   text-transform: uppercase;
   letter-spacing: 1px;
   transition: all .3s ease
}

.apw-feat .apw-fbtn-p {
   color: #fff
}

.apw-feat .apw-fbtn-p:hover {
   filter: brightness(1.15);
   transform: translateY(-2px)
}

.apw-feat .apw-fbtn-o {
   background: transparent
}

.apw-feat .apw-fbtn-o:hover {
   transform: translateY(-2px)
}

.apw-feat .apw-fhr {
   flex: 0 0 350px
}

.apw-feat .apw-fhr p {
   line-height: 1.7;
   font-size: .95rem;
   opacity: .7
}

.apw-feat .apw-fg {
   display: grid;
   grid-template-columns: 1.2fr 1fr 1fr;
   gap: 1.2rem;
   margin-bottom: 2.5rem
}

.apw-feat .apw-fc {
   position: relative;
   border-radius: 18px;
   overflow: hidden
}

.apw-feat .apw-fc img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
   transition: transform .5s ease
}

.apw-feat .apw-fc:hover img {
   transform: scale(1.06)
}

.apw-feat .apw-fc-lg {
   min-height: 480px
}

.apw-feat .apw-fc-md {
   min-height: 260px
}

.apw-feat .apw-fc-ar {
   position: absolute;
   top: 1rem;
   right: 1rem;
   width: 40px;
   height: 40px;
   border-radius: 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   z-index: 3;
   transition: all .3s ease;
   font-size: 1rem
}

.apw-feat .apw-fc:hover .apw-fc-ar {
   transform: scale(1.1)
}

.apw-feat .apw-fc-info {
   position: absolute;
   bottom: 0;
   left: 0;
   width: 100%;
   padding: 1.5rem;
   background: linear-gradient(0deg, rgba(0, 0, 0, .8) 0%, transparent 100%);
   z-index: 2
}

.apw-feat .apw-fc-info h3 {
   color: #fff;
   font-size: 1.05rem;
   font-weight: 700;
   line-height: 1.3;
   margin-bottom: .4rem
}

.apw-feat .apw-fc-info .apw-pr {
   font-size: 1rem;
   font-weight: 800;
   margin-bottom: .6rem;
   display: block
}

.apw-feat .apw-fc-info .apw-pr del {
   color: rgba(255, 255, 255, .5);
   font-weight: 400;
   font-size: .85rem
}

.apw-feat .apw-fc-info .apw-pr ins {
   text-decoration: none
}

.apw-feat .apw-fc-info .apw-btns {
   display: flex;
   gap: .5rem;
   flex-wrap: wrap
}

.apw-feat .apw-fc-info .apw-btns a {
   padding: .45rem 1rem;
   border-radius: 4px;
   font-size: .75rem;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: .5px;
   transition: all .3s ease
}

.apw-feat .apw-fc-atc {
   color: #fff
}

.apw-feat .apw-fc-atc:hover {
   filter: brightness(1.2)
}

.apw-feat .apw-fc-vp {
   background: rgba(255, 255, 255, .15);
   color: #fff;
   border: 1px solid rgba(255, 255, 255, .3)
}

.apw-feat .apw-fc-vp:hover {
   background: rgba(255, 255, 255, .3)
}

.apw-feat .apw-fcc {
   display: flex;
   flex-direction: column;
   gap: 1.2rem
}

.apw-feat .apw-fpm {
   border-radius: 18px;
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   gap: 1rem;
   flex: 1
}

.apw-feat .apw-fpm h4 {
   font-size: 1.2rem;
   font-weight: 800;
   line-height: 1.3
}

.apw-feat .apw-fpf {
   display: flex;
   border-radius: 50px;
   overflow: hidden
}

.apw-feat .apw-fpf input {
   flex: 1;
   padding: .8rem 1.2rem;
   border: none;
   outline: none;
   background: transparent;
   font-size: .85rem
}

.apw-feat .apw-fpf button {
   padding: .8rem 1.5rem;
   color: #fff;
   border: none;
   font-weight: 700;
   font-size: .85rem;
   cursor: pointer;
   border-radius: 0 50px 50px 0;
   transition: background .3s
}

@keyframes apw-marquee {
   0% { transform: translateX(0); }
   100% { transform: translateX(-50%); }
}

.apw-feat .apw-fcs-wrapper {
   overflow: hidden;
   width: 100%;
   position: relative;
   -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
   mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent);
}

.apw-feat .apw-fcs {
   display: flex;
   width: max-content;
   gap: 1.2rem;
   padding: 1rem 0;
   animation: apw-marquee 20s linear infinite;
   will-change: transform;
}

.apw-feat .apw-pause-hover:hover {
   animation-play-state: paused;
}

.apw-feat .apw-fcs::-webkit-scrollbar {
   display: none;
}

.apw-feat .apw-fct {
   flex: 0 0 160px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 0.5rem;
   padding: 1.5rem 1rem;
   border-radius: 12px;
   transition: all 0.3s ease;
   cursor: pointer;
   scroll-snap-align: start;
}

.apw-feat .apw-fct:hover {
   transform: translateY(-5px);
}

.apw-feat .apw-fct svg {
   width: 32px;
   height: 32px;
   margin-bottom: 0.5rem;
   transition: all 0.3s;
}

.apw-feat .apw-fct-n {
   font-weight: 800;
   font-size: 0.95rem;
   text-align: center;
}

.apw-feat .apw-fct-c {
   font-size: 0.8rem;
   opacity: 0.6;
}

@media(max-width:992px) {
   .apw-feat .apw-fhd {
      flex-direction: column;
      gap: 1.5rem;
      align-items: flex-start
   }

   .apw-feat .apw-fhr {
      flex: auto
   }

   .apw-feat .apw-fg {
      display: flex;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      -webkit-overflow-scrolling: touch;
      gap: 1.5rem;
      padding-bottom: 1.5rem
   }

   .apw-feat .apw-fg::-webkit-scrollbar {
      height: 4px
   }

   .apw-feat .apw-fg::-webkit-scrollbar-track {
      background: rgba(255, 255, 255, 0.05);
      border-radius: 2px
   }

   .apw-feat .apw-fg::-webkit-scrollbar-thumb {
      background: #e3000f;
      border-radius: 2px
   }

   .apw-feat .apw-fc,
   .apw-feat .apw-fcc {
      min-width: 85vw;
      flex-shrink: 0;
      scroll-snap-align: start
   }

   .apw-feat .apw-fc-lg {
      min-height: 380px
   }
}

@media(max-width:768px) {
   .apw-feat .apw-ftitle {
      font-size: 2rem
   }

   .apw-feat .apw-fbtns {
      flex-direction: column;
      align-items: flex-start
   }

   .apw-feat .apw-fc-lg {
      min-height: 320px
   }
}

/* === COMPARISON SLIDER WIDGET === */
.apw-comparison-slider {
    position: relative;
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    user-select: none;
    cursor: ew-resize;
    background: #000;
}

.apw-comparison-slider img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

.apw-comp-img {
    position: absolute;
    top: 0;
    left: 0;
}

.apw-img-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    clip-path: inset(0 50% 0 0);
}

.apw-comp-label {
    position: absolute;
    bottom: 1.5rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 6px;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    z-index: 5;
    pointer-events: none;
}

.apw-comp-label.label-before { right: 1.5rem; }
.apw-comp-label.label-after { left: 1.5rem; }

.apw-comp-handle {
    position: absolute;
    top: 0;
    left: 50%;
    width: 4px;
    height: 100%;
    background: var(--apw-comp-accent, #E3000F);
    transform: translateX(-50%);
    z-index: 10;
    pointer-events: none;
}

.apw-handle-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 44px;
    height: 44px;
    background: var(--apw-comp-accent, #E3000F);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    box-shadow: 0 0 15px var(--apw-comp-glow, rgba(227, 0, 15, 0.4));
    border: 3px solid #fff;
}

.apw-handle-circle svg {
    width: 18px;
    height: 18px;
}

@media (max-width: 768px) {
    .apw-comparison-slider {
        height: 400px;
    }
    .apw-handle-circle {
        width: 36px;
        height: 36px;
    }
}

/* === SECTION HEADER WIDGET === */
.apw-section-header {
    margin-bottom: 3.5rem;
}

.apw-sh-subtitle {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    color: #e3000f;
    font-size: 0.9rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 1rem;
}

.apw-sh-subtitle::before,
.apw-sh-subtitle::after {
    content: '';
    width: 30px;
    height: 1px;
    background: #e3000f;
}

/* Hide bars if align left/right and only want one side? 
   Actually, the user said "arround substile", so I'll keep both. 
*/

.apw-sh-title {
    font-size: 2.8rem;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 1.5rem;
    color: #fff;
    text-transform: uppercase;
}

.apw-sh-accent {
    color: #e3000f;
}

.apw-sh-desc {
    font-size: 1rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.7);
    margin: 0 auto;
}

@media (max-width: 768px) {
    .apw-sh-title {
        font-size: 2.2rem;
    }
    .apw-sh-subtitle {
        font-size: 0.8rem;
        letter-spacing: 2px;
    }
}