:root {
   --brand-accent: #ffab03;
   --brand-accent-glow: rgba(255, 171, 3, 0.35);
   --bg-dark-main: #0e1117;
   --bg-card-dark: #161b22;
   --text-muted-custom: #a3b1c2;
   }
   /* Base Section */
   .spx-shopify-stack-section {
   background-color: var(--bg-dark-main);
   color: #ffffff;
   min-height: 100vh;
   display: flex;
   align-items: center;
   position: relative;
   }
   .text-accent {
   color: var(--brand-accent);
   }
   .text-light-muted {
   color: var(--text-muted-custom);
   }
   .spx-badge {
   background-color: rgba(255, 171, 3, 0.15);
   color: var(--brand-accent);
   border: 1px solid rgba(255, 171, 3, 0.4);
   }
   .border-accent-glow {
   border: 1px solid rgba(255, 171, 3, 0.25);
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.6), 0 0 20px var(--brand-accent-glow);
   }
   /* Right Side Container - Cards Stack Frame */
   .spx-cards-container {
   position: relative;
   height: 380px; /* Fixed height so all cards stack exactly in this same spot */
   width: 100%;
   }
   /* Card Absolute Stacking in Same Spot */
   .spx-stack-card {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background: var(--bg-card-dark);
   padding: 40px;
   border-radius: 20px;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5);
   border: 1px solid rgba(255, 255, 255, 0.1);
   display: flex;
   flex-direction: column;
   justify-content: center;
   will-change: transform, opacity;
   }
   .spx-stack-card:hover {
   border-color: var(--brand-accent);
   box-shadow: 0 0 25px var(--brand-accent-glow);
   }
   /* Accent Icon Styling */
   .spx-card-icon {
   width: 60px;
   height: 60px;
   border-radius: 14px;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--brand-accent);
   color: #000000;
   font-size: 26px;
   margin-bottom: 20px;
   font-weight: bold;
   box-shadow: 0 6px 18px var(--brand-accent-glow);
   }
   .spx-stack-card p {
   font-size: 16px;
   line-height: 1.8;
   margin: 0;
   }
   /* Mobile Screens Adjustments */
   @media (max-width: 991px) {
   .spx-shopify-stack-section {
   min-height: auto;
   }
   .spx-cards-container {
   height: auto;
   display: flex;
   flex-direction: column;
   gap: 20px;
   }
   .spx-stack-card {
   position: relative !important;
   height: auto !important;
   transform: none !important;
   opacity: 1 !important;
   }
   }

   /* Color Theme Variables */
   :root {
   --brand-accent: #ffab03;
   --brand-accent-glow: rgba(255, 171, 3, 0.25);
   --bg-dark-main: #0b0f17;       /* Extra Dark Background */
   --bg-card-dark: #131924;       /* Card Surface Color */
   --bg-card-hover: #1c2536;
   --text-muted-custom: #94a3b8;
   }
   /* Base Section */
   .spx-shopify-features-section {
   background-color: var(--bg-dark-main);
   color: #ffffff;
   }
   .text-accent {
   color: var(--brand-accent);
   }
   .text-light-muted {
   color: var(--text-muted-custom);
   }
   /* Header Badge */
   .spx-badge {
   background-color: rgba(255, 171, 3, 0.12);
   color: var(--brand-accent);
   border: 1px solid rgba(255, 171, 3, 0.35);
   letter-spacing: 0.5px;
   }
   /* Left Vertical Tabs */
   .spx-tab-menu .nav-link {
   background: var(--bg-card-dark);
   border: 1px solid rgba(255, 255, 255, 0.06);
   color: #ffffff;
   border-radius: 12px;
   padding: 12px 16px;
   margin-bottom: 8px;
   display: flex;
   align-items: center;
   justify-content: space-between;
   transition: all 0.3s ease;
   text-align: left;
   }
   .spx-tab-menu .nav-link:hover {
   background: var(--bg-card-hover);
   border-color: rgba(255, 171, 3, 0.4);
   }
   .spx-tab-menu .nav-link.active {
   background: linear-gradient(90deg, rgba(255, 171, 3, 0.18) 0%, var(--bg-card-dark) 100%);
   border-color: var(--brand-accent);
   box-shadow: 0 4px 20px var(--brand-accent-glow);
   }
   /* Tab Icon Square */
   .tab-icon-box {
   width: 38px;
   height: 38px;
   background: rgba(255, 255, 255, 0.04);
   border-radius: 8px;
   display: flex;
   align-items: center;
   justify-content: center;
   color: var(--brand-accent);
   font-size: 18px;
   flex-shrink: 0;
   transition: all 0.3s ease;
   }
   .spx-tab-menu .nav-link.active .tab-icon-box {
   background: var(--brand-accent);
   color: #000000;
   }
   .tab-title {
   font-weight: 600;
   font-size: 14px;
   line-height: 1.3;
   }
   .arrow-icon {
   font-size: 13px;
   color: var(--text-muted-custom);
   transition: transform 0.3s ease;
   }
   .spx-tab-menu .nav-link.active .arrow-icon {
   color: var(--brand-accent);
   transform: translateX(4px);
   }
   /* Right Side Content Display Card */
   .spx-details-card {
   background: var(--bg-card-dark);
   border: 1px solid rgba(255, 171, 3, 0.2);
   border-radius: 20px;
   padding: 40px;
   min-height: 440px;
   box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 25px var(--brand-accent-glow);
   display: flex;
   align-items: center;
   }
   .feature-tag {
   display: inline-flex;
   align-items: center;
   font-size: 12px;
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.8px;
   color: var(--brand-accent);
   background: rgba(255, 171, 3, 0.1);
   padding: 5px 14px;
   border-radius: 20px;
   border: 1px solid rgba(255, 171, 3, 0.3);
   }
   .feature-divider {
   height: 1px;
   background: linear-gradient(90deg, rgba(255, 171, 3, 0.3) 0%, rgba(255, 255, 255, 0.05) 100%);
   }
   .feature-list {
   list-style: none;
   padding: 0;
   margin: 0;
   }
   .feature-list li {
   font-size: 15px;
   color: #e2e8f0;
   margin-bottom: 12px;
   display: flex;
   align-items: center;
   }
   .feature-list li i {
   color: var(--brand-accent);
   font-size: 18px;
   margin-right: 12px;
   }
   /* Responsive Styles */
   @media (max-width: 991px) {
   .spx-details-card {
   padding: 25px;
   min-height: auto;
   margin-top: 20px;
   }
   }

   /* Color Theme Variables */
   :root {
   --brand-accent: #ffa402;
   --brand-accent-glow: rgba(255, 164, 2, 0.25);
   --bg-dark-main: #0b0f17;
   --bg-card-dark: #131924;
   --text-muted-custom: #94a3b8;
   }
   /* Base Section */
   .spx-shopify-industries-section {
   background-color: var(--bg-dark-main);
   color: #ffffff;
   position: relative;
   }
   .text-accent {
   color: var(--brand-accent);
   }
   .text-light-muted {
   color: var(--text-muted-custom);
   }
   /* Header Badge */
   .spx-badge {
   background-color: rgba(255, 164, 2, 0.12);
   color: var(--brand-accent);
   border: 1px solid rgba(255, 164, 2, 0.35);
   letter-spacing: 0.5px;
   }
   /* Industry Card Design */
   .industry-card {
   background: var(--bg-card-dark);
   border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 16px;
   overflow: hidden;
   transition: all 0.35s ease;
   display: flex;
   flex-direction: column;
   }
   .industry-card:hover {
   border-color: var(--brand-accent);
   transform: translateY(-7px);
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5), 0 0 20px var(--brand-accent-glow);
   }
   /* Card Image Styles */
   .card-img-wrapper {
   position: relative;
   height: 300px;
   overflow: hidden;
   }
   .card-img-wrapper img {
   width: 100%;
   height: 300px;
   object-fit: cover;
   transition: transform 0.5s ease;
   }
   .industry-card:hover .card-img-wrapper img {
   transform: scale(1.08);
   }
   .card-badge {
   position: absolute;
   top: 12px;
   right: 12px;
   background: rgba(11, 15, 23, 0.85);
   backdrop-filter: blur(4px);
   color: var(--brand-accent);
   border: 1px solid rgba(255, 164, 2, 0.4);
   font-size: 11px;
   font-weight: 600;
   padding: 4px 10px;
   border-radius: 20px;
   }
   /* Card Content Styles */
   .card-body-content {
   padding: 24px;
   position: relative;
   flex-grow: 1;
   }
   .card-icon {
   width: 44px;
   height: 44px;
   background: rgba(255, 164, 2, 0.12);
   border: 1px solid rgba(255, 164, 2, 0.3);
   color: var(--brand-accent);
   border-radius: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 18px;
   margin-bottom: 14px;
   }
   .card-title {
   color: #ffffff;
   font-size: 18px;
   font-weight: 700;
   margin-bottom: 8px;
   }
   .card-desc {
   color: var(--text-muted-custom);
   font-size: 14px;
   line-height: 1.5;
   margin-bottom: 0;
   }
   /* Carousel Control Customization */
   .spx-carousel {
   position: relative;
   }
   .spx-carousel-btn {
   width: 45px;
   height: 45px;
   background: var(--bg-card-dark);
   border: 1px solid rgba(255, 164, 2, 0.4);
   border-radius: 50%;
   color: var(--brand-accent);
   opacity: 0.9;
   top: 50%;
   transform: translateY(-50%);
   transition: all 0.3s ease;
   }
   .spx-carousel-btn:hover {
   background: var(--brand-accent);
   color: #000000;
   box-shadow: 0 0 15px var(--brand-accent-glow);
   opacity: 1;
   }
   .carousel-control-prev { left: -25px; }
   .carousel-control-next { right: -25px; }
   /* Carousel Indicators Fix */
   #spxIndustryCarousel .carousel-indicators {
   bottom: -35px;
   }
   #spxIndustryCarousel .carousel-indicators button {
   width: 10px;
   height: 10px;
   border-radius: 50%;
   background-color: #555555;
   border: 0;
   opacity: 0.7;
   margin: 0 5px;
   transition: all 0.3s ease;
   }
   #spxIndustryCarousel .carousel-indicators button.active {
   background-color: var(--brand-accent);
   width: 26px;
   border-radius: 10px;
   opacity: 1;
   }
   /* Mobile Responsiveness */
   @media (max-width: 991px) {
   .carousel-control-prev { left: 5px; }
   .carousel-control-next { right: 5px; }
   }

   .spx-hero-section{
   position: relative;
   overflow: hidden;
   background: #050505;
   min-height: 100vh;
   display: flex;
   align-items: center;
   padding: 180px 0 80px;
   }
   /* Smoke Effect */
   .spx-hero-section::before{
   content: "";
   position: absolute;
   left: 50%;
   top: 45%;
   transform: translate(-50%,-50%);
   width: 950px;
   height: 280px;
   background: radial-gradient(circle,
   rgba(255,255,255,.40) 0%,
   rgba(255,255,255,.18) 30%,
   rgba(255,255,255,.05) 70%,
   transparent 100%);
   filter: blur(45px);
   }
   /* Left Content */
   .spx-content{
   position: relative;
   z-index: 2;
   }
   .spx-title{
   font-size: clamp(42px,7vw,88px);
   font-weight: 700;
   line-height: 1.05;
   color: #fff;
   margin-bottom: 30px;
   animation: spxZoom 1s ease;
   }
   .spx-title span{
   color:#ffa903;
   font-weight:500;
   }
   .spx-desc{
   font-size: clamp(17px,2vw,27px);
   color:#e6e6e6;
   line-height:1.8;
   max-width:720px;
   margin-bottom:45px;
   animation: spxZoom 1.2s ease;
   }
   .spx-btn{
   display:inline-block;
   color:#ffa903;
   text-decoration:none;
   font-size:19px;
   font-weight:600;
   padding:10px;
   border:1px solid #ffa903;
   transition:.4s;
   }
   .spx-btn:hover{
   color:#fff;
   border-color:#fff;
   }
   /* Right Image */
   .spx-image{
   position:relative;
   z-index:2;
   text-align:center;
   }
   .spx-image img{
   width:100%;
   max-width:650px;
   animation: spxBag 1.4s ease;
   }
   /*=====================
   Animation
   =====================*/
   @keyframes spxZoom{
   from{
   transform:scale(.75);
   opacity:0;
   }
   to{
   transform:scale(1);
   opacity:1;
   }
   }
   @keyframes spxBag{
   from{
   transform:scale(.75);
   opacity:0;
   }
   to{
   transform:scale(1);
   opacity:1;
   }
   }
   /*=====================
   Large Desktop
   =====================*/
   @media(min-width:1600px){
   .spx-title{
   font-size:95px;
   }
   .spx-desc{
   font-size:28px;
   }
   }
   /*=====================
   Laptop
   =====================*/
   @media(max-width:1399px){
   .spx-title{
   font-size:55px;
   }
   .spx-desc{
   font-size:19px;
   }
   .spx-image img{
   max-width:560px;
   }
   }
   /*=====================
   Tablet
   =====================*/
   @media(max-width:991px){
   .spx-hero-section{
   padding:130px 0 70px;
   text-align:center;
   min-height:auto;
   }
   .spx-title{
   font-size:56px;
   }
   .spx-desc{
   font-size:20px;
   margin:auto;
   margin-bottom:35px;
   }
   .spx-btn{
   font-size:24px;
   }
   .spx-image img{
   max-width:470px;
   }
   }
   /*=====================
   Mobile
   =====================*/
   @media(max-width:767px){
   .spx-hero-section{
   padding:110px 0 60px;
   }
   .spx-title{
   font-size:42px;
   line-height:1.15;
   }
   .spx-desc{
   font-size:17px;
   line-height:1.8;
   }
   .spx-btn{
   font-size:20px;
   }
   .spx-image{
   margin-top:35px;
   }
   .spx-image img{
   max-width:320px;
   }
   .spx-hero-section::before{
   width:420px;
   height:170px;
   filter:blur(28px);
   }
   }
   /*=====================
   Small Mobile
   =====================*/
   @media(max-width:480px){
   .spx-title{
   font-size:34px;
   }
   .spx-desc{
   font-size:16px;
   }
   .spx-btn{
   font-size:18px;
   }
   .spx-image img{
   max-width:270px;
   }
   }