*,
 *::before,
 *::after {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
 }

 :root {
     --ink-50: #f5f7fa;
     --ink-100: #e9eef5;
     --ink-200: #cfd9e6;
     --ink-300: #a7b8cf;
     --ink-400: #7891b3;
     --ink-500: #547095;
     --ink-600: #555;
     --ink-700: #344965;
     --ink-800: #2e3f57;
     --ink-900: #0b1b32;
     --ink-950: #333;
     --brand-50: #F6F6F6;
     --brand-100: #d1fae5;
     --brand-200: #a7f3d0;
     --brand-300: #10b981;
     --brand-400: #10b981;
     --brand-500: #FED927;
     --brand-600: #555;
     --brand-700: #333;
     --brand-800: #065f46;
     --accent-400: #fbbf24;
     --accent-500: #f59e0b;
 }

 html {
     scroll-behavior: smooth;
 }

 body {
     font-family: "Plus Jakarta Sans", system-ui, sans-serif;
     color: var(--ink-800);
     background: #fff;
     -webkit-font-smoothing: antialiased;
     line-height: 1.5;
 }

 a {
     text-decoration: none;
     color: inherit;
 }

 ul {
     list-style: none;
 }

 img {
     max-width: 100%;
     display: block;
 }

 .container {
     max-width: 1200px;
     margin: 0 auto;
     padding: 0 16px;
 }

 @media (min-width: 640px) {
     .container {
         padding: 0 24px;
     }
 }

 @media (min-width: 1024px) {
     .container {
         padding: 0 32px;
     }
 }

 .mono {
     font-family: "Inter", system-ui, sans-serif;
 }

 /* ============ CONTACT BAR ============ */
 /* ============ HEADER TOP ============ */
 .header-top {
     background: #FED927;
     /* border-bottom: 2px solid #fff; */
 }

 .header-top__inner {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
     padding: 12px 0;
 }

 .logo {
     display: flex;
     align-items: center;
     gap: 10px;
 }

 .logo__mark {
     display: flex;
     align-items: center;
     justify-content: center;
     /* border-radius: 12px; */
     overflow: hidden;
     flex-shrink: 0;
 }

 .logo__mark img {
     object-fit: contain;
 }

 .header-top .logo__mark {
     height: 100px;
     width: auto;
 }

 .header-top .logo__mark img {
     height: 100%;
     width: auto;
 }

 .footer__brand .logo__mark {
     /* width: 44px; */
     height: 64px;
     filter: brightness(1.1);
 }

 .footer__brand .logo__mark img {
     width: 100%;
     height: 100%;
 }

 .logo__text {
     display: flex;
     flex-direction: column;
     line-height: 1;
 }

 .logo__name {
     font-size: 18px;
     font-weight: 800;
     letter-spacing: -0.02em;
     color: var(--ink-900);
 }

 .logo__name span {
     color: var(--brand-600);
 }

 .logo__tag {
     font-size: 10px;
     font-weight: 500;
     text-transform: uppercase;
     letter-spacing: 0.18em;
     color: var(--ink-400);
     margin-top: 2px;
 }

 .header-contacts {
     display: none;
     align-items: center;
     gap: 28px;
 }

 @media (min-width: 768px) {
     .header-contacts {
         display: flex;
     }
 }

 .header-contact {
     display: flex;
     align-items: center;
     gap: 4px;
 }

 .header-contact__icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 38px;
     height: 38px;
     /* border-radius: 10px; */
     /* background: var(--brand-50); */
     color: #888;
     flex-shrink: 0;
 }

 .header-contact__label {
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.08em;
     color: #666;
     font-weight: 600;
 }

 .header-contact__value {
     font-size: 13px;
     font-weight: 700;
     color: var(--ink-800);
 }

 .header-contact a {
     color: inherit;
     transition: color 0.2s;
 }

 .header-contact a:hover {
     color: var(--brand-700);
 }

 .header-socials {
     display: none;
     align-items: center;
     gap: 8px;
     padding-left: 20px;
     border-left: 1px solid var(--ink-200);
 }

 @media (min-width: 1024px) {
     .header-socials {
         display: flex;
     }
 }

 .header-social {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     color: var(--ink-400);
     border: 1px solid var(--ink-200);
     transition: all 0.2s;
 }

 .header-social:hover {
     background: var(--brand-600);
     color: #fff;
     border-color: var(--brand-600);
 }

 /* ============ MENU BAR ============ */
 .header-menu {
     position: sticky;
     top: 0;
     z-index: 50;
     background: var(--ink-950);
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
 }

 .header-menu__inner {
     display: flex;
     align-items: center;
     gap: 16px;
     min-height: 56px;
     padding: 0;
 }

 .header-menu__logo {
     display: none;
     align-items: center;
     height: 54px;
     width: auto;
     overflow: hidden;
     flex-shrink: 0;
     opacity: 0;
     transform: translateX(-12px);
     transition: opacity 0.3s ease, transform 0.3s ease;
 }

 .header-menu__logo img {
     height: 100%;
     width: auto;
     object-fit: contain;
 }

 .header-menu.scrolled .header-menu__logo {
     display: flex;
     opacity: 1;
     transform: translateX(0);
 }

 .nav-links {
     display: none;
     align-items: center;
     gap: 4px;
     flex: 1;
     justify-content: center;
 }

 @media (min-width: 1024px) {
     .nav-links {
         display: flex;
     }
 }

 .nav-links a {
     position: relative;
     padding: 17px 14px;
     font-size: 16px;
     font-weight: 600;
     color: rgba(255, 255, 255, 0.65);
     transition: color 0.25s;
 }

 .nav-links a::after {
     content: "";
     position: absolute;
     left: 14px;
     right: 14px;
     bottom: 2px;
     height: 1.5px;
     background: #FED927;
     transform: scaleX(0);
     transform-origin: left;
     transition: transform 0.3s ease;
 }

 .nav-links a:hover {
     color: #fff;
 }

 .nav-links a:hover::after,
 .nav-links a.active::after {
     transform: scaleX(1);
 }

 .nav-links a.active {
     color: #fff;
     background-color: #333;
 }

 .nav-actions {
     display: flex;
     align-items: center;
     gap: 6px;
 }

 .menu-socials {
     display: none;
     align-items: center;
     gap: 4px;
 }

 @media (min-width: 640px) {
     .menu-socials {
         display: flex;
     }
 }

 .menu-social {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 34px;
     height: 34px;
     border-radius: 50%;
     color: #FED927;
     transition: all 0.2s;
 }

 .menu-social:hover {
     background: var(--brand-600);
     color: #fff;
 }

 .menu-toggle {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border: none;
     background: transparent;
     color: #fff;
     border-radius: 8px;
     cursor: pointer;
     transition: background 0.2s;
 }

 .menu-toggle:hover {
     background: rgba(255, 255, 255, 0.1);
 }

 @media (min-width: 1024px) {
     .menu-toggle {
         display: none;
     }
 }

 .mobile-menu {
     overflow: hidden;
     max-height: 0;
     opacity: 0;
     background: var(--ink-900);
     transition: max-height 0.3s, opacity 0.3s;
 }

 .mobile-menu.open {
     max-height: 400px;
     opacity: 1;
 }

 .mobile-menu ul {
     padding: 12px 16px;
     display: flex;
     flex-direction: column;
     gap: 4px;
 }

 @media (min-width: 640px) {
     .mobile-menu ul {
         padding: 12px 24px;
     }
 }

 .mobile-menu a {
     display: block;
     padding: 10px 12px;
     border-radius: 8px;
     font-size: 14px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.8);
     transition: all 0.2s;
 }

 .mobile-menu a:hover {
     background: rgba(255, 255, 255, 0.1);
     color: #fff;
 }

 .mobile-menu .btn-rates-mobile {
     background: var(--brand-600);
     color: #fff;
     text-align: center;
     margin-top: 4px;
 }

 /* ============ HERO ============ */
 .hero {
     position: relative;
     overflow: hidden;
     background: #f4f7f6;
 }

 .hero__bg {
     position: absolute;
     inset: 0;
     background: url("../images/moneyback7.png") center / cover no-repeat;
     opacity: 0.75;
 }

 /* .hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(to bottom right,
             rgba(5, 15, 31, 0.55),
             rgba(5, 15, 31, 0.35) 40%,
             rgba(11, 27, 50, 0.5));
 } */
 .hero__overlay {
     position: absolute;
     inset: 0;
     background: linear-gradient(115deg,
             rgba(244, 247, 246, 0.88) 0%,
             rgba(244, 247, 246, 0.86) 35%,
             rgba(244, 247, 246, 0.38) 100%);
 }
 .hero__glow-1 {
     position: absolute;
     left: -128px;
     top: 25%;
     width: 288px;
     height: 288px;
     border-radius: 50%;
     background: rgba(254,217,39, 0.2);
     filter: blur(80px);
 }

 .hero__glow-2 {
     position: absolute;
     right: -96px;
     bottom: 0;
     width: 320px;
     height: 320px;
     border-radius: 50%;
     background: rgba(4, 120, 87, 0.2);
     filter: blur(80px);
 }

 .hero__inner {
     position: relative;
     display: grid;
     gap: 48px;
     align-items: center;
     padding: 14px 10px 80px;
 }

 @media (min-width: 1024px) {
     .hero__inner {
         grid-template-columns: 1.05fr 1fr;
         padding: 44px 10px 30px;

         /* padding: 96px 0 112px; */
     }

 }

 .badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border: 1px solid rgba(52, 211, 153, 0.3);
     background: rgba(16, 185, 129, 0.1);
     padding: 6px 12px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 600;
     color: var(--brand-300);
 }

 .badge__dot {
     position: relative;
     display: flex;
     width: 8px;
     height: 8px;
 }

 .badge__dot::before {
     content: "";
     position: absolute;
     inset: 0;
     border-radius: 50%;
     background: var(--brand-400);
     animation: ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite;
     opacity: 0.75;
 }

 .badge__dot::after {
     content: "";
     position: relative;
     display: flex;
     width: 8px;
     height: 8px;
     border-radius: 50%;
     background: var(--brand-400);
 }

 @keyframes ping {

     75%,
     100% {
         transform: scale(2);
         opacity: 0;
     }
 }

 .hero__title {
     margin-top: 20px;
     font-size: 40px;
     font-weight: 800;
     line-height: 1.1;
     letter-spacing: -0.02em;
     color: var(--ink-900);
     text-wrap: balance;
 }

 @media (min-width: 640px) {
     .hero__title {
         font-size: 48px;
     }
 }

 @media (min-width: 1024px) {
     .hero__title {
         font-size: 50px;
     }
 }

 .hero__title span {
     background: linear-gradient(to right, var(--brand-300), var(--brand-400));
     -webkit-background-clip: text;
     background-clip: text;
     -webkit-text-fill-color: transparent;
 }

 .hero__desc {
     margin-top: 20px;
     max-width: 500px;
     font-size: 18px;
     line-height: 1.6;
     color: var(--ink-900);
 }

 .hero__cta {
     margin-top: 32px;
     display: flex;
     flex-wrap: wrap;
     gap: 12px;
 }

 .btn-primary {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--brand-500);
     color: var(--brand-700);
     padding: 12px 20px;
     border-radius: 12px;
     font-size: 14px;
     font-weight: 600;
     box-shadow: 0 0 0 1px rgba(16, 185, 129, 0.15),
         0 12px 32px -8px rgba(16, 185, 129, 0.25);
     transition: all 0.2s;
 }

 .btn-primary:hover {
     background: var(--brand-400);
 }

 .btn-primary svg {
     transition: transform 0.2s;
 }

 .btn-primary:hover svg {
     transform: translateX(2px);
 }

 .btn-ghost {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     border: 1px solid var(--ink-700);
     background: rgba(255, 255, 255, 0.05);
     backdrop-filter: blur(8px);
     color: #fff;
     padding: 12px 20px;
     border-radius: 12px;
     font-size: 14px;
     font-weight: 600;
     transition: background 0.2s;
 }

 .btn-ghost:hover {
     background: rgba(255, 255, 255, 0.1);
 }

 .trust-badges {
     margin-top: 40px;
     display: flex;
     flex-wrap: wrap;
     gap: 12px 24px;
 }

 .trust-badge {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     font-size: 14px;
     font-weight: 500;
     color: var(--ink-500);
 }

 .trust-badge svg {
     color: var(--brand-500);
 }

 /* Rates card */
 /* .rates-card {
     border: 1px solid rgba(255, 255, 255, 0.1);
     background: rgba(255, 255, 255, 0.06);
     backdrop-filter: blur(20px);
     border-radius: 16px;
     padding: 6px;
     box-shadow: 0 1px 3px rgba(11, 27, 50, 0.05),
         0 20px 40px -12px rgba(11, 27, 50, 0.12);
 } */
  .rates-card {
      border: 1px solid rgba(255, 255, 255, 0.5);
      background: rgba(255, 255, 255, 0.60);
      backdrop-filter: blur(4px) saturate(1.4);
      -webkit-backdrop-filter: blur(20px) saturate(1.4);
      border-radius: 16px;
      padding: 6px;
      box-shadow: 0 1px 3px rgba(11, 27, 50, 0.06),
          0 24px 48px -16px rgba(11, 27, 50, 0.18);
  }

 /* .rates-card__header {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 16px 20px;
     background: rgba(255, 255, 255, 0.05);
     border-radius: 12px;
 } */

 /* .rates-card__title {
     font-size: 16px;
     font-weight: 700;
     color: #fff;
 } */

  .rates-card__header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      background: var(--ink-100);
      border-radius: 12px;
  }

  .rates-card__title {
      font-size: 16px;
      font-weight: 700;
      color: var(--ink-900);
  }

 .rates-card__sub {
     font-size: 12px;
     color: var(--ink-500);
     margin-top: 2px;
 }

 .live-pill {
     display: flex;
     align-items: center;
     gap: 6px;
     background: rgba(16, 185, 129, 0.15);
     padding: 4px 10px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 600;
     color: var(--brand-800);
 }

 .live-pill__dot {
     width: 6px;
     height: 6px;
     border-radius: 50%;
     background: var(--brand-500);
     animation: pulse-soft 2s ease-in-out infinite;
 }

 @keyframes pulse-soft {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.45;
     }
 }

 .rates-table {
     width: 100%;
     text-align: left;
     font-size: 14px;
     border-collapse: collapse;
 }

 .rates-table th {
     font-size: 12px;
     text-transform: uppercase;
     letter-spacing: 0.05em;
     color: var(--ink-500);
     font-weight: 600;
     padding: 12px 20px;
 }

 .rates-table th:nth-child(2) {
     text-align: right;
     padding-left: 12px;
 }

 .rates-table th:nth-child(3) {
     text-align: right;
 }

 /* .rates-table td {
     padding: 14px 20px;
     border-top: 1px solid rgba(255, 255, 255, 0.05);
 } */

 .rates-table td {
     padding: 8px 20px;
     border-top: 1px solid var(--ink-200);
 }

 .rates-table tbody tr {
     transition: background 0.2s;
 }

 .rates-table tbody tr:hover {
     /* background: rgba(255, 255, 255, 0.04); */
            background: var(--ink-50);
 }

 .rates-table td:nth-child(2) {
     text-align: right;
     padding-left: 12px;
 }

 .rates-table td:nth-child(3) {
     text-align: right;
 }

 .cur-cell {
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .cur-flag {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 28px;
     height: 28px;
     border-radius: 50%;
     background: rgba(255, 255, 255, 0.1);
     font-size: 20px;
 }

 .cur-code {
     font-weight: 600;
     color: var(--ink-900);
 }

 .cur-name {
     font-size: 11px;
     color: var(--ink-600);
 }

 .rate-buy {
     font-family: "Inter", sans-serif;
     font-weight: 500;
     color: var(--brand-300);
 }

 .rate-sell {
     font-family: "Inter", sans-serif;
     font-weight: 500;
     color: var(--ink-800);
 }

 .skeleton {
     background: rgba(255, 255, 255, 0.1);
     border-radius: 4px;
     animation: skel 1.5s ease-in-out infinite;
 }

 @keyframes skel {

     0%,
     100% {
         opacity: 1;
     }

     50% {
         opacity: 0.5;
     }
 }

 .rates-card__footer {
     display: flex;
     align-items: center;
     justify-content: space-between;
     padding: 12px 20px;
     font-size: 12px;
     color: var(--ink-400);
 }

 .rates-card__footer a {
     display: inline-flex;
     align-items: center;
     gap: 4px;
     font-weight: 600;
     color: var(--brand-300);
     transition: color 0.2s;
 }

 .rates-card__footer a:hover {
     color: var(--brand-200);
 }

 /* Wave divider */
 .wave {
     position: relative;
     line-height: 0;
 }

 .wave svg {
     width: 100%;
     height: 48px;
     color: #fff;
 }

 @media (min-width: 640px) {
     .wave svg {
         height: 63px;
     }
 }

 /* ============ WELCOME ============ */
 .welcome {
     padding: 20px 0;
     background: #fff;
 }

 @media (min-width: 1024px) {
     .welcome {
         padding: 32px 0 84px;
     }

 }

 .welcome__grid {
     display: grid;
     gap: 48px;
     align-items: center;
 }

 @media (min-width: 1024px) {
     .welcome__grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 .welcome__images {
     position: relative;
     display: none;
 }

 @media (min-width: 1024px) {
     .welcome__images {
         display: block;
     }
 }

 .welcome__img-main {
     border-radius: 20px;
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(11, 27, 50, 0.05),
         0 20px 40px -12px rgba(11, 27, 50, 0.12);
 }

 .welcome__img-main img {
     width: 100%;
     height: 500px;
     object-fit: cover;
 }

 .welcome__img-float {
     position: absolute;
     bottom: -24px;
     right: -24px;
     width: 200px;
     border-radius: 16px;
     overflow: hidden;
     border: 4px solid #fff;
     box-shadow: 0 12px 32px -8px rgba(11, 27, 50, 0.2);
 }

 .welcome__img-float img {
     width: 100%;
     height: 140px;
     object-fit: cover;
 }

 .welcome__badge {
     position: absolute;
     top: 24px;
     right: -20px;
     background: #fff;
     border-radius: 14px;
     padding: 14px 18px;
     box-shadow: 0 8px 24px -8px rgba(11, 27, 50, 0.15);
     display: flex;
     align-items: center;
     gap: 12px;
 }

 .welcome__badge-icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 44px;
     height: 44px;
     border-radius: 12px;
     background: var(--brand-50);
     color: var(--brand-600);
 }

 .welcome__badge-num {
     font-size: 22px;
     font-weight: 800;
     color: var(--ink-900);
     line-height: 1;
 }

 .welcome__badge-label {
     font-size: 12px;
     color: var(--ink-500);
     margin-top: 2px;
 }

 .section-tag {
     display: inline-flex;
     align-items: center;
     gap: 6px;
    background: rgba(254, 217, 39, 0.2);
        color: var(--brand-900);
     padding: 6px 12px;
     border-radius: 999px;
     font-size: 12px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .welcome__title {
     margin-top: 16px;
     font-size: 32px;
     font-weight: 800;
     line-height: 1.15;
     letter-spacing: -0.02em;
     color: var(--ink-900);
 }

 @media (min-width: 640px) {
     .welcome__title {
         font-size: 40px;
     }
 }

 .welcome__title span {
     /* color: var(--brand-600); */
 }

 .welcome__desc {
     margin-top: 20px;
     font-size: 16px;
     line-height: 1.7;
     color: var(--ink-600);
 }

 .welcome__features {
     margin-top: 28px;
     display: grid;
     gap: 16px;
 }

 @media (min-width: 640px) {
     .welcome__features {
         grid-template-columns: 1fr 1fr;
     }
 }

 .feature {
     display: flex;
     gap: 12px;
     align-items: flex-start;
 }

 .feature__icon {
     flex-shrink: 0;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     border-radius: 10px;
     background: var(--brand-50);
     color: var(--brand-600);
 }

 .feature__title {
     font-size: 15px;
     font-weight: 700;
     color: var(--ink-900);
 }

 .feature__desc {
     font-size: 14px;
     color: var(--ink-500);
     margin-top: 2px;
 }

 .welcome__cta {
     margin-top: 32px;
 }

 .btn-dark {
     display: inline-flex;
     align-items: center;
     gap: 8px;
     background: var(--ink-900);
     color: #fff;
     padding: 12px 20px;
     border-radius: 12px;
     font-size: 14px;
     font-weight: 600;
     transition: all 0.2s;
 }

 .btn-dark:hover {
     background: var(--ink-800);
 }

 .btn-dark svg {
     transition: transform 0.2s;
 }

 .btn-dark:hover svg {
     transform: translateX(2px);
 }

 /* ============ SERVICES ============ */
 .services {
     padding: 30px 0;
     background: var(--ink-50);
 }

 @media (min-width: 1024px) {
     .services {
         padding: 52px 0;
     }
 }

 .section-head {
     text-align: center;
     max-width: 640px;
     margin: 0 auto;
 }

 .section-title {
     margin-top: 14px;
     font-size: 30px;
     font-weight: 800;
     line-height: 1.15;
     letter-spacing: -0.02em;
     color: var(--ink-900);
 }

 @media (min-width: 640px) {
     .section-title {
         font-size: 38px;
     }
 }

 .section-desc {
     margin-top: 14px;
     font-size: 16px;
     line-height: 1.6;
     color: var(--ink-500);
 }

 .services__grid {
     margin-top: 36px;
     display: grid;
     gap: 24px;
 }

 .services__grid2 {
     margin-top: 36px;
     display: grid;
     gap: 24px;
 }

 @media (min-width: 640px) {
     .services__grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .services__grid {
         grid-template-columns: repeat(3, 1fr);
     }

     .services__grid2 {
         grid-template-columns: repeat(5, 1fr);
     }
 }

 .service-card {
     background: #fff;
     /* border-radius: 20px; */
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(11, 27, 50, 0.05);
     transition: all 0.3s;
 }

 .service-card2 {
     background: #fff;
     /* border-radius: 20px; */
     overflow: hidden;
     box-shadow: 0 1px 3px rgba(11, 27, 50, 0.05);
     transition: all 0.3s;
 }

 .service-card:hover {
     box-shadow: 0 1px 3px rgba(11, 27, 50, 0.05),
         0 20px 40px -12px rgba(11, 27, 50, 0.15);
     transform: translateY(-4px);
 }

 .service-card__img {
     position: relative;
     overflow: hidden;
     height: 142px;
 }

 .service-card__img2 {
     position: relative;
     overflow: hidden;
     border: 1px solid #e0e0e0;
     /* height: 200px; */
 }

 .service-card__img img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s;
 }

 .service-card__img2 img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     transition: transform 0.4s;
 }

 .service-card:hover .service-card__img img {
     transform: scale(1.05);
 }

 .service-card__icon {
     position: absolute;
     bottom: -20px;
     left: 24px;
     display: flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
     border-radius: 14px;
     background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
     color: #fff;
     box-shadow: 0 8px 20px -6px rgba(16, 185, 129, 0.4);
 }

 .service-card__body {
     padding: 32px 24px 24px;
 }

 .service-card__title {
     font-size: 18px;
     font-weight: 700;
     color: var(--ink-900);
 }

 .service-card__desc {
     margin-top: 8px;
     font-size: 14px;
     line-height: 1.6;
     color: var(--ink-500);
 }

 .service-card__link {
     margin-top: 16px;
     display: inline-flex;
     align-items: center;
     gap: 6px;
     font-size: 14px;
     font-weight: 600;
     color: var(--brand-600);
     transition: color 0.2s;
 }

 .service-card__link:hover {
     color: var(--brand-700);
 }

 .service-card__link svg {
     transition: transform 0.2s;
 }

 .service-card__link:hover svg {
     transform: translateX(2px);
 }

 /* ============ FOOTER ============ */
 .footer {
     background: var(--ink-950);
     color: var(--ink-300);
     padding: 34px 0 0;
 }

 .footer__grid {
     display: grid;
     gap: 40px;
 }

 @media (min-width: 640px) {
     .footer__grid {
         grid-template-columns: 1.5fr 1fr 1fr;
     }
 }

 @media (min-width: 1024px) {
     .footer__grid {
         grid-template-columns: 1.5fr 1.5fr 1fr 1fr;
     }
 }

 .footer__brand .logo__name {
     color: #fff;
 }

 .footer__about {
     margin-top: 16px;
     font-size: 14px;
     line-height: 1.7;
     max-width: 320px;
 }

 .footer__socials {
     margin-top: 20px;
     display: flex;
     gap: 8px;
 }

 .footer__social {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 36px;
     height: 36px;
     border-radius: 10px;
     background: rgba(255, 255, 255, 0.05);
     color: var(--ink-300);
     transition: all 0.2s;
 }

 .footer__social:hover {
     background: rgba(16, 185, 129, 0.15);
     color: var(--brand-400);
 }

 .footer__col-title {
     font-size: 14px;
     font-weight: 700;
     color: #fff;
     text-transform: uppercase;
     letter-spacing: 0.05em;
 }

 .footer__col ul {
     margin-top: 16px;
     display: flex;
     flex-direction: column;
     gap: 10px;
 }

 .footer__col a {
     font-size: 14px;
     color: var(--ink-300);
     transition: color 0.2s;
 }

 .footer__col a:hover {
     color: var(--brand-300);
 }

 .footer__contact-item {
     display: flex;
     align-items: flex-start;
     gap: 10px;
     font-size: 14px;
     color: var(--ink-300);
 }

 .footer__contact-item svg {
     color: var(--brand-500);
     flex-shrink: 0;
     margin-top: 2px;
 }

  .buddu .footer__contact-item svg {
      color: #D54447;

  }

 

 .footer__bottom {
     margin-top: 48px;
     border-top: 1px solid rgba(255, 255, 255, 0.08);
     padding: 24px 0;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: space-between;
     gap: 8px;
     font-size: 14px;
     color: var(--ink-300);
 }

 @media (min-width: 640px) {
     .footer__bottom {
         flex-direction: row;
     }
 }

 .footer__bottom a {
     color: var(--brand-400);
 }

 /* ============ CURRENCY TICKER ============ */
 .ticker {
     display: flex;
     align-items: center;
     gap: 10px;
     margin-bottom: 20px;
 }

 .ticker__viewport {
     position: relative;
     height: 28px;
     overflow: hidden;
     flex: 1;
 }

 .ticker__slide {
     position: absolute;
     inset: 0;
     display: flex;
     align-items: center;
     gap: 10px;
     opacity: 0;
     transform: translateY(6px);
     transition: opacity 0.6s ease, transform 0.6s ease;
 }

 .ticker__slide.is-active {
     opacity: 1;
     transform: translateY(0);
 }

 .ticker__flag {
     font-size: 30px;
     line-height: 1;
 }

 .ticker__code {
     font-family: "Inter", sans-serif;
     font-size: 20px;
     font-weight: 700;
     color: var(--brand-400);
     letter-spacing: 0.02em;
 }

 .ticker__name {
     font-size: 20px;
     font-weight: 500;
     color: var(--ink-600);
 }

 .ticker__dot {
     width: 4px;
     height: 4px;
     border-radius: 50%;
     background: var(--brand-400);
     flex-shrink: 0;
 }

 .ticker__label {
     font-size: 14px;
     font-weight: 600;
     /* text-transform: uppercase; */
     letter-spacing: 0.08em;
     color: var(--ink-400);
     white-space: nowrap;
 }

 /* ============ ANIMATIONS ============ */
 @keyframes fade-up {
     from {
         opacity: 0;
         transform: translateY(12px);
     }

     to {
         opacity: 1;
         transform: translateY(0);
     }
 }

 .fade-up {
     animation: fade-up 0.6s ease-out both;
 }

 .fade-up-delay {
     animation: fade-up 0.6s ease-out 0.12s both;
 }


 /* ============ VISION & MISSION ============ */
 .vm {
     padding: 30px 0;
     /* background: var(--ink-950); */
     background: var(--ink-50);
     position: relative;
     overflow: hidden;
 }

 @media (min-width: 1024px) {
     .vm {
         padding: 32px 0 52px;
     }
 }

 .vm__glow {
     position: absolute;
     left: 50%;
     top: 0;
     transform: translateX(-50%);
     width: 600px;
     height: 400px;
     border-radius: 50%;
     /* background: rgba(16, 185, 129, 0.08); */
    background: rgba(254, 217, 39, 0.05);
     filter: blur(100px);
     pointer-events: none;
 }

 .vm__grid {
     position: relative;
     display: grid;
     gap: 24px;
 }

 @media (min-width: 768px) {
     .vm__grid {
         grid-template-columns: 1fr 1fr;
     }
 }

 .vm__card {
     /* border: 1px solid rgba(255, 255, 255, 0.08);
     background: rgba(255, 255, 255, 0.03); */
    border: 1px solid var(--ink-100);
    background: #fff;
     border-radius: 20px;
     padding: 40px 32px;
     transition: all 0.3s;
    gap: 16px;
        display: flex;
        flex-direction: column;
 }

 .vm__card:hover {
     /* border-color: rgba(52, 211, 153, 0.25);
     background: rgba(255, 255, 255, 0.05); */
    background: #fff;
    box-shadow: 0 1px 3px rgba(11, 27, 50, 0.05),
            0 8px 24px -6px rgba(254, 217, 39, 0.2);
     transform: translateY(-4px);
 }

 .vm__icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 56px;
     height: 56px;
     border-radius: 16px;
     background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
     color: #fff;
     box-shadow: 0 8px 24px -6px rgba(254, 217, 39, 0.2);
 }

 .vm__label {
     /* margin-top: 24px; */
     font-size: 14px;
     font-weight: 600;
     text-transform: uppercase;
     letter-spacing: 0.12em;
     color: var(--accent-500);
 }

 .vm__title {
     margin-top: 8px;
     font-size: 26px;
     font-weight: 800;
     line-height: 1.2;
     letter-spacing: -0.02em;
     /* color: #fff; */
    color: var(--ink-900);
 }

 @media (min-width: 640px) {
     .vm__title {
         font-size: 30px;
     }
 }

 .vm__desc {
     /* margin-top: 10px; */
     font-size: 14px;
     line-height: 1.7;
     /* color: var(--ink-100); */
    color: var(--ink-500);
 }

 /* ============ VALUES ============ */
 .values {
     padding: 80px 0;
     background: #fff;
 }

 @media (min-width: 1024px) {
     .values {
         padding: 32px 0 52px;
     }
 }

 .values__grid {
     margin-top: 36px;
     display: grid;
     gap: 20px;
 }

 @media (min-width: 640px) {
     .values__grid {
         grid-template-columns: repeat(2, 1fr);
     }
 }

 @media (min-width: 1024px) {
     .values__grid {
         grid-template-columns: repeat(5, 1fr);
     }
 }

 .value-card {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 16px;
     padding: 28px 24px;
     border-radius: 16px;
     background: var(--ink-50);
     border: 1px solid var(--ink-100);
     transition: all 0.3s;
 }

 .value-card:hover {
     background: #fff;
     border-color: var(--brand-200);
     box-shadow: 0 1px 3px rgba(11, 27, 50, 0.05),
         0 12px 28px -10px rgba(16, 185, 129, 0.15);
     transform: translateY(-4px);
 }

 .value-card__icon {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 48px;
     height: 48px;
     border-radius: 14px;
     background: var(--brand-50);
     color: var(--brand-600);
     flex-shrink: 0;
     transition: all 0.3s;
 }

 .value-card .value-card__icon {
     background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
     color: #fff;
     box-shadow: 0 8px 24px -6px rgba(254, 217, 39, 0.2);
 }

 .value-card__text {
     font-size: 15px;
     font-weight: 600;
     line-height: 1.5;
     color: var(--ink-800);
 }

  /* ============ GALLERY ============ */
  .gallery {
      padding: 30px 0 50px;
      background: #fff;
  }

  @media (min-width: 1024px) {
      .gallery {
          padding: 32px 0 52px;
      }
  }

  .gallery__head {
      text-align: center;
      max-width: 640px;
      margin: 0 auto;
  }

  .gallery__scroll {
      margin-top: 28px;
      position: relative;
  }

  .gallery__track-wrap {
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      scroll-behavior: smooth;
      -ms-overflow-style: none;
  }

  .gallery__track-wrap::-webkit-scrollbar {
      display: none;
  }

  .gallery__arrow {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      z-index: 2;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.9);
      backdrop-filter: blur(8px);
      box-shadow: 0 2px 8px rgba(11, 27, 50, 0.12),
          0 12px 24px -8px rgba(11, 27, 50, 0.15);
      color: var(--ink-700);
      cursor: pointer;
      transition: opacity 0.3s, transform 0.2s, box-shadow 0.2s;
  }

  .gallery__arrow:hover {
      background: #fff;
      box-shadow: 0 2px 8px rgba(11, 27, 50, 0.15),
          0 16px 32px -8px rgba(11, 27, 50, 0.2);
  }

  .gallery__arrow:active {
      transform: translateY(-50%) scale(0.92);
  }

  .gallery__arrow--prev {
      left: -10px;
  }

  .gallery__arrow--next {
      right: -10px;
  }

  .gallery__arrow.hidden {
      opacity: 0;
      pointer-events: none;
  }

  @media (max-width: 640px) {
      .gallery__arrow {
          width: 36px;
          height: 36px;
      }

           .ticker__name {
               font-size: 14px;
           }

      .gallery__arrow--prev {
          left: -4px;
      }

      .gallery__arrow--next {
          right: -4px;
      }
  }

  .gallery__track {
      display: flex;
      gap: 16px;
      padding: 4px;
  }

  .gallery__item {
      position: relative;
      flex: 0 0 calc((100% - 64px) / 5);
      height: 220px;
      border-radius: 16px;
      overflow: hidden;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(11, 27, 50, 0.06);
      transition: box-shadow 0.3s, transform 0.3s;
  }

  .gallery__item:hover {
      box-shadow: 0 1px 3px rgba(11, 27, 50, 0.06),
          0 20px 40px -12px rgba(11, 27, 50, 0.18);
      transform: translateY(-4px);
  }

  .gallery__item img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.4s;
  }

  .gallery__item:hover img {
      transform: scale(1.06);
  }

  .gallery__item::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(to top,
              rgba(11, 27, 50, 0.35) 0%,
              transparent 45%);
      opacity: 0;
      transition: opacity 0.3s;
  }

  .gallery__item:hover::after {
      opacity: 1;
  }

  .gallery__zoom {
      position: absolute;
      top: 12px;
      right: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      border-radius: 10px;
      background: rgba(255, 255, 255, 0.85);
      backdrop-filter: blur(6px);
      color: var(--ink-800);
      opacity: 0;
      transform: scale(0.85);
      transition: opacity 0.3s, transform 0.3s;
      z-index: 1;
  }

  .gallery__item:hover .gallery__zoom {
      opacity: 1;
      transform: scale(1);
  }

  @media (max-width: 1280px) {
      .gallery__item {
          flex-basis: calc((100% - 48px) / 4);
      }
  }

  @media (max-width: 1024px) {
      .gallery__item {
          flex-basis: calc((100% - 32px) / 3);
      }
  }

  @media (max-width: 640px) {
      .gallery__item {
          flex-basis: calc((100% - 16px) / 2);
          height: 180px;
      }
  }

  /* ============ LIGHTBOX ============ */
  .lightbox {
      position: fixed;
      inset: 0;
      z-index: 100;
      display: none;
      align-items: center;
      justify-content: center;
      background: rgba(11, 27, 50, 0.82);
      backdrop-filter: blur(8px);
      padding: 24px;
  }

  .lightbox.open {
      display: flex;
      animation: lb-fade 0.25s ease-out;
  }

  @keyframes lb-fade {
      from {
          opacity: 0;
      }

      to {
          opacity: 1;
      }
  }

  .lightbox__img {
      max-width: 90vw;
      max-height: 82vh;
      border-radius: 16px;
      box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.5);
      animation: lb-zoom 0.3s ease-out;
  }

  @keyframes lb-zoom {
      from {
          transform: scale(0.92);
          opacity: 0;
      }

      to {
          transform: scale(1);
          opacity: 1;
      }
  }

  .lightbox__close {
      position: absolute;
      top: 20px;
      right: 20px;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.15);
      color: #fff;
      cursor: pointer;
      transition: background 0.2s;
  }

  .lightbox__close:hover {
      background: rgba(255, 255, 255, 0.28);
  }

  .lightbox__nav {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      align-items: center;
      justify-content: center;
      width: 48px;
      height: 48px;
      border: none;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.12);
      color: #fff;
      cursor: pointer;
      transition: background 0.2s;
  }

  .lightbox__nav:hover {
      background: rgba(255, 255, 255, 0.25);
  }

  .lightbox__nav--prev {
      left: 20px;
  }

  .lightbox__nav--next {
      right: 20px;
  }

  .lightbox__counter {
      position: absolute;
      bottom: 24px;
      left: 50%;
      transform: translateX(-50%);
      font-size: 14px;
      font-weight: 500;
      color: rgba(255, 255, 255, 0.8);
      background: rgba(255, 255, 255, 0.1);
      padding: 6px 16px;
      border-radius: 999px;
  }