:root {
     --ys-primary: #605BE5;
     --ys-primary-light: #f5f3ff;
     --ys-dark: #0f172a;
     --ys-slate: #64748b;
     --ys-border: #e2e8f0;
 }

 /* --- HERO SECTION (RESTORED ORIGINAL DESIGN) --- */
 .domain-hero-wrapper {
     padding: 80px 0;
     background: linear-gradient(135deg, #f2eeff 0%, #ffffff 100%);
     text-align: center;
     border-radius: 0 0 60px 60px;
     position: relative;
 }

 .promo-badge {
     display: inline-block;
     background: rgba(96, 91, 229, 0.1);
     color: var(--ys-primary);
     padding: 8px 20px;
     border-radius: 100px;
     font-weight: 700;
     font-size: 13px;
     margin-bottom: 20px;
 }

 .domain-hero-wrapper h1 {
     font-weight: 800;
     font-size: 43px !important;
     margin-bottom: 25px;
     line-height: 1.2;
 }

 .highlight-ext {
     position: relative;
     display: inline-block;
     color: var(--ys-primary);
     background: white;
     padding: 5px 20px;
     border-radius: 18px;
     box-shadow: 0 10px 25px rgba(96, 91, 229, 0.15);
     border: 2px solid rgba(96, 91, 229, 0.1);
     animation: floatingIcon 3s ease-in-out infinite;
     margin-left: 5px;
 }

 @keyframes floatingIcon {

     0%,
     100% {
         transform: translateY(0px);
     }

     50% {
         transform: translateY(-8px);
     }
 }

 .price-tag-box {
     display: inline-flex;
     align-items: center;
     gap: 15px;
     background: white;
     padding: 12px 30px;
     border-radius: 20px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     margin-bottom: 35px;
     border: 1px solid #f1f5f9;
 }

 .price-tag-box .old {
     color: #94a3b8;
     text-decoration: line-through;
     font-size: 18px;
 }

 .price-tag-box .new {
     color: var(--ys-primary);
     font-weight: 800;
     font-size: 40px;
 }

 .domain-search-style {
     max-width: 850px;
     margin: 0 auto;
     display: flex;
     background: white;
     padding: 10px;
     border-radius: 100px;
     box-shadow: 0 20px 40px rgba(96, 91, 229, 0.1);
     border: 2px solid white;
     align-items: center;
 }

 .domain-search-style input {
     flex: 1;
     border: none;
     padding: 0 35px;
     font-size: 18px;
     outline: none;
     height: 55px;
     background: transparent;
 }

 .domain-search-style button {
     background: var(--ys-primary);
     color: white;
     border: none;
     padding: 15px 45px;
     border-radius: 100px;
     font-weight: 700;
     cursor: pointer;
 }



 .pricing-table-modern {
     width: 100%;
     border-radius: 15px;
     overflow: hidden;
     border: 1px solid var(--ys-border);
 }

 .pricing-table-modern thead th {
     background: var(--ys-dark);
     color: #fff;
     padding: 20px;
     font-weight: 600;
 }

 .pricing-table-modern td {
     padding: 18px 20px;
     border-bottom: 1px solid var(--ys-border);
     transition: 0.2s;
 }

 .pricing-table-modern tr:hover td {
     background: var(--ys-primary-light);
 }


 .ys-steps-wrapper {
     padding: 50px 0;
     background: #f2eeff;
     position: relative;
 }

 .ys-steps-wrapper .step-path-container {
     position: relative;
     display: flex;
     flex-wrap: wrap;
     gap: 30px;
 }

 .ys-steps-wrapper .step-item-new {
     flex: 1;
     min-width: 300px;
     position: relative;
     padding: 40px;
     border-radius: 24px;
     background: #fff;
     border: 1px solid #f1f5f9;
     transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
     overflow: hidden;
     z-index: 1;
 }

 /* Background Big Number Text */
 .ys-steps-wrapper .step-bg-number {
     position: absolute;
     top: -20px;
     right: -10px;
     font-size: 150px;
     font-weight: 900;
     color: rgba(96, 91, 229, 0.04);
     line-height: 1;
     z-index: -1;
     transition: 0.5s;
     user-select: none;
 }

 .ys-steps-wrapper .step-item-new:hover {
     border-color: var(--ys-primary);
     box-shadow: 0 30px 60px rgba(96, 91, 229, 0.1);
     transform: translateY(-10px);
 }

 .ys-steps-wrapper .step-item-new:hover .step-bg-number {
     color: rgba(96, 91, 229, 0.08);
     transform: scale(1.1) translateX(-20px);
 }

 /* Decorative Icon Circle */
 .ys-steps-wrapper .step-icon-wrap {
     width: 60px;
     height: 60px;
     background: linear-gradient(135deg, var(--ys-primary) 0%, #a78bfa 100%);
     border-radius: 16px;
     display: flex;
     align-items: center;
     justify-content: center;
     margin-bottom: 25px;
     color: #fff;
     font-size: 24px;
     box-shadow: 0 10px 20px rgba(96, 91, 229, 0.2);
 }

 .ys-steps-wrapper .step-content h4 {
     font-size: 22px;
     font-weight: 700;
     color: var(--ys-dark);
     margin-bottom: 15px;
 }

 .ys-steps-wrapper .step-content p {
     color: #64748b;
     font-size: 16px;
     line-height: 1.7;
     margin: 0;
 }

 /* Connecting Arrow Line for Desktop */
 @media (min-width: 992px) {
     .ys-steps-wrapper .step-item-new:not(:last-child)::after {
         content: "\f061";
         /* FontAwesome Right Arrow */
         font-family: "Font Awesome 6 Free";
         font-weight: 900;
         position: absolute;
         top: 50%;
         right: -25px;
         transform: translateY(-50%);
         color: var(--ys-primary);
         font-size: 20px;
         opacity: 0.3;
         animation: arrowMove 2s infinite;
     }
 }

 @keyframes arrowMove {

     0%,
     100% {
         transform: translate(0, -50%);
         opacity: 0.3;
     }

     50% {
         transform: translate(10px, -50%);
         opacity: 0.8;
     }
 }