html {
       -webkit-font-smoothing: antialiased;
   }

   body {
       font-family: 'Inter', sans-serif;
       letter-spacing: -0.011em;
   }

   ::selection {
       background: #dc2626;
       color: #fff;
   }

   ::-webkit-scrollbar {
       width: 10px;
       height: 10px;
   }

   ::-webkit-scrollbar-track {
       background: #fafaf9;
   }

   ::-webkit-scrollbar-thumb {
       background: #d6d3d1;
       border-radius: 99px;
       border: 2px solid #fafaf9;
   }

   ::-webkit-scrollbar-thumb:hover {
       background: #dc2626;
   }

   .reveal {
       opacity: 0;
       transform: translateY(20px);
       transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
   }

   .reveal.is-visible {
       opacity: 1;
       transform: none;
   }

   .nav-link {
       position: relative;
       color: #1c1917;
       font-weight: 500;
       transition: color .25s;
   }

   .nav-link::after {
       content: '';
       position: absolute;
       left: 0;
       right: 0;
       bottom: -14px;
       height: 2px;
       background: #dc2626;
       border-radius: 2px;
       transform: scaleX(0);
       transform-origin: left;
       transition: transform .3s cubic-bezier(.16, 1, .3, 1);
   }

   .nav-link:hover {
       color: #dc2626;
   }

   .nav-link:hover::after {
       transform: scaleX(1);
   }

   .nav-link.active {
       color: #dc2626;
       font-weight: 600;
   }

   .nav-link.active::after {
       transform: scaleX(1);
   }

   .text-balance {
       text-wrap: balance;
   }

   .hero-accent {
       color: #fca5a5;
   }

   .btn-brand {
       background-color: #dc2626;
       transition: background-color .25s, transform .15s, box-shadow .3s;
   }

   .btn-brand:hover {
       background-color: #b91c1c;
       box-shadow: 0 10px 30px -10px rgba(220, 38, 38, .45);
   }

   .btn-brand:active {
       transform: scale(.98);
   }

   .img-cover {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
   }

   .img-hover-zoom {
       overflow: hidden;
   }

   .img-hover-zoom img {
       transition: transform .8s cubic-bezier(.16, 1, .3, 1);
   }

   .group:hover .img-hover-zoom img {
       transform: scale(1.06);
   }

   .hero-bg {
       background-size: cover;
       background-position: center;
       background-attachment: fixed;
   }

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

   .grid-overlay {
       background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
       background-size: 60px 60px;
   }

   @keyframes scrollHint {

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

       50% {
           transform: translateY(8px);
           opacity: .5;
       }
   }

   .animate-scroll-hint {
       animation: scrollHint 2s ease-in-out infinite;
   }

   .img-slot {
       background: linear-gradient(110deg, #f5f5f4 8%, #e7e5e4 18%, #f5f5f4 33%);
       background-size: 200% 100%;
       animation: shimmer 1.6s linear infinite;
   }

   @keyframes shimmer {
       to {
           background-position-x: -200%;
       }
   }

   .img-slot img {
       opacity: 0;
       transition: opacity .5s;
   }

   .img-slot img.loaded {
       opacity: 1;
   }

   .img-fallback {
       display: flex;
       align-items: center;
       justify-content: center;
       background: linear-gradient(135deg, #fafaf9 0%, #f5f5f4 100%);
       color: #a8a29e;
   }

   .img-fallback svg {
       width: 32px;
       height: 32px;
   }

   /* PARTNERS */
   .site-container {
       max-width: 72rem;
       margin-left: auto;
       margin-right: auto;
       padding-left: 1.25rem;
       padding-right: 1.25rem;
   }

   @media (min-width: 640px) {
       .site-container {
           padding-left: 1.5rem;
           padding-right: 1.5rem;
       }
   }

   .partners {
       background: #fff;
       border-bottom: 1px solid #e7e5e4;
   }

   .partners-inner {
       display: flex;
       align-items: center;
       justify-content: center;
       flex-wrap: wrap;
       gap: 1.25rem 2.5rem;
       padding-top: 1.75rem;
       padding-bottom: 1.75rem;
   }

   @media (min-width: 1024px) {
       .partners-inner {
           gap: 1.5rem 3.5rem;
       }
   }

   .partner-label {
       font-size: 10.5px;
       font-weight: 700;
       letter-spacing: .16em;
       text-transform: uppercase;
       color: #a8a29e;
       line-height: 1.65;
       flex-shrink: 0;
       margin-right: .5rem;
   }

   .partner-label .font-semibold {
       color: #1c1917;
       text-transform: none;
       letter-spacing: 0;
       font-size: 12.5px;
       font-weight: 600;
   }

   .brand-word {
       display: inline-block;
       font-weight: 800;
       font-size: 15px;
       color: #57534e;
       letter-spacing: .005em;
       line-height: 1.15;
       opacity: .78;
       white-space: nowrap;
       transition: opacity .3s, color .3s, transform .3s;
   }

   .brand-word:hover {
       opacity: 1;
       color: #dc2626;
       transform: translateY(-1px);
   }

   .brand-word.midea {
       font-size: 20px;
       font-style: italic;
       letter-spacing: -.02em;
       color: #1c1917;
       font-weight: 800;
   }

   .brand-word.fuji {
       font-size: 14px;
       font-weight: 700;
       letter-spacing: .01em;
       line-height: 1.1;
       color: #44403c;
   }

   .brand-word.fuji .text-xs {
       display: inline-block;
       font-size: 8.5px;
       font-weight: 500;
       letter-spacing: .22em;
       color: #a8a29e;
       margin-top: 2px;
   }

   .brand-word.fuji:hover .text-xs {
       color: #dc2626;
   }

   .brand-word .gc {
       -webkit-text-stroke: 1px #78716c;
       color: transparent;
       font-weight: 900;
       letter-spacing: .015em;
       margin-left: 2px;
       transition: -webkit-text-stroke-color .3s;
   }

   .brand-word:hover .gc {
       -webkit-text-stroke-color: #dc2626;
   }

   @supports not (-webkit-text-stroke: 1px black) {
       .brand-word .gc {
           color: #78716c;
           -webkit-text-stroke: 0;
       }
   }

   .brand-word.text-base {
       font-size: 12.5px;
       font-weight: 700;
       letter-spacing: .06em;
       color: #57534e;
   }

   @media (max-width: 640px) {
       .partners-inner {
           gap: 1rem 1.75rem;
       }

       .partner-label {
           margin-right: 0;
           flex-basis: 100%;
       }

       .brand-word.midea {
           font-size: 18px;
       }

       .brand-word {
           font-size: 14px;
       }

       .brand-word.text-base {
           font-size: 11.5px;
       }
   }

   /* Product Card */
   .product-card {
       transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
   }

   .product-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 22px 35px -10px rgba(232, 78, 27, 0.16);
       border-color: rgba(232, 78, 27, 0.35);
   }


   /* ═══════════════════════════════════════════════════════════
     HERO UNIT BISNIS — BUBBLE CLUSTER (no hover effects)
     ═══════════════════════════════════════════════════════════ */
   .bubbles-panel {
       position: relative;
       padding: 2rem;
       border-radius: 2rem;
       background: rgba(255, 255, 255, .055);
       backdrop-filter: blur(20px);
       -webkit-backdrop-filter: blur(20px);
       border: 1px solid rgba(255, 255, 255, .14);
       box-shadow: 0 30px 80px -30px rgba(0, 0, 0, .6);
   }

   .bubbles-header {
       display: flex;
       align-items: center;
       justify-content: space-between;
       margin-bottom: 1.5rem;
       padding-bottom: 1rem;
       border-bottom: 1px solid rgba(255, 255, 255, .1);
   }

   .bubbles-title {
       font-size: 13px;
       font-weight: 600;
       color: #fff;
       display: flex;
       align-items: center;
       gap: .5rem;
   }

   .bubbles-title-dot {
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: #ef4444;
       box-shadow: 0 0 0 4px rgba(239, 68, 68, .22);
   }

   .bubbles-meta {
       font-size: 11.5px;
       font-weight: 500;
       color: rgba(255, 255, 255, .5);
   }

   /* Bubble grid — asymmetric cluster */
   .bubbles-grid {
       position: relative;
       display: grid;
       grid-template-columns: 1fr 1fr;
       gap: 1rem;
       min-height: 380px;
   }

   /* Orbit rings behind the bubbles */
   .bubbles-grid::before,
   .bubbles-grid::after {
       content: '';
       position: absolute;
       top: 50%;
       left: 50%;
       transform: translate(-50%, -50%);
       border: 1px dashed rgba(255, 255, 255, .09);
       border-radius: 9999px;
       pointer-events: none;
       animation: orbitSpin 40s linear infinite;
   }

   .bubbles-grid::before {
       width: 320px;
       height: 320px;
   }

   .bubbles-grid::after {
       width: 460px;
       height: 460px;
       animation-direction: reverse;
       animation-duration: 60s;
   }

   @keyframes orbitSpin {
       from {
           transform: translate(-50%, -50%) rotate(0deg);
       }

       to {
           transform: translate(-50%, -50%) rotate(360deg);
       }
   }

   /* Individual bubble — static, no hover */
   .bubble {
       position: relative;
       border-radius: 1.5rem;
       padding: 1.25rem;
       background: rgba(255, 255, 255, .07);
       border: 1px solid rgba(255, 255, 255, .14);
       backdrop-filter: blur(10px);
       overflow: hidden;
       min-height: 168px;
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       z-index: 1;
   }

   /* Bubble tag — small numbered badge */
   .bubble-tag {
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-size: 10px;
       font-weight: 800;
       letter-spacing: .14em;
       color: rgba(255, 255, 255, .5);
   }

   /* Icon sphere — static */
   .bubble-icon {
       width: 46px;
       height: 46px;
       border-radius: 9999px;
       display: flex;
       align-items: center;
       justify-content: center;
       flex-shrink: 0;
       background: #dc2626;
       border: 1px solid #dc2626;
       box-shadow: 0 8px 20px -8px rgba(220, 38, 38, .6);
   }

   .bubble-icon svg {
       width: 22px;
       height: 22px;
       color: #fff;
   }

   /* Name */
   .bubble-name {
       margin-top: .85rem;
       font-size: 14.5px;
       font-weight: 700;
       color: #fff;
       line-height: 1.25;
       letter-spacing: -.005em;
   }

   /* Details — always visible */
   .bubble-details {
       margin-top: .75rem;
   }

   .bubble-tagline {
       font-size: 11.5px;
       color: rgba(255, 255, 255, .62);
       line-height: 1.5;
       margin-bottom: .6rem;
   }

   .bubble-chips {
       display: flex;
       flex-wrap: wrap;
       gap: .35rem;
   }

   .bubble-chip {
       font-size: 9.5px;
       font-weight: 700;
       letter-spacing: .04em;
       padding: .25rem .5rem;
       border-radius: .35rem;
       background: rgba(255, 255, 255, .1);
       color: rgba(255, 255, 255, .85);
       border: 1px solid rgba(255, 255, 255, .14);
       white-space: nowrap;
   }

   /* Corner number badge — static red */
   .bubble-badge {
       position: absolute;
       top: 1rem;
       right: 1rem;
       padding: .22rem .55rem;
       border-radius: .35rem;
       font-size: 8.5px;
       font-weight: 800;
       letter-spacing: .1em;
       background: #dc2626;
       color: #fff;
       border: 1px solid #dc2626;
   }

   /* Status footer */
   .bubbles-footer {
       margin-top: 1.25rem;
       padding-top: 1rem;
       border-top: 1px solid rgba(255, 255, 255, .1);
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: .5rem;
       flex-wrap: wrap;
       font-size: 11.5px;
       color: rgba(255, 255, 255, .6);
   }

   .bubbles-footer .pulse-dot {
       width: 6px;
       height: 6px;
       border-radius: 9999px;
       background: #ef4444;
       position: relative;
       flex-shrink: 0;
   }

   .bubbles-footer .pulse-dot::before {
       content: '';
       position: absolute;
       inset: -3px;
       border-radius: 9999px;
       background: #ef4444;
       opacity: .4;
       animation: pulseRing 2s ease-out infinite;
   }

   @keyframes pulseRing {
       0% {
           transform: scale(.6);
           opacity: .7;
       }

       100% {
           transform: scale(2.2);
           opacity: 0;
       }
   }

   .bubbles-stat {
       display: inline-flex;
       align-items: baseline;
       gap: .25rem;
   }

   .bubbles-stat strong {
       color: #fff;
       font-weight: 800;
       font-size: 13px;
   }

   @media (max-width: 1024px) {
       .bubbles-grid {
           min-height: auto;
       }

       .bubbles-grid::before,
       .bubbles-grid::after {
           display: none;
       }
   }

   @media (max-width: 640px) {
       .bubbles-panel {
           padding: 1.5rem 1.25rem;
           border-radius: 1.5rem;
       }

       .bubble {
           min-height: auto;
           padding: 1.1rem;
           border-radius: 1.25rem;
       }

       .bubble-name {
           font-size: 13.5px;
           margin-top: .7rem;
       }
   }

   /* GALLERY */
   .gallery-wrap {
       position: relative;
   }

   .youtube-banner {
       display: flex;
       align-items: center;
       gap: 1.25rem;
       padding: 1.25rem 1.5rem;
       background: linear-gradient(135deg, #1c1917 0%, #292524 100%);
       border-radius: 1rem;
       margin-bottom: 2rem;
       flex-wrap: wrap;
   }

   .youtube-banner-icon {
       width: 48px;
       height: 48px;
       flex-shrink: 0;
       border-radius: .5rem;
       background: #FF0000;
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 8px 20px -6px rgba(255, 0, 0, .5);
   }

   .youtube-btn {
       display: inline-flex;
       align-items: center;
       gap: .5rem;
       padding: .7rem 1.15rem;
       border-radius: .55rem;
       background: #FF0000;
       color: #fff;
       font-size: 12.5px;
       font-weight: 600;
       white-space: nowrap;
       transition: all .25s;
       text-decoration: none;
   }

   .youtube-btn:hover {
       background: #cc0000;
       transform: translateY(-1px);
       box-shadow: 0 10px 22px -8px rgba(255, 0, 0, .6);
   }

   .youtube-btn svg {
       width: 14px;
       height: 14px;
   }

   .filter-pill {
       display: inline-flex;
       align-items: center;
       gap: .35rem;
       padding: .4rem .8rem;
       font-size: 11.5px;
       font-weight: 600;
       border-radius: 9999px;
       border: 1px solid #e7e5e4;
       background: #fff;
       color: #57534e;
       cursor: pointer;
       transition: all .25s;
       white-space: nowrap;
   }

   .filter-pill:hover {
       border-color: #fca5a5;
       color: #dc2626;
   }

   .filter-pill.active {
       background: #dc2626;
       border-color: #dc2626;
       color: #fff;
   }

   .filter-pill.active svg {
       color: #fff !important;
   }

   .gallery-scroll {
       display: flex;
       gap: 1rem;
       overflow-x: auto;
       overflow-y: hidden;
       padding-bottom: 1.25rem;
       scroll-snap-type: x mandatory;
       scroll-behavior: smooth;
       -webkit-overflow-scrolling: touch;
   }

   .gallery-scroll::-webkit-scrollbar {
       height: 8px;
   }

   .gallery-scroll::-webkit-scrollbar-track {
       background: #f5f5f4;
       border-radius: 99px;
   }

   .gallery-scroll::-webkit-scrollbar-thumb {
       background: #d6d3d1;
       border-radius: 99px;
   }

   .gallery-scroll::-webkit-scrollbar-thumb:hover {
       background: #dc2626;
   }

   .gallery-card {
       flex: 0 0 320px;
       scroll-snap-align: start;
       background: #fff;
       border: 1px solid #e7e5e4;
       border-radius: .9rem;
       overflow: hidden;
       cursor: pointer;
       transition: all .35s cubic-bezier(.16, 1, .3, 1);
       display: flex;
       flex-direction: column;
   }

   .gallery-card:hover {
       border-color: #fca5a5;
       transform: translateY(-3px);
       box-shadow: 0 16px 36px -14px rgba(220, 38, 38, .28);
   }

   @media (max-width: 640px) {
       .gallery-card {
           flex: 0 0 280px;
       }
   }

   .gallery-thumb {
       position: relative;
       aspect-ratio: 16/9;
       background: #1c1917;
       overflow: hidden;
   }

   .gallery-thumb img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       transition: transform .6s cubic-bezier(.16, 1, .3, 1);
   }

   .gallery-card:hover .gallery-thumb img {
       transform: scale(1.08);
   }

   .gallery-thumb-overlay {
       position: absolute;
       inset: 0;
       background: rgba(0, 0, 0, .25);
       transition: background .3s;
       z-index: 2;
   }

   .gallery-card:hover .gallery-thumb-overlay {
       background: rgba(0, 0, 0, .5);
   }

   .gallery-play {
       position: absolute;
       inset: 0;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 3;
       pointer-events: none;
   }

   .gallery-play-btn {
       width: 52px;
       height: 52px;
       border-radius: 9999px;
       background: #FF0000;
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       box-shadow: 0 10px 28px rgba(255, 0, 0, .55);
       transition: transform .25s cubic-bezier(.16, 1, .3, 1);
   }

   .gallery-play-btn svg {
       width: 20px;
       height: 20px;
       margin-left: 3px;
       fill: #fff;
   }

   .gallery-card:hover .gallery-play-btn {
       transform: scale(1.12);
   }

   .gallery-badge {
       position: absolute;
       top: .7rem;
       left: .7rem;
       z-index: 4;
       display: inline-flex;
       align-items: center;
       gap: .3rem;
       padding: .28rem .55rem;
       border-radius: .35rem;
       font-size: 9.5px;
       font-weight: 800;
       letter-spacing: .08em;
       background: rgba(255, 255, 255, .95);
       color: #1c1917;
       backdrop-filter: blur(4px);
   }

   .gallery-badge svg {
       width: 11px;
       height: 11px;
       color: #FF0000;
   }

   .gallery-ext {
       position: absolute;
       top: .7rem;
       right: .7rem;
       z-index: 4;
       width: 28px;
       height: 28px;
       border-radius: .35rem;
       background: rgba(0, 0, 0, .7);
       color: #fff;
       display: flex;
       align-items: center;
       justify-content: center;
       transition: background .25s;
       backdrop-filter: blur(4px);
       text-decoration: none;
   }

   .gallery-ext:hover {
       background: #dc2626;
   }

   .gallery-ext svg {
       width: 12px;
       height: 12px;
   }

   .gallery-body {
       padding: 1.05rem 1.15rem 1.15rem;
       display: flex;
       flex-direction: column;
       flex: 1;
   }

   .gallery-meta {
       display: flex;
       align-items: center;
       justify-content: space-between;
       font-size: 10px;
       font-weight: 800;
       letter-spacing: .08em;
       color: #dc2626;
   }

   .gallery-meta-right {
       display: inline-flex;
       align-items: center;
       gap: .3rem;
       color: #a8a29e;
       font-weight: 500;
       letter-spacing: 0;
   }

   .gallery-meta-right svg {
       width: 11px;
       height: 11px;
       color: #FF0000;
   }

   .gallery-title {
       margin-top: .55rem;
       font-size: 13.5px;
       font-weight: 700;
       color: #1c1917;
       line-height: 1.35;
   }

   .gallery-desc {
       margin-top: .35rem;
       font-size: 12px;
       color: #78716c;
       line-height: 1.55;
       flex: 1;
   }

   .gallery-actions {
       margin-top: 1rem;
       padding-top: .75rem;
       border-top: 1px solid #e7e5e4;
       display: flex;
       align-items: center;
       justify-content: space-between;
       gap: .5rem;
   }

   .gallery-btn {
       display: inline-flex;
       align-items: center;
       gap: .35rem;
       padding: .4rem .7rem;
       border-radius: .4rem;
       background: #f5f5f4;
       color: #1c1917;
       font-size: 11.5px;
       font-weight: 600;
       transition: all .2s;
       border: none;
       cursor: pointer;
   }

   .gallery-btn:hover {
       background: #dc2626;
       color: #fff;
   }

   .gallery-btn svg {
       width: 11px;
       height: 11px;
       fill: currentColor;
   }

   .gallery-link {
       display: inline-flex;
       align-items: center;
       gap: .25rem;
       font-size: 11px;
       font-weight: 600;
       color: #a8a29e;
       transition: color .2s;
       text-decoration: none;
   }

   .gallery-link:hover {
       color: #dc2626;
   }

   .gallery-link svg {
       width: 11px;
       height: 11px;
   }

   .gallery-empty {
       text-align: center;
       padding: 3rem 1rem;
       color: #a8a29e;
       font-size: 13.5px;
       font-weight: 500;
       width: 100%;
   }

   .gallery-arrows {
       display: flex;
       align-items: center;
       gap: .4rem;
   }

   .gallery-arrow {
       width: 32px;
       height: 32px;
       border-radius: .5rem;
       border: 1px solid #e7e5e4;
       background: #fff;
       color: #57534e;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       transition: all .25s;
   }

   .gallery-arrow:hover {
       border-color: #dc2626;
       color: #dc2626;
       background: #fef2f2;
   }

   .gallery-arrow svg {
       width: 14px;
       height: 14px;
   }

   .gallery-modal {
       position: fixed;
       inset: 0;
       z-index: 100;
       display: none;
       align-items: center;
       justify-content: center;
       padding: 1rem;
   }

   .gallery-modal.active {
       display: flex;
   }

   .gallery-modal-backdrop {
       position: absolute;
       inset: 0;
       background: rgba(12, 10, 9, .88);
       backdrop-filter: blur(8px);
       animation: fadeIn .25s;
   }

   @keyframes fadeIn {
       from {
           opacity: 0;
       }

       to {
           opacity: 1;
       }
   }

   @keyframes popIn {
       from {
           opacity: 0;
           transform: translateY(20px) scale(.96);
       }

       to {
           opacity: 1;
           transform: none;
       }
   }

   .gallery-modal-content {
       position: relative;
       background: #fff;
       border-radius: 1.1rem;
       max-width: 900px;
       width: 100%;
       max-height: 92vh;
       overflow: hidden;
       display: flex;
       flex-direction: column;
       animation: popIn .35s cubic-bezier(.16, 1, .3, 1);
       box-shadow: 0 40px 100px rgba(0, 0, 0, .55);
   }

   .gallery-modal-close {
       position: absolute;
       top: .85rem;
       right: .85rem;
       width: 38px;
       height: 38px;
       border-radius: 9999px;
       background: rgba(255, 255, 255, .96);
       color: #1c1917;
       display: flex;
       align-items: center;
       justify-content: center;
       cursor: pointer;
       z-index: 10;
       border: none;
       box-shadow: 0 6px 18px rgba(0, 0, 0, .25);
       transition: all .25s;
   }

   .gallery-modal-close:hover {
       background: #dc2626;
       color: #fff;
       transform: rotate(90deg);
   }

   .gallery-modal-close svg {
       width: 18px;
       height: 18px;
   }

   .gallery-modal-video {
       aspect-ratio: 16/9;
       background: #000;
       flex-shrink: 0;
       position: relative;
   }

   .gallery-modal-video iframe {
       position: absolute;
       inset: 0;
       width: 100%;
       height: 100%;
       border: 0;
   }

   .gallery-modal-image {
       background: #0c0a09;
       flex-shrink: 0;
       max-height: 68vh;
       display: flex;
       align-items: center;
       justify-content: center;
       padding: 1.5rem;
   }

   .gallery-modal-image img {
       max-width: 100%;
       max-height: 60vh;
       object-fit: contain;
       border-radius: .5rem;
   }

   .gallery-modal-body {
       padding: 1.5rem 1.75rem 1.75rem;
       overflow-y: auto;
   }

   .gallery-modal-cat {
       display: inline-block;
       padding: .25rem .6rem;
       border-radius: .35rem;
       background: #fef2f2;
       color: #dc2626;
       font-size: 10.5px;
       font-weight: 800;
       letter-spacing: .1em;
       margin-bottom: .75rem;
   }

   .gallery-modal-title {
       font-size: 1.15rem;
       font-weight: 700;
       color: #1c1917;
       line-height: 1.35;
       margin-bottom: .6rem;
   }

   .gallery-modal-desc {
       font-size: 14px;
       color: #57534e;
       line-height: 1.65;
       margin-bottom: 1.25rem;
   }

   .gallery-modal-cta {
       display: inline-flex;
       align-items: center;
       gap: .5rem;
       padding: .65rem 1.15rem;
       border-radius: .55rem;
       background: #dc2626;
       color: #fff;
       font-size: 13px;
       font-weight: 600;
       text-decoration: none;
       transition: all .25s;
   }

   .gallery-modal-cta:hover {
       background: #b91c1c;
       transform: translateY(-1px);
   }

   .gallery-modal-cta svg {
       width: 14px;
       height: 14px;
   }

   body.modal-open {
       overflow: hidden;
   }

   @media (prefers-reduced-motion: reduce) {
       * {
           animation: none !important;
           transition-duration: .01ms !important;
       }

       .reveal {
           opacity: 1 !important;
           transform: none !important;
       }

       .gallery-scroll {
           scroll-behavior: auto;
       }

       .bubbles-grid::before,
       .bubbles-grid::after {
           display: none;
       }
   }

   /* Product Card */
   .product-card {
       transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.35s ease, border-color 0.35s ease;
   }

   .product-card:hover {
       transform: translateY(-8px);
       box-shadow: 0 22px 35px -10px rgba(232, 78, 27, 0.16);
       border-color: rgba(232, 78, 27, 0.35);
   }


   /* Service Tab */
   .service-tab {
       cursor: pointer;
       transition: all 0.3s ease;
       border-left: 3px solid transparent;
   }

   .service-tab.active,
   .service-tab:hover {
       border-left-color: #E84E1B;
       background: linear-gradient(90deg, rgba(232, 78, 27, 0.12), transparent);
   }

   .service-panel {
       display: none;
   }

   .service-panel.active {
       display: block;
       animation: fadeIn 0.45s ease;
   }

    @keyframes fadeIn {
        from {
            opacity: 0;
            transform: translateY(10px);
        }

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

    /* Timeline (Tentang) */
    .timeline-track {
        position: relative;
    }

    .timeline-line {
        position: absolute;
        left: 50%;
        top: 0;
        bottom: 0;
        width: 2px;
        background: #e7e5e4;
        transform: translateX(-50%);
        z-index: 0;
    }

    .timeline-item {
        position: relative;
        z-index: 1;
    }

    .timeline-dot {
        position: absolute;
        left: 50%;
        top: 50%;
        width: 11px;
        height: 11px;
        background: #dc2626;
        border: 3px solid #fff;
        border-radius: 50%;
        transform: translate(-50%, -50%);
        z-index: 10;
        box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.15);
    }

    .timeline-text {
        position: relative;
    }

    .timeline-text-left::after {
        content: '';
        position: absolute;
        top: 50%;
        right: -0.75rem;
        width: 0.75rem;
        height: 2px;
        background: #dc2626;
        transform: translateY(-50%);
        z-index: 5;
    }

    .timeline-text-right::before {
        content: '';
        position: absolute;
        top: 50%;
        left: -0.75rem;
        width: 0.75rem;
        height: 2px;
        background: #dc2626;
        transform: translateY(-50%);
        z-index: 5;
    }

    /* Client logo marquee */
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
    .marquee-track {
        display: flex;
        gap: 3rem;
        width: max-content;
        will-change: transform;
    }
    .marquee-track.animate-marquee {
        animation: marquee 36s linear infinite;
    }
    .client-logo {
        height: 56px;
        width: auto;
        object-fit: contain;
        opacity: 0.9;
        transition: opacity 0.3s;
    }
    .client-logo:hover {
        opacity: 1;
    }