.preloader {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100%;
       background: #0a0a0a;
       z-index: 99999;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-direction: column;
       transition: opacity .8s ease, visibility .8s ease
   }

   .preloader.hidden {
       opacity: 0;
       visibility: hidden
   }

   .preloader-logo {
       font-family: 'Playfair Display', serif;
       font-size: 2.5rem;
       font-weight: 700;
       color: #c9a96e;
       margin-bottom: 30px;
       animation: fadeInUp 1s ease
   }

   .preloader-bar {
       width: 200px;
       height: 2px;
       background: rgba(201, 169, 110, .2);
       border-radius: 10px;
       overflow: hidden
   }

   .preloader-bar::after {
       content: '';
       display: block;
       width: 0;
       height: 100%;
       background: linear-gradient(90deg, #c9a96e, #d4b87a);
       border-radius: 10px;
       animation: loading 2s ease-in-out forwards
   }

   @keyframes loading {
       0% {
           width: 0
       }

       100% {
           width: 100%
       }
   }

   @keyframes fadeInUp {
       0% {
           opacity: 0;
           transform: translateY(20px)
       }

       100% {
           opacity: 1;
           transform: translateY(0)
       }
   }

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

   html {
       scroll-behavior: smooth;
       overflow-x: hidden
   }

   body {
       font-family: 'Inter', sans-serif;
       background: #0a0a0a;
       color: #fff;
       overflow-x: hidden
   }

   ::-webkit-scrollbar {
       width: 8px
   }

   ::-webkit-scrollbar-track {
       background: #0a0a0a
   }

   ::-webkit-scrollbar-thumb {
       background: #c9a96e;
       border-radius: 10px
   }

   .navbar {
       transition: all .4s cubic-bezier(.4, 0, .2, 1)
   }

   .navbar.scrolled {
       background: rgba(10, 10, 10, .95) !important;
       backdrop-filter: blur(20px);
       box-shadow: 0 4px 30px rgba(0, 0, 0, .5);
       padding-top: .5rem !important;
       padding-bottom: .5rem !important
   }

   .nav-link {
       position: relative;
       transition: color .3s ease
   }

   .nav-link::after {
       content: '';
       position: absolute;
       bottom: -4px;
       left: 0;
       width: 0;
       height: 2px;
       background: #c9a96e;
       transition: width .3s ease
   }

   .nav-link:hover::after,
   .nav-link.active::after {
       width: 100%
   }

   .nav-link:hover,
   .nav-link.active {
       color: #c9a96e
   }

   .mobile-menu {
       position: fixed;
       top: 0;
       left: 0;
       width: 100%;
       height: 100vh;
       background: rgba(10, 10, 10, .98);
       backdrop-filter: blur(30px);
       z-index: 9998;
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       transform: translateX(100%);
       transition: transform .5s cubic-bezier(.4, 0, .2, 1);
       overflow-y: auto
   }

   .mobile-menu.open {
       transform: translateX(0)
   }

   .mobile-menu a {
       font-family: 'Playfair Display', serif;
       font-size: 1.8rem;
       color: #fff;
       text-decoration: none;
       padding: 15px 0;
       transition: color .3s ease, transform .3s ease;
       opacity: 0;
       transform: translateY(20px)
   }

   .mobile-menu.open a {
       opacity: 1;
       transform: translateY(0)
   }

   .mobile-menu.open a:nth-child(1) {
       transition-delay: .1s
   }

   .mobile-menu.open a:nth-child(2) {
       transition-delay: .15s
   }

   .mobile-menu.open a:nth-child(3) {
       transition-delay: .2s
   }

   .mobile-menu.open a:nth-child(4) {
       transition-delay: .25s
   }

   .mobile-menu.open a:nth-child(5) {
       transition-delay: .3s
   }

   .mobile-menu.open a:nth-child(6) {
       transition-delay: .35s
   }

   .mobile-menu.open a:nth-child(7) {
       transition-delay: .4s
   }

   .mobile-menu.open a:nth-child(8) {
       transition-delay: .45s
   }

   .mobile-menu a:hover {
       color: #c9a96e;
       transform: translateX(10px)
   }

   .hamburger {
       z-index: 9999;
       cursor: pointer;
       width: 30px;
       height: 24px;
       position: relative;
       display: flex;
       flex-direction: column;
       justify-content: space-between
   }

   .hamburger span {
       display: block;
       width: 100%;
       height: 2px;
       background: #fff;
       transition: all .4s cubic-bezier(.4, 0, .2, 1);
       border-radius: 2px
   }

   .hamburger.active span:nth-child(1) {
       transform: rotate(45deg) translate(8px, 8px);
       background: #c9a96e
   }

   .hamburger.active span:nth-child(2) {
       opacity: 0;
       transform: translateX(20px)
   }

   .hamburger.active span:nth-child(3) {
       transform: rotate(-45deg) translate(8px, -8px);
       background: #c9a96e
   }

   .page-hero {
       background: linear-gradient(135deg, rgba(10, 10, 10, .85) 0%, rgba(26, 26, 46, .7) 100%), url('https://images.unsplash.com/photo-1600585154526-990dced4db0d?w=1920&q=80') center/cover no-repeat;
       min-height: 50vh
   }

   .section-subtitle {
       letter-spacing: 4px;
       text-transform: uppercase;
       font-size: .75rem
   }

   .section-divider {
       width: 60px;
       height: 2px;
       background: linear-gradient(90deg, #c9a96e, #d4b87a)
   }

   .btn-primary {
       background: linear-gradient(135deg, #c9a96e, #d4b87a);
       color: #0a0a0a;
       transition: all .4s ease;
       position: relative;
       overflow: hidden
   }

   .btn-primary::before {
       content: '';
       position: absolute;
       top: 0;
       left: -100%;
       width: 100%;
       height: 100%;
       background: linear-gradient(135deg, #d4b87a, #e5cc9a);
       transition: left .4s ease;
       z-index: 0
   }

   .btn-primary:hover::before {
       left: 0
   }

   .btn-primary span {
       position: relative;
       z-index: 1
   }

   .btn-outline {
       border: 1px solid #c9a96e;
       color: #c9a96e;
       transition: all .4s ease
   }

   .btn-outline:hover {
       background: #c9a96e;
       color: #0a0a0a
   }

   .floating {
       animation: floating 6s ease-in-out infinite
   }

   @keyframes floating {

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

       50% {
           transform: translateY(-20px)
       }
   }

   .custom-cursor {
       width: 20px;
       height: 20px;
       border: 2px solid #c9a96e;
       border-radius: 50%;
       position: fixed;
       pointer-events: none;
       z-index: 99999;
       transition: transform .15s ease;
       transform: translate(-50%, -50%)
   }

   .custom-cursor.hover {
       transform: translate(-50%, -50%) scale(2);
       background: rgba(201, 169, 110, .1)
   }

   @media(max-width:768px) {
       .custom-cursor {
           display: none
       }
   }

   .back-to-top {
       opacity: 0;
       visibility: hidden;
       transition: all .4s ease
   }

   .back-to-top.visible {
       opacity: 1;
       visibility: visible
   }

   /* FEATURED TESTIMONIAL */
   .featured-testimonial {
       background: linear-gradient(145deg, rgba(42, 42, 58, .3), rgba(26, 26, 46, .5));
       border: 1px solid rgba(201, 169, 110, .15);
       border-radius: 4px;
       position: relative;
       overflow: hidden
   }

   .featured-testimonial::before {
       content: '';
       position: absolute;
       top: 0;
       left: 0;
       width: 4px;
       height: 100%;
       background: linear-gradient(180deg, #c9a96e, #d4b87a)
   }

   /* TESTIMONIAL CARD */
   .testimonial-card {
       background: linear-gradient(145deg, rgba(42, 42, 58, .2), rgba(26, 26, 46, .4));
       border: 1px solid rgba(201, 169, 110, .08);
       border-radius: 4px;
       transition: all .5s cubic-bezier(.4, 0, .2, 1);
       position: relative;
       overflow: hidden
   }

   .testimonial-card:hover {
       border-color: rgba(201, 169, 110, .3);
       transform: translateY(-8px);
       box-shadow: 0 25px 60px rgba(201, 169, 110, .08)
   }

   .testimonial-card .quote-icon {
       position: absolute;
       top: 1rem;
       right: 1.5rem;
       opacity: .08;
       transition: opacity .4s ease
   }

   .testimonial-card:hover .quote-icon {
       opacity: .15
   }

   /* RATING BAR */
   .rating-bar-fill {
       height: 8px;
       background: linear-gradient(90deg, #c9a96e, #d4b87a);
       border-radius: 10px;
       transition: width 1.5s cubic-bezier(.4, 0, .2, 1)
   }

   /* VIDEO TESTIMONIAL */
   .video-testimonial {
       position: relative;
       overflow: hidden;
       border-radius: 4px;
       cursor: pointer;
       transition: all .4s ease
   }

   .video-testimonial:hover {
       transform: translateY(-5px)
   }

   .video-testimonial img {
       transition: transform .6s ease
   }

   .video-testimonial:hover img {
       transform: scale(1.05)
   }

   .video-play {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       background: rgba(10, 10, 10, .4);
       transition: background .3s ease
   }

   .video-testimonial:hover .video-play {
       background: rgba(10, 10, 10, .6)
   }

   .play-btn-circle {
       width: 60px;
       height: 60px;
       background: rgba(201, 169, 110, .9);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       animation: pulse-ring 2s infinite;
       transition: all .3s ease
   }

   .video-testimonial:hover .play-btn-circle {
       transform: scale(1.1)
   }

   @keyframes pulse-ring {
       0% {
           box-shadow: 0 0 0 0 rgba(201, 169, 110, .5)
       }

       100% {
           box-shadow: 0 0 0 25px rgba(201, 169, 110, 0)
       }
   }

   /* SLIDER */
   .slider-container {
       overflow: hidden;
       position: relative
   }

   .slider-track {
       display: flex;
       transition: transform .6s cubic-bezier(.4, 0, .2, 1)
   }

   .slider-slide {
       min-width: 100%;
       padding: 0 10px
   }

   /* FILTER */
   .filter-btn {
       transition: all .3s ease;
       border: 1px solid rgba(201, 169, 110, .15);
       background: transparent;
       color: #9ca3af
   }

   .filter-btn:hover,
   .filter-btn.active {
       background: linear-gradient(135deg, #c9a96e, #d4b87a);
       color: #0a0a0a;
       border-color: #c9a96e
   }

   /* COUNTER */
   .counter-item {
       border-right: 1px solid rgba(201, 169, 110, .2)
   }

   .counter-item:last-child {
       border-right: none
   }

   @media(max-width:768px) {
       .counter-item {
           border-right: none;
           border-bottom: 1px solid rgba(201, 169, 110, .2)
       }

       .counter-item:last-child {
           border-bottom: none
       }
   }

   /* CTA */
   .cta-bg {
       background: linear-gradient(135deg, rgba(10, 10, 10, .85) 0%, rgba(26, 26, 46, .7) 100%), url('https://images.unsplash.com/photo-1600607687939-ce8a6c25118c?w=1920&q=80') center/cover no-repeat fixed
   }

   @media(max-width:768px) {
       .cta-bg {
           background-attachment: scroll
       }
   }

   @supports(-webkit-touch-callout:none) {
       .cta-bg {
           background-attachment: scroll
       }
   }

   /* LOGO WALL */
   .logo-item {
       filter: grayscale(100%) brightness(.6);
       transition: all .4s ease
   }

   .logo-item:hover {
       filter: grayscale(0%) brightness(1)
   }

   /* REVIEW FORM */
   .form-input {
       background: rgba(42, 42, 58, .3);
       border: 1px solid rgba(201, 169, 110, .1);
       transition: all .3s ease
   }

   .form-input:focus {
       border-color: rgba(201, 169, 110, .5);
       outline: none;
       box-shadow: 0 0 0 3px rgba(201, 169, 110, .1)
   }

   /* STAR RATING INPUT */
   .star-rating-input {
       display: flex;
       flex-direction: row-reverse;
       gap: 4px
   }

   .star-rating-input input {
       display: none
   }

   .star-rating-input label {
       cursor: pointer;
       color: #3a3a4a;
       transition: color .2s ease;
       font-size: 1.5rem
   }

   .star-rating-input input:checked~label,
   .star-rating-input label:hover,
   .star-rating-input label:hover~label {
       color: #c9a96e
   }

   /* MASONRY-LIKE LAYOUT */
   .masonry-card:nth-child(even) {
       margin-top: 2rem
   }

   @media(max-width:768px) {
       .masonry-card:nth-child(even) {
           margin-top: 0
       }
   }

   /* VIDEO MODAL */
   .video-modal {
       position: fixed;
       inset: 0;
       background: rgba(0, 0, 0, .95);
       z-index: 99998;
       display: flex;
       align-items: center;
       justify-content: center;
       opacity: 0;
       visibility: hidden;
       transition: all .4s ease
   }

   .video-modal.active {
       opacity: 1;
       visibility: visible
   }

   .video-modal-close {
       position: absolute;
       top: 1.5rem;
       right: 1.5rem;
       width: 48px;
       height: 48px;
       background: rgba(201, 169, 110, .2);
       border: 1px solid rgba(201, 169, 110, .3);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all .3s ease;
       z-index: 10
   }

   .video-modal-close:hover {
       background: #c9a96e
   }