/*
Theme Name: AdPilot Media
Theme URI: https://example.com/
Author: AdPilot Media
Description: Custom responsive WordPress theme for AdPilot Media.
Version: 3.0.1
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: adpilot-media
*/

/* AdPilot Media — WordPress integration */
html,body{margin:0;padding:0;background:#030712;}
body{overflow-x:hidden;}

        /* ============================================================
           NAVBAR COMPONENT STYLES
           ============================================================ */

        @keyframes navFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes navSlideIn {
          from { transform: translateX(100%); }
          to { transform: translateX(0); }
        }

        @keyframes navDropdownFade {
          from {  transform: translateY(8px) scale(0.98); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .navbar-header {
          position: sticky;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          width: 100%;
          background: rgba(3, 7, 18, 0.75);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
          transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .navbar-header.is-scrolled {
          background: rgba(3, 7, 18, 0.92);
          border-bottom: 1px solid rgba(99, 102, 241, 0.2);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .navbar-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(10px, 1.5vw, 14px) clamp(16px, 3.5vw, 40px);
          gap: 16px;
        }

        /* Brand Logo Area */
        .navbar-brand {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          color: #ffffff;
          flex-shrink: 0;
          z-index: 10;
        }

        .navbar-logo-wrap {
          width: clamp(38px, 4vw, 44px);
          height: clamp(38px, 4vw, 44px);
          border-radius: 12px;
          overflow: hidden;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
          border: 1.5px solid rgba(255, 255, 255, 0.15);
          transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .navbar-brand:hover .navbar-logo-wrap {
          transform: scale(1.05);
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
        }

        .navbar-logo-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          padding: 3px;
        }

        .navbar-brand-text {
          display: flex;
          flex-direction: column;
        }

        .navbar-brand-name {
          font-size: clamp(1.05rem, 1.5vw, 1.25rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          background: linear-gradient(135deg, #ffffff 40%, #c7d2fe 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1.1;
        }

        .navbar-brand-badge {
          font-size: 0.6rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1.2px;
          color: #818cf8;
        }

        /* Desktop Navigation Links */
        .navbar-desktop-nav {
          display: flex;
          align-items: center;
          list-style: none;
          gap: 4px;
          padding: 0;
          margin: 0;
        }

        .navbar-link {
          color: #cbd5e1;
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 600;
          padding: 8px 13px;
          border-radius: 8px;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          gap: 7px;
          cursor: pointer;
        }

        .navbar-nav-icon {
          .75;
          font-size: 15px;
          flex-shrink: 0;
          transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
        }

        .navbar-link:hover {
          color: #ffffff;
          background: rgba(255, 255, 255, 0.06);
        }

        .navbar-link:hover .navbar-nav-icon {
          opacity: 1;
          color: var(--blue-bright, #818cf8);
          transform: translateY(-1px);
        }

        /* Desktop Services Dropdown */
        .navbar-dropdown-wrapper {
          position: relative;
        }

        .navbar-dropdown-trigger {
          display: inline-flex;
          align-items: center;
          gap: 6px;
        }

        .navbar-chevron {
          transition: transform 0.25s ease;
        }

        .navbar-dropdown-menu {
          position: absolute;
          top: calc(100% + 8px);
          left: 50%;
          transform: translateX(-50%);
          background: rgba(3, 7, 18, 0.96);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          border: 1px solid rgba(99, 102, 241, 0.25);
          border-radius: 16px;
          min-width: 320px;
          padding: 8px;
          display: flex;
          flex-direction: column;
          gap: 4px;
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.15);
          animation: navDropdownFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);
          z-index: 100;
        }

        .navbar-dropdown-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 12px;
          border-radius: 10px;
          text-decoration: none;
          color: #f1f5f9;
          transition: all 0.2s ease;
          background: transparent;
        }

        .navbar-dropdown-item:hover {
          background: rgba(255, 255, 255, 0.06);
          transform: translateX(4px);
        }

        .navbar-dropdown-icon {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .navbar-dropdown-text {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-width: 0;
        }

        .navbar-dropdown-label {
          font-size: 0.88rem;
          font-weight: 700;
          color: #ffffff;
        }

        .navbar-dropdown-tag {
          font-size: 0.72rem;
          font-weight: 500;
        }

        .navbar-dropdown-arrow {
          flex-shrink: 0;
          
          transform: translateX(-4px);
          transition: all 0.2s ease;
        }

        .navbar-dropdown-item:hover .navbar-dropdown-arrow {
          opacity: 1;
          transform: translateX(0);
        }

        /* Desktop Actions */
        .navbar-desktop-actions {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .navbar-btn-cta {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 10px 22px;
          border-radius: 10px;
          font-size: 0.88rem;
          font-weight: 700;
          text-decoration: none;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.35);
          transition: all 0.25s ease;
          border: none;
          cursor: pointer;
          white-space: nowrap;
        }

        .navbar-btn-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(24, 119, 242, 0.5);
        }

        /* Mobile Controls */
        .navbar-mobile-controls {
          display: none;
          align-items: center;
          gap: 10px;
        }

        .navbar-mobile-cta {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 7px 14px;
          border-radius: 8px;
          font-size: 0.78rem;
          font-weight: 700;
          text-decoration: none;
          white-space: nowrap;
        }

        .navbar-hamburger {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          padding: 0;
        }

        .navbar-hamburger:hover,
        .navbar-hamburger:active {
          background: rgba(255, 255, 255, 0.16);
          border-color: rgba(99, 102, 241, 0.4);
        }

        /* Mobile Drawer */
        .navbar-drawer-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.75);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          z-index: 9998;
          animation: navFadeIn 0.22s ease-out;
        }

        .navbar-drawer-panel {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          width: min(380px, 86vw);
          height: 100vh;
          height: 100dvh;
          background: rgba(3, 7, 18, 0.98);
          border-left: 1px solid rgba(99, 102, 241, 0.25);
          z-index: 9999;
          display: flex;
          flex-direction: column;
          box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
          animation: navSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
          overflow: hidden;
        }

        .navbar-drawer-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 20px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          background: rgba(10, 15, 30, 0.5);
        }

        .navbar-drawer-close {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .navbar-drawer-close:hover {
          background: rgba(255, 255, 255, 0.18);
          transform: scale(1.06);
        }

        .navbar-drawer-body {
          flex: 1;
          overflow-y: auto;
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 6px;
          -webkit-overflow-scrolling: touch;
        }

        .navbar-drawer-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 16px;
          color: #e2e8f0;
          text-decoration: none;
          font-size: 0.94rem;
          font-weight: 600;
          border-radius: 10px;
          transition: all 0.2s ease;
          background: transparent;
        }

        .navbar-drawer-link:hover,
        .navbar-drawer-link:active {
          background: rgba(255, 255, 255, 0.06);
          color: #ffffff;
          padding-left: 20px;
        }

        /* Mobile Accordion */
        .navbar-accordion-btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 12px 16px;
          color: #e2e8f0;
          font-size: 0.94rem;
          font-weight: 600;
          border-radius: 10px;
          background: transparent;
          border: none;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .navbar-accordion-btn.is-active {
          background: rgba(99, 102, 241, 0.12);
          color: #818cf8;
        }

        .navbar-accordion-content {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: 6px 0 10px 10px;
          border-left: 2px solid rgba(99, 102, 241, 0.2);
          margin-left: 16px;
          margin-top: 4px;
        }

        .navbar-accordion-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 12px;
          border-radius: 10px;
          text-decoration: none;
          color: #f1f5f9;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.05);
          transition: all 0.2s ease;
        }

        .navbar-accordion-item:hover,
        .navbar-accordion-item:active {
          background: rgba(255, 255, 255, 0.08);
          transform: translateX(3px);
        }

        /* Drawer Footer */
        .navbar-drawer-footer {
          padding: 16px 20px;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          background: rgba(10, 15, 30, 0.6);
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .navbar-drawer-whatsapp {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 12px 18px;
          border-radius: 10px;
          background: rgba(37, 211, 102, 0.12);
          border: 1px solid rgba(37, 211, 102, 0.3);
          color: #25d366;
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 700;
          transition: all 0.2s ease;
        }

        .navbar-drawer-whatsapp:hover,
        .navbar-drawer-whatsapp:active {
          background: rgba(37, 211, 102, 0.22);
          transform: translateY(-1px);
        }

        .navbar-drawer-cta {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 13px 20px;
          border-radius: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          text-decoration: none;
          font-size: 0.92rem;
          font-weight: 700;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.35);
          transition: all 0.2s ease;
        }

        .navbar-drawer-cta:hover,
        .navbar-drawer-cta:active {
          transform: translateY(-1px);
          box-shadow: 0 6px 20px rgba(24, 119, 242, 0.5);
        }

        /* ============================================================
           MEDIA QUERIES (Mobile, Tablet, Desktop)
           ============================================================ */

        @media (max-width: 992px) {
          .navbar-desktop-nav,
          .navbar-desktop-actions {
            display: none !important;
          }

          .navbar-mobile-controls {
            display: flex !important;
          }
        }

        @media (max-width: 480px) {
          .navbar-container {
            padding: 8px 14px;
          }

          .navbar-brand-name {
            font-size: 1.05rem;
          }

          .navbar-brand-badge {
            display: none;
          }

          .navbar-mobile-cta {
            padding: 6px 10px;
            font-size: 0.74rem;
          }

          .navbar-hamburger {
            width: 36px;
            height: 36px;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .navbar-header {
          background: rgba(255, 255, 255, 0.94);
          border-bottom-color: rgba(0, 0, 0, 0.09);
        }

        [data-theme="light"] .navbar-header.is-scrolled {
          background: rgba(255, 255, 255, 0.98);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .navbar-brand-name {
          background: linear-gradient(135deg, #0f172a 30%, #312e81 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        [data-theme="light"] .navbar-brand-badge {
          color: #4f46e5;
        }

        [data-theme="light"] .navbar-link {
          color: #0f172a;
          font-weight: 700;
        }

        [data-theme="light"] .navbar-link:hover {
          color: #4f46e5;
          background: rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .navbar-dropdown-menu {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.1);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
        }

        [data-theme="light"] .navbar-dropdown-item {
          color: #0f172a;
        }

        [data-theme="light"] .navbar-dropdown-item:hover {
          background: #f1f5f9;
        }

        [data-theme="light"] .navbar-dropdown-label {
          color: #0f172a;
        }

        [data-theme="light"] .navbar-hamburger {
          background: rgba(0, 0, 0, 0.05);
          border-color: rgba(0, 0, 0, 0.1);
          color: #0f172a;
        }

        [data-theme="light"] .navbar-drawer-panel {
          background: #ffffff;
          border-left-color: rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .navbar-drawer-header {
          border-bottom-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .navbar-drawer-close {
          background: rgba(0, 0, 0, 0.05);
          border-color: rgba(0, 0, 0, 0.1);
          color: #0f172a;
        }

        [data-theme="light"] .navbar-drawer-link {
          color: #0f172a;
        }

        [data-theme="light"] .navbar-drawer-link:hover {
          background: #f1f5f9;
        }

        [data-theme="light"] .navbar-accordion-btn {
          color: #0f172a;
        }

        [data-theme="light"] .navbar-accordion-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
          color: #0f172a;
        }

        [data-theme="light"] .navbar-drawer-footer {
          background: #f8fafc;
          border-top-color: rgba(0, 0, 0, 0.08);
        }
      
.navbar-link.is-current,.navbar-dropdown-item.is-current{color:#fff!important;background:rgba(99,102,241,.14);}
.navbar-logo-wrap{display:flex;align-items:center;justify-content:center;overflow:hidden;}
.navbar-logo-img{width:100%;height:100%;object-fit:contain;display:block;}
.navbar-drawer-panel[hidden],.navbar-drawer-backdrop[hidden],.navbar-dropdown-menu[hidden],.navbar-accordion-list[hidden]{display:none!important;}
.navbar-accordion-list{display:flex;flex-direction:column;gap:5px;padding:0 8px 8px;}
.navbar-accordion-item{display:block;padding:10px 14px;border-radius:9px;background:rgba(255,255,255,.04);color:#e2e8f0;text-decoration:none;}
.navbar-accordion-btn{border:0;background:transparent;cursor:pointer;}
.adp-site-footer{padding:30px 20px;background:#030712;color:#94a3b8;border-top:1px solid rgba(255,255,255,.06);}
.adp-footer-inner{max-width:1360px;margin:auto;text-align:center;font-size:14px;}
.adp-floating-contact{position:fixed;right:20px;bottom:20px;z-index:9990;display:flex;flex-direction:column;gap:10px;}
.adp-floating-contact a{width:50px;height:50px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-size:23px;box-shadow:0 8px 24px rgba(0,0,0,.3);}
.adp-float-whatsapp{background:#25d366;} .adp-float-phone{background:#1877f2;}
.adp-page-content{min-height:70vh;padding:140px 20px 70px;background:#030712;color:#fff;}
.adp-page-inner{max-width:1000px;margin:auto;}
@media(max-width:782px){body.admin-bar .navbar-header{top:46px;}.adp-floating-contact{right:14px;bottom:14px;}.adp-floating-contact a{width:46px;height:46px;}}


/* SOURCE: about.html */
/* ============================================================
           HERO SECTION COMPONENT STYLES
           ============================================================ */

        @keyframes hoSpin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes hoCounter {
          from { transform: rotate(0deg); }
          to { transform: rotate(-360deg); }
        }

        @keyframes hoSpinRev {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }

        @keyframes centerPulseRing {
          0%, 100% { transform: translate(-50%, -50%) scale(1); .25; }
          50% { transform: translate(-50%, -50%) scale(1.15); .7; }
        }

        @keyframes photonOrbit {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes photonOrbitRev {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }

        @keyframes iconPing {
          0% { transform: scale(1); .8; }
          100% { transform: scale(1.6);  }
        }

        @keyframes clientsScroll {
          0% { transform: translate3d(0, 0, 0); }
          100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes clientsScrollRev {
          0% { transform: translate3d(-50%, 0, 0); }
          100% { transform: translate3d(0, 0, 0); }
        }

        @keyframes cursorBlink {
          0%, 100% { opacity: 1; }
          50% {  }
        }

        @keyframes floatAmbient {
          0%, 100% { transform: translate(0, 0); }
          50% { transform: translate(15px, -20px); }
        }

        .hero-section {
          position: relative;
          min-height: 100vh;
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background: linear-gradient(135deg, #030712 0%, #0a0f1e 50%, #0f1629 100%);
          isolation: isolate;
          contain: paint;
        }

        /* Ambient Glow & Grid Layer */
        .hero-bg-layer {
          position: absolute;
          inset: 0;
          overflow: hidden;
          pointer-events: none;
          z-index: 0;
        }

        .hero-grid-overlay {
          position: absolute;
          inset: 0;
          background-image: 
            linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
          background-size: clamp(40px, 6vw, 64px) clamp(40px, 6vw, 64px);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
          -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
        }

        .hero-glow-blob-1 {
          position: absolute;
          width: clamp(300px, 50vw, 750px);
          height: clamp(300px, 50vw, 750px);
          background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 68%);
          border-radius: 50%;
          filter: blur(80px);
          top: -150px;
          left: -100px;
          animation: floatAmbient 12s ease-in-out infinite;
        }

        .hero-glow-blob-2 {
          position: absolute;
          width: clamp(280px, 45vw, 650px);
          height: clamp(280px, 45vw, 650px);
          background: radial-gradient(circle, rgba(249,115,22,0.16), transparent 68%);
          border-radius: 50%;
          filter: blur(80px);
          bottom: -150px;
          right: -80px;
          animation: floatAmbient 14s ease-in-out infinite reverse;
        }

        .hero-watermark {
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: clamp(64px, 16vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(99,102,241,0.04);
          letter-spacing: clamp(8px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        /* Hero Main Layout */
        .hero-main-wrapper {
          position: relative;
          z-index: 2;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(36px, 6vw, 64px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 60px);
        }

        .hero-grid {
          display: grid;
          grid-template-columns: 1.15fr 0.95fr;
          align-items: center;
          gap: clamp(32px, 5vw, 64px);
          width: 100%;
        }

        .hero-text-col {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          width: 100%;
          max-width: 620px;
        }

        /* Top Announcement Badge */
        .hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: rgba(99,102,241,0.12);
          border: 1px solid rgba(99,102,241,0.3);
          color: #c7d2fe;
          font-size: clamp(0.7rem, 1vw, 0.78rem);
          font-weight: 700;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          padding: clamp(6px, 1.2vw, 9px) clamp(14px, 2vw, 20px);
          border-radius: 50px;
          margin-bottom: clamp(18px, 3vw, 26px);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 4px 20px rgba(99,102,241,0.18);
          max-width: 100%;
          word-break: break-word;
        }

        .hero-badge-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 10px #10b981;
          flex-shrink: 0;
        }

        /* Hero Headline */
        .hero-headline {
          font-size: clamp(2.35rem, 5.2vw + 0.5rem, 5.4rem);
          font-weight: 900;
          line-height: 1.05;
          color: #ffffff;
          margin-bottom: clamp(14px, 2.5vw, 20px);
          letter-spacing: -0.035em;
          text-shadow: 0 4px 30px rgba(0,0,0,0.5);
          word-break: break-word;
        }

        .hero-headline-accent {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          display: inline-block;
        }

        .hero-cursor {
          color: #ff6b00;
          font-weight: 300;
          display: inline-block;
          margin-left: 2px;
          animation: cursorBlink 0.9s infinite;
        }

        .hero-headline-bar {
          width: clamp(70px, 12vw, 110px);
          height: 4px;
          background: linear-gradient(90deg, #ff6b00, rgba(255,107,0,0.1));
          border-radius: 4px;
          margin-bottom: clamp(16px, 2.5vw, 24px);
        }

        /* Hero Description */
        .hero-desc {
          color: #cbd5e1;
          font-size: clamp(0.95rem, 1.1vw + 0.4rem, 1.1rem);
          line-height: 1.8;
          max-width: 520px;
          margin-bottom: clamp(24px, 3.5vw, 32px);
          font-weight: 400;
        }

        .hero-desc strong {
          color: #ffffff;
          font-weight: 700;
        }

        /* CTA Buttons */
        .hero-cta-group {
          display: flex;
          align-items: center;
          gap: 14px;
          flex-wrap: wrap;
          width: 100%;
          margin-bottom: clamp(24px, 4vw, 34px);
        }

        .hero-btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border: none;
          padding: 13px 28px;
          border-radius: 12px;
          font-size: clamp(0.9rem, 1vw, 1rem);
          font-weight: 700;
          cursor: pointer;
          box-shadow: 0 4px 20px rgba(24,119,242,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          text-decoration: none;
        }

        .hero-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 30px rgba(24,119,242,0.6);
        }

        .hero-btn-primary:active {
          transform: translateY(0);
        }

        .hero-btn-secondary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: rgba(255,255,255,0.06);
          color: #f8fafc;
          border: 1.5px solid rgba(255,255,255,0.22);
          padding: 13px 26px;
          border-radius: 12px;
          font-size: clamp(0.9rem, 1vw, 1rem);
          font-weight: 600;
          cursor: pointer;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hero-btn-secondary:hover {
          background: rgba(255,255,255,0.12);
          border-color: rgba(255,255,255,0.45);
          color: #ffffff;
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        /* Stats Grid */
        .hero-stats-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(8px, 1.5vw, 12px);
          width: 100%;
        }

        .hero-stat-card {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding: clamp(10px, 1.5vw, 14px) clamp(10px, 1.5vw, 16px);
          border-radius: 14px;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          transition: all 0.25s ease;
          position: relative;
          overflow: hidden;
        }

        .hero-stat-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 24px rgba(0,0,0,0.35);
        }

        .hero-stat-num {
          font-size: clamp(1.25rem, 2vw + 0.3rem, 1.7rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1.1;
          margin-bottom: 4px;
        }

        .hero-stat-label {
          font-size: clamp(0.58rem, 0.7vw + 0.2rem, 0.68rem);
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          line-height: 1.25;
        }

        /* Hero Orbit Showcase */
        .hero-orbit-col {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          position: relative;
        }

        .hero-orbit-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          position: relative;
        }

        .hero-orbit-box {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          user-select: none;
          flex-shrink: 0;
        }

        /* Ambient background glow */
        .hero-orbit-ambient-aura {
          position: absolute;
          inset: 6%;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(249, 115, 22, 0.08) 45%, transparent 72%);
          filter: blur(40px);
          pointer-events: none;
          z-index: 0;
        }

        /* Concentric Track Rings */
        .hero-orbit-track {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          pointer-events: none;
          z-index: 1;
        }

        /* Outer Celestial Ring */
        .hero-orbit-track-outer {
          border: 1px dashed rgba(99, 102, 241, 0.22);
          box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.05);
        }

        /* Middle Primary Track - where the 6 planets travel */
        .hero-orbit-track-main {
          border: 1.5px solid rgba(255, 255, 255, 0.12);
          box-shadow: 
            0 0 16px rgba(99, 102, 241, 0.15),
            inset 0 0 16px rgba(99, 102, 241, 0.1);
        }

        .hero-orbit-track-glow {
          position: absolute;
          inset: -1px;
          border-radius: 50%;
          border: 1.5px solid transparent;
          background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(249,115,22,0.25)) border-box;
          -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          .6;
        }

        /* Inner Celestial Ring */
        .hero-orbit-track-inner {
          border: 1px dashed rgba(249, 115, 22, 0.22);
          animation: hoSpinRev 38s linear infinite;
        }

        /* Orbiting Photons / Particles */
        .hero-orbit-photon-wrap {
          position: absolute;
          inset: 0;
          border-radius: 50%;
        }

        .outer-photon-wrap {
          animation: photonOrbit 32s linear infinite;
        }

        .inner-photon-wrap-1 {
          animation: photonOrbitRev 24s linear infinite;
        }

        .inner-photon-wrap-2 {
          animation: photonOrbit 18s linear infinite;
        }

        .hero-orbit-photon {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #60a5fa;
          box-shadow: 0 0 12px 3px #60a5fa, 0 0 20px #3b82f6;
        }

        .hero-orbit-photon.inner-photon {
          background: #fb923c;
          box-shadow: 0 0 10px 2px #fb923c, 0 0 18px #ea580c;
          width: 6px;
          height: 6px;
        }

        .hero-orbit-photon.inner-photon.alt {
          top: auto;
          bottom: 0;
          background: #a855f7;
          box-shadow: 0 0 10px 2px #a855f7;
          width: 5px;
          height: 5px;
        }

        /* Rotator */
        .hero-orbit-rotator {
          position: absolute;
          inset: 0;
          animation: hoSpin 28s linear infinite;
          z-index: 5;
        }

        .hero-orbit-rotator.is-paused {
          animation-play-state: paused;
        }

        /* Orbit Node (Planet) Anchor */
        .hero-orbit-node {
          position: absolute;
          transform: translate(-50%, -50%);
          cursor: pointer;
          outline: none;
          z-index: 10;
          transition: z-index 0.2s ease;
        }

        .hero-orbit-node.is-node-hovered {
          z-index: 30;
        }

        /* Counter-rotating container keeps content upright around exact anchor */
        .hero-orbit-node-inner {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          animation: hoCounter 28s linear infinite;
          transform-origin: center center;
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .hero-orbit-node-inner.is-paused {
          animation-play-state: paused;
        }

        .hero-orbit-node:hover .hero-orbit-node-inner,
        .hero-orbit-node:focus-visible .hero-orbit-node-inner {
          transform: scale(1.18);
        }

        /* Icon Sphere */
        .hero-orbit-icon {
          position: relative;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(3, 7, 18, 0.98) 100%);
          border: 2px solid var(--service-color);
          box-shadow: 
            0 0 18px rgba(0, 0, 0, 0.8),
            0 0 16px var(--service-color),
            inset 0 1px 2px rgba(255, 255, 255, 0.3);
          transition: all 0.3s ease;
          overflow: visible;
        }

        .hero-orbit-node:hover .hero-orbit-icon {
          box-shadow: 
            0 0 30px var(--service-color),
            0 8px 24px rgba(0, 0, 0, 0.9),
            inset 0 1px 4px rgba(255, 255, 255, 0.5);
          border-color: #ffffff;
        }

        .hero-orbit-icon-img {
          object-fit: contain;
          border-radius: 8px;
          z-index: 2;
          transition: transform 0.3s ease;
        }

        .hero-orbit-node:hover .hero-orbit-icon-img {
          transform: scale(1.08);
        }

        .hero-orbit-icon-glow {
          position: absolute;
          inset: -4px;
          border-radius: 50%;
          .3;
          filter: blur(8px);
          transition: opacity 0.3s ease;
          z-index: 1;
        }

        .hero-orbit-node:hover .hero-orbit-icon-glow {
          .85;
          filter: blur(12px);
        }

        .hero-orbit-icon-ping {
          position: absolute;
          inset: -2px;
          border-radius: 50%;
          border: 1.5px solid var(--service-color);
          animation: iconPing 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
          pointer-events: none;
          
        }

        .hero-orbit-node:hover .hero-orbit-icon-ping {
          opacity: 1;
        }

        /* Label Pill */
        .hero-orbit-node-label {
          font-size: clamp(0.58rem, 0.8vw, 0.72rem);
          font-weight: 800;
          text-align: center;
          white-space: nowrap;
          background: rgba(3, 7, 18, 0.92);
          padding: 3px 9px;
          border-radius: 20px;
          color: #f1f5f9;
          border: 1px solid rgba(255, 255, 255, 0.16);
          border-left: 2.5px solid var(--service-color);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
          pointer-events: none;
          transition: all 0.25s ease;
        }

        .hero-orbit-node:hover .hero-orbit-node-label {
          background: rgba(15, 23, 42, 0.98);
          color: #ffffff;
          border-color: var(--service-color);
          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 10px var(--service-color);
        }

        /* Center Hub (Sun Core) */
        .hero-orbit-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 8;
        }

        .hero-orbit-center-core {
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 
            0 0 0 3px rgba(255, 255, 255, 0.85),
            0 0 30px rgba(99, 102, 241, 0.5),
            0 0 60px rgba(249, 115, 22, 0.25),
            0 14px 40px rgba(0, 0, 0, 0.5);
          overflow: hidden;
          z-index: 2;
        }

        .hero-orbit-center-img {
          width: 86%;
          height: 86%;
          object-fit: contain;
          border-radius: 50%;
        }

        .hero-orbit-center-overlay {
          position: absolute;
          bottom: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .hero-orbit-center-badge {
          font-size: 0.52rem;
          font-weight: 900;
          letter-spacing: 0.8px;
          text-transform: uppercase;
          background: linear-gradient(135deg, #6366f1, #f97316);
          color: #ffffff;
          padding: 1px 6px;
          border-radius: 10px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        /* Pulse Rings */
        .hero-orbit-pulse-ring {
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 50%;
          pointer-events: none;
        }

        .hero-orbit-pulse-ring.ring-1 {
          width: 125%;
          height: 125%;
          border: 1.5px solid rgba(99, 102, 241, 0.35);
          animation: centerPulseRing 3.2s ease-in-out infinite;
        }

        .hero-orbit-pulse-ring.ring-2 {
          width: 155%;
          height: 155%;
          border: 1px dashed rgba(249, 115, 22, 0.3);
          animation: centerPulseRing 3.2s ease-in-out infinite 1.1s;
        }

        .hero-orbit-pulse-ring.ring-3 {
          width: 190%;
          height: 190%;
          border: 1px solid rgba(99, 102, 241, 0.15);
          animation: centerPulseRing 3.2s ease-in-out infinite 2.2s;
        }



        /* Quick Service Chips for Small Devices */
        .hero-orbit-chips {
          display: none;
          flex-direction: column;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        }

        .hero-orbit-chips-title {
          font-size: 0.72rem;
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 1.5px;
          margin-bottom: 10px;
        }

        .hero-orbit-chips-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
          width: 100%;
        }

        .hero-orbit-chip {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.12);
          border-left: 3px solid var(--chip-color);
          border-radius: 20px;
          padding: 6px 14px;
          color: #f1f5f9;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          transition: all 0.2s ease;
        }

        .hero-orbit-chip:hover,
        .hero-orbit-chip:active {
          background: rgba(255,255,255,0.12);
          transform: translateY(-1px);
        }

        .hero-orbit-chip-icon {
          width: 18px;
          height: 18px;
          object-fit: contain;
          border-radius: 4px;
        }

        .hero-orbit-chip-arrow {
          color: #94a3b8;
        }





        /* Modal Styles */
        .service-modal-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.78);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: clamp(12px, 3vw, 24px);
          animation: fadeIn 0.2s ease-out;
        }

        @keyframes fadeIn {
          from {  }
          to { opacity: 1; }
        }

        .service-modal-card {
          width: 100%;
          max-width: 500px;
          max-height: 88vh;
          border-radius: 24px;
          overflow-y: auto;
          box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
          background: #ffffff;
          position: relative;
        }

        .service-modal-close {
          position: absolute;
          top: 14px;
          right: 14px;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.3);
          border: none;
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          transition: background 0.2s, transform 0.2s;
        }

        .service-modal-close:hover {
          background: rgba(0, 0, 0, 0.55);
          transform: scale(1.08);
        }

        .service-modal-header {
          padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 28px);
          display: flex;
          align-items: center;
          gap: 16px;
          position: relative;
        }

        .service-modal-icon-wrap {
          width: 54px;
          height: 54px;
          border-radius: 16px;
          background: rgba(255,255,255,0.22);
          backdrop-filter: blur(8px);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }

        .service-modal-icon-wrap img {
          width: 38px;
          height: 38px;
          object-fit: contain;
          border-radius: 8px;
        }

        .service-modal-title-wrap {
          flex: 1;
          min-width: 0;
          padding-right: 28px;
        }

        .service-modal-title {
          font-size: clamp(1.25rem, 2vw, 1.45rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.02em;
          line-height: 1.2;
        }

        .service-modal-tagline {
          font-size: 0.82rem;
          color: rgba(255,255,255,0.88);
          margin-top: 3px;
          line-height: 1.35;
        }

        .service-modal-badge {
          position: absolute;
          top: 14px;
          right: 54px;
          background: rgba(255,255,255,0.25);
          border: 1px solid rgba(255,255,255,0.4);
          color: #ffffff;
          font-size: 0.65rem;
          font-weight: 800;
          padding: 3px 10px;
          border-radius: 50px;
          letter-spacing: 0.4px;
        }

        .service-modal-body {
          padding: clamp(20px, 4vw, 28px);
          background: #ffffff;
        }

        .service-modal-desc {
          color: #4b5563;
          font-size: 0.88rem;
          line-height: 1.7;
          margin-bottom: 20px;
        }

        .service-modal-features-title {
          font-size: 0.78rem;
          font-weight: 800;
          color: #111827;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 12px;
        }

        .service-modal-features-list {
          list-style: none;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px 12px;
          margin-bottom: 24px;
          padding: 0;
        }

        .service-modal-features-list li {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 0.82rem;
          color: #374151;
          font-weight: 500;
        }

        .service-modal-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 20px;
          background: #f8fafc;
          border-radius: 16px;
          border: 1px solid #e2e8f0;
          gap: 14px;
          flex-wrap: wrap;
        }

        .service-modal-price-label {
          font-size: 0.68rem;
          color: #64748b;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        .service-modal-price-val {
          font-size: 1.65rem;
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1;
        }

        .service-modal-period {
          font-size: 0.78rem;
          font-weight: 600;
          color: #64748b;
          margin-left: 3px;
        }

        .service-modal-cta {
          color: #ffffff;
          border: none;
          padding: 11px 22px;
          border-radius: 50px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 0.88rem;
          font-weight: 700;
          box-shadow: 0 4px 14px rgba(0,0,0,0.18);
          transition: transform 0.2s, box-shadow 0.2s;
        }

        .service-modal-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 22px rgba(0,0,0,0.25);
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS (Desktop, Tablet, Mobile)
           ============================================================ */

        /* Tablets & Medium Screens (<= 1024px) */
        @media (max-width: 1024px) {
          .hero-grid {
            grid-template-columns: 1fr;
            gap: 48px;
          }

          .hero-text-col {
            max-width: 100%;
            align-items: center;
            text-align: center;
          }

          .hero-headline {
            text-align: center;
          }

          .hero-headline-bar {
            margin-left: auto;
            margin-right: auto;
          }

          .hero-desc {
            text-align: center;
            max-width: 600px;
          }

          .hero-cta-group {
            justify-content: center;
          }

          .hero-stats-grid {
            max-width: 600px;
            margin: 0 auto;
          }
        }

        /* Portrait Tablets & Large Phones (<= 768px) */
        @media (max-width: 768px) {
          .hero-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            max-width: 100%;
          }

          .hero-orbit-chips {
            display: flex;
          }

          .service-modal-features-list {
            grid-template-columns: 1fr;
          }
        }

        /* Mobile Phones (<= 540px) */
        @media (max-width: 540px) {
          .hero-main-wrapper {
            padding: 28px 14px 36px;
          }

          .hero-badge {
            font-size: 0.68rem;
            padding: 6px 14px;
            letter-spacing: 0.8px;
            margin-bottom: 16px;
          }

          .hero-headline {
            font-size: clamp(2.1rem, 9.5vw, 2.7rem);
            line-height: 1.1;
            margin-bottom: 14px;
          }

          .hero-desc {
            font-size: 0.92rem;
            line-height: 1.7;
            margin-bottom: 22px;
          }

          .hero-cta-group {
            flex-direction: column;
            width: 100%;
            gap: 10px;
            margin-bottom: 24px;
          }

          .hero-btn-primary,
          .hero-btn-secondary {
            width: 100%;
            padding: 13px 20px;
            font-size: 0.94rem;
          }

          .hero-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .hero-stat-card {
            padding: 10px 12px;
            border-radius: 12px;
          }

          .hero-stat-num {
            font-size: 1.35rem;
          }

          .hero-stat-label {
            font-size: 0.62rem;
            letter-spacing: 0.5px;
          }

          .service-modal-card {
            max-height: 92vh;
            border-radius: 20px;
          }

          .service-modal-footer {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
          }

          .service-modal-cta {
            width: 100%;
            justify-content: center;
          }

          .clients-strip-wrapper {
            padding: 36px 0 28px;
          }

          .clients-strip-header {
            padding: 0 16px;
            margin-bottom: 20px;
          }
        }

        /* Extra Small Phones (<= 380px) */
        @media (max-width: 380px) {
          .hero-headline {
            font-size: 1.95rem;
          }

          .hero-badge {
            font-size: 0.64rem;
          }

          .hero-stat-num {
            font-size: 1.25rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .hero-section {
          background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #fef3c7 100%);
        }

        [data-theme="light"] .hero-badge {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .hero-headline {
          color: #0f172a;
          text-shadow: none;
        }

        [data-theme="light"] .hero-desc {
          color: #475569;
        }

        [data-theme="light"] .hero-desc strong {
          color: #0f172a;
        }

        [data-theme="light"] .hero-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .hero-stat-card {
          background: rgba(255, 255, 255, 0.85) !important;
          border-color: rgba(0, 0, 0, 0.08) !important;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .hero-stat-num {
          color: #0f172a;
        }

        [data-theme="light"] .hero-stat-label {
          color: #64748b;
        }

        [data-theme="light"] .hero-orbit-chip {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          color: #0f172a;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .hero-orbit-ambient-aura {
          background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(249, 115, 22, 0.06) 45%, transparent 72%);
        }

        [data-theme="light"] .hero-orbit-track-outer {
          border-color: rgba(99, 102, 241, 0.25);
        }

        [data-theme="light"] .hero-orbit-track-main {
          border-color: rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 16px rgba(99, 102, 241, 0.08);
        }

        [data-theme="light"] .hero-orbit-track-inner {
          border-color: rgba(249, 115, 22, 0.28);
        }

        [data-theme="light"] .hero-orbit-icon {
          background: #ffffff;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 12px var(--service-color);
        }

        [data-theme="light"] .hero-orbit-node-label {
          background: #ffffff;
          color: #0f172a;
          border-color: rgba(0, 0, 0, 0.12);
          border-left: 2.5px solid var(--service-color);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }



        [data-theme="light"] .hero-btn-secondary {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.12);
          color: #0f172a;
        }

        [data-theme="light"] .hero-btn-secondary:hover {
          background: rgba(0, 0, 0, 0.08);
        }

/* SOURCE: about.html */
/* ============================================================
           STANDALONE CLIENTS MARQUEE SECTION STYLES
           ============================================================ */

        @keyframes clientsScrollNormal {
          0% { transform: translate3d(0, 0, 0); }
          100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes clientsScrollReverse {
          0% { transform: translate3d(-50%, 0, 0); }
          100% { transform: translate3d(0, 0, 0); }
        }

        .clients-strip-section {
          position: relative;
          z-index: 10;
          width: 100%;
          padding: clamp(36px, 5vw, 64px) 0 clamp(32px, 5vw, 56px);
          background: #030712;
          overflow: hidden;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .clients-strip-header {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 0 clamp(16px, 4vw, 60px);
          margin-bottom: clamp(20px, 3.5vw, 32px);
          position: relative;
        }

        .clients-strip-line {
          flex: 1;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.25), transparent);
        }

        .clients-strip-center {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          flex-shrink: 0;
          text-align: center;
        }

        .clients-strip-tag {
          font-size: clamp(0.6rem, 0.9vw, 0.7rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: #818cf8;
          background: rgba(99, 102, 241, 0.1);
          border: 1px solid rgba(99, 102, 241, 0.25);
          padding: 4px 14px;
          border-radius: 50px;
        }

        .clients-strip-title {
          font-size: clamp(1.25rem, 2.5vw, 1.65rem);
          font-weight: 900;
          background: linear-gradient(135deg, #ffffff 30%, #c7d2fe);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          letter-spacing: -0.02em;
          margin: 0;
        }

        .clients-marquee-container {
          overflow: hidden;
          width: 100%;
          -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        }

        .clients-marquee-container.row-2 {
          margin-top: 14px;
        }

        .clients-marquee-track {
          display: flex;
          gap: 16px;
          width: max-content;
          will-change: transform;
          transform: translateZ(0);
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          padding: 6px 0;
        }

        .clients-marquee-track.anim-normal {
          animation: clientsScrollNormal 75s linear infinite;
        }

        .clients-marquee-track.anim-reverse {
          animation: clientsScrollReverse 70s linear infinite;
        }

        .clients-marquee-track:hover {
          animation-play-state: paused;
        }

        /* Client Card */
        .client-card {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          gap: 12px;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 18px;
          padding: 10px 14px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
          position: relative;
          overflow: hidden;
          min-width: clamp(175px, 20vw, 215px);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          text-decoration: none;
          color: inherit;
          transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .client-card.is-clickable {
          cursor: pointer;
        }

        .client-card:hover {
          transform: translateY(-4px) scale(1.02);
          box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
          border-color: var(--card-color);
        }

        .client-card-top-bar {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--card-color), transparent 80%);
          
          transition: opacity 0.25s;
        }

        .client-card:hover .client-card-top-bar {
          opacity: 1;
        }

        .client-card-logo-box {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          flex-shrink: 0;
          border: 1px solid rgba(255, 255, 255, 0.12);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.92);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .client-card-logo-img {
          width: 82%;
          height: 82%;
          object-fit: contain;
        }

        .client-card-fallback-letter {
          font-size: 1.1rem;
          font-weight: 900;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .client-card-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
        }

        .client-card-name {
          font-size: 0.88rem;
          font-weight: 800;
          color: #ffffff;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .client-card-industry {
          font-size: 0.65rem;
          color: #94a3b8;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        @media (max-width: 640px) {
          .clients-strip-section {
            padding: 28px 0;
          }

          .client-card {
            min-width: 160px;
            padding: 8px 12px;
          }

          .client-card-logo-box {
            width: 38px;
            height: 38px;
          }

          .client-card-name {
            font-size: 0.82rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .clients-strip-section {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .clients-strip-title {
          background: linear-gradient(135deg, #0f172a 30%, #4338ca);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        [data-theme="light"] .client-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .client-card-name {
          color: #0f172a;
        }

/* SOURCE: about.html */
/* ============================================================
           SERVICES COMPONENT STYLES
           ============================================================ */

        @keyframes serviceFloat {
          0%, 100% { transform: translateY(0) rotate(4deg); }
          50% { transform: translateY(-6px) rotate(4deg); }
        }

        .services-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .services-watermark {
          position: absolute;
          top: 18%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .services-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
          filter: blur(90px);
          top: -100px;
          left: -100px;
          pointer-events: none;
        }

        .services-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          right: -100px;
          pointer-events: none;
        }

        /* Section Header */
        .services-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .services-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .services-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .services-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .services-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Category Filter Tabs */
        .services-filters-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .services-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.09);
          color: #94a3b8;
          font-size: clamp(0.76rem, 1vw, 0.84rem);
          font-weight: 600;
          padding: 7px 16px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .services-filter-btn:hover {
          background: rgba(255, 255, 255, 0.08);
          color: #ffffff;
        }

        .services-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Responsive Services Grid */
        .services-grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: clamp(16px, 2.5vw, 28px);
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Service Card */
        .service-card-item {
          position: relative;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          overflow: hidden;
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .service-card-item:hover {
          transform: translateY(-6px);
          border-color: var(--service-color);
          box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--service-rgb), 0.2);
        }

        /* Card Header */
        .service-card-header {
          position: relative;
          padding: clamp(24px, 3.5vw, 32px) clamp(18px, 3vw, 24px) clamp(18px, 3vw, 22px);
          background: linear-gradient(135deg, var(--service-color) 0%, var(--service-dark) 100%);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .service-header-circle-1 {
          position: absolute;
          width: 220px;
          height: 220px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
          top: -60px;
          right: -60px;
          pointer-events: none;
        }

        .service-header-circle-2 {
          position: absolute;
          width: 160px;
          height: 160px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.05);
          bottom: -50px;
          left: -40px;
          pointer-events: none;
        }

        .service-badge {
          position: absolute;
          top: 14px;
          right: 14px;
          background: rgba(0, 0, 0, 0.3);
          border: 1px solid rgba(255, 255, 255, 0.25);
          color: #ffffff;
          font-size: 0.65rem;
          font-weight: 700;
          padding: 4px 10px;
          border-radius: 50px;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          z-index: 2;
        }

        .service-icon-box {
          position: relative;
          width: clamp(68px, 8vw, 84px);
          height: clamp(68px, 8vw, 84px);
          margin-bottom: 14px;
          z-index: 1;
          animation: serviceFloat 3.6s ease-in-out infinite;
        }

        .service-icon-glow {
          position: absolute;
          inset: 0;
          border-radius: 20px;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
          filter: blur(4px);
        }

        .service-icon-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          border-radius: 18px;
          position: relative;
          z-index: 1;
        }

        .service-category-pill {
          display: inline-block;
          font-size: 0.64rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          background: rgba(255, 255, 255, 0.15);
          color: #ffffff;
          padding: 3px 10px;
          border-radius: 50px;
          margin-bottom: 6px;
        }

        .service-card-title {
          font-size: clamp(1.2rem, 1.8vw, 1.4rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.2;
          margin-bottom: 4px;
          letter-spacing: -0.01em;
        }

        .service-card-subtitle {
          font-size: clamp(0.76rem, 1vw, 0.84rem);
          color: rgba(255, 255, 255, 0.8);
          font-weight: 500;
        }

        /* Card Body */
        .service-card-body {
          padding: clamp(18px, 2.5vw, 24px);
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-between;
        }

        .service-card-desc {
          font-size: clamp(0.84rem, 1.1vw, 0.92rem);
          color: #94a3b8;
          line-height: 1.65;
          margin-bottom: 18px;
        }

        /* Stats Grid Inside Card */
        .service-stats-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          margin-bottom: 18px;
        }

        .service-stat-chip {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-radius: 12px;
          padding: 8px 6px;
          text-align: center;
        }

        .service-stat-num {
          font-size: clamp(0.95rem, 1.2vw, 1.15rem);
          font-weight: 900;
          line-height: 1.1;
          display: block;
        }

        .service-stat-lbl {
          font-size: 0.62rem;
          font-weight: 700;
          color: #64748b;
          text-transform: uppercase;
          letter-spacing: 0.4px;
          margin-top: 2px;
          display: block;
        }

        /* Checklist */
        .service-points-list {
          list-style: none;
          padding: 0;
          margin: 0 0 20px;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .service-point-item {
          display: flex;
          align-items: center;
          gap: 9px;
          font-size: clamp(0.78rem, 1vw, 0.84rem);
          color: #cbd5e1;
          font-weight: 500;
        }

        .service-point-check {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        /* CTA Button */
        .service-card-cta {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 18px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 12px;
          color: #ffffff;
          font-size: 0.88rem;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.25s ease;
          margin-top: auto;
        }

        .service-card-cta:hover {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.25);
          transform: translateY(-2px);
        }

        .service-cta-arrow {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          transition: transform 0.2s ease;
        }

        .service-card-cta:hover .service-cta-arrow {
          transform: translateX(4px);
        }

        /* Bottom Glow Line */
        .service-bottom-bar {
          height: 3px;
          width: 100%;
          background: linear-gradient(90deg, var(--service-color), var(--service-dark));
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .services-grid-container {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (max-width: 768px) {
          .services-section {
            padding: 48px 16px;
          }

          .services-grid-container {
            grid-template-columns: 1fr;
            gap: 18px;
          }

          .service-card-item {
            border-radius: 20px;
          }

          .service-card-header {
            padding: 22px 16px 18px;
          }

          .service-icon-box {
            width: 64px;
            height: 64px;
            margin-bottom: 12px;
          }

          .service-card-body {
            padding: 18px;
          }

          .service-stats-grid {
            gap: 6px;
            margin-bottom: 14px;
          }

          .service-stat-chip {
            padding: 6px 4px;
          }

          .service-stat-num {
            font-size: 0.95rem;
          }

          .service-stat-lbl {
            font-size: 0.58rem;
          }
        }

        @media (max-width: 480px) {
          .services-section {
            padding: 36px 12px;
          }

          .services-filters-wrap {
            gap: 6px;
            margin-bottom: 24px;
          }

          .services-filter-btn {
            padding: 6px 12px;
            font-size: 0.72rem;
          }

          .service-card-body {
            padding: 14px;
          }

          .service-point-item {
            font-size: 0.76rem;
            gap: 7px;
          }

          .service-card-cta {
            padding: 10px 14px;
            font-size: 0.82rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .services-section {
          background: #ffffff;
        }

        [data-theme="light"] .services-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .services-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .services-title {
          color: #0f172a;
        }

        [data-theme="light"] .services-subtitle {
          color: #475569;
        }

        [data-theme="light"] .services-filter-btn {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.08);
          color: #334155;
        }

        [data-theme="light"] .services-filter-btn:hover {
          background: rgba(0, 0, 0, 0.08);
          color: #0f172a;
        }

        [data-theme="light"] .service-card-item {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .service-card-desc {
          color: #475569;
        }

        [data-theme="light"] .service-stat-chip {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .service-stat-lbl {
          color: #64748b;
        }

        [data-theme="light"] .service-point-item {
          color: #1e293b;
        }

        [data-theme="light"] .service-card-cta {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.12);
          color: #0f172a;
        }

        [data-theme="light"] .service-card-cta:hover {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.2);
        }

/* SOURCE: about.html */
/* ============================================================
           PROCESS COMPONENT STYLES
           ============================================================ */

        .process-section-root {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .process-bg-text {
          position: absolute;
          top: 18%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .process-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 600px);
          height: clamp(300px, 45vw, 600px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          top: -120px;
          right: 5%;
          pointer-events: none;
        }

        .process-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          left: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .process-header {
          text-align: center;
          margin-bottom: clamp(36px, 5vw, 64px);
          position: relative;
          z-index: 1;
        }

        .process-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.74rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 6px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }

        .process-title {
          font-size: clamp(1.85rem, 4.5vw, 3.4rem);
          font-weight: 900;
          line-height: 1.1;
          color: #ffffff;
          letter-spacing: -0.025em;
          margin-bottom: 12px;
        }

        .process-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .process-sub {
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          color: #94a3b8;
          line-height: 1.75;
          max-width: 560px;
          margin: 0 auto;
        }

        /* Grid */
        .process-grid-container {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(16px, 2vw, 24px);
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Card */
        .process-card-item {
          position: relative;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          padding: clamp(24px, 3vw, 32px) clamp(16px, 2.5vw, 22px);
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .process-card-item:hover {
          transform: translateY(-6px);
          border-color: var(--step-color);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--step-rgb), 0.2);
        }

        .process-step-indicator {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 0.64rem;
          font-weight: 800;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          color: var(--step-color);
          background: rgba(var(--step-rgb), 0.12);
          border: 1px solid rgba(var(--step-rgb), 0.25);
          padding: 4px 12px;
          border-radius: 50px;
          margin-bottom: 20px;
        }

        .process-icon-bubble {
          width: clamp(60px, 7vw, 72px);
          height: clamp(60px, 7vw, 72px);
          border-radius: 20px;
          background: linear-gradient(135deg, rgba(var(--step-rgb), 0.2) 0%, rgba(var(--step-rgb), 0.05) 100%);
          border: 1.5px solid rgba(var(--step-rgb), 0.35);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--step-color);
          margin-bottom: 20px;
          box-shadow: 0 8px 24px rgba(var(--step-rgb), 0.2);
          transition: transform 0.3s ease;
        }

        .process-card-item:hover .process-icon-bubble {
          transform: scale(1.1) rotate(5deg);
        }

        .process-card-title {
          font-size: clamp(1.1rem, 1.5vw, 1.25rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.01em;
          margin-bottom: 10px;
        }

        .process-card-desc {
          font-size: clamp(0.82rem, 1vw, 0.88rem);
          color: #94a3b8;
          line-height: 1.65;
          margin: 0;
        }

        /* Connector Arrow Between Cards (Desktop only) */
        .process-connector-arrow {
          position: absolute;
          right: -16px;
          top: 40%;
          transform: translateY(-50%);
          color: rgba(255, 255, 255, 0.2);
          z-index: 2;
          pointer-events: none;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .process-grid-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
          }

          .process-connector-arrow {
            display: none;
          }
        }

        @media (max-width: 680px) {
          .process-section-root {
            padding: 40px 14px;
          }

          .process-grid-container {
            grid-template-columns: 1fr;
            gap: 14px;
          }

          .process-card-item {
            border-radius: 20px;
            padding: 22px 16px;
          }

          .process-icon-bubble {
            width: 54px;
            height: 54px;
            margin-bottom: 14px;
          }

          .process-step-indicator {
            margin-bottom: 14px;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .process-section-root {
          background: #f8fafc;
        }

        [data-theme="light"] .process-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .process-bg-text {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .process-title {
          color: #0f172a;
        }

        [data-theme="light"] .process-sub {
          color: #475569;
        }

        [data-theme="light"] .process-card-item {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .process-card-title {
          color: #0f172a;
        }

        [data-theme="light"] .process-card-desc {
          color: #475569;
        }

        [data-theme="light"] .process-connector-arrow {
          color: rgba(0, 0, 0, 0.15);
        }

/* SOURCE: about.html */
/* ============================================================
           ABOUT COMPONENT STYLES
           ============================================================ */

        .about-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .about-watermark {
          position: absolute;
          top: 25%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .about-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.14), transparent 70%);
          filter: blur(90px);
          top: -120px;
          left: -100px;
          pointer-events: none;
        }

        .about-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.1), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          right: -100px;
          pointer-events: none;
        }

        /* 2-Column Grid Layout */
        .about-container {
          display: grid;
          grid-template-columns: 1.15fr 1fr;
          gap: clamp(32px, 5vw, 64px);
          align-items: center;
          max-width: 1300px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Left Column: Mission & Features */
        .about-left-col {
          display: flex;
          flex-direction: column;
        }

        .about-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
          width: fit-content;
        }

        .about-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 18px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .about-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .about-desc-p {
          font-size: clamp(0.88rem, 1.1vw, 0.98rem);
          color: #94a3b8;
          line-height: 1.75;
          margin-bottom: 14px;
        }

        .about-desc-p strong {
          color: #f1f5f9;
        }

        /* Value Checklist */
        .about-checklist {
          list-style: none;
          padding: 0;
          margin: 18px 0 28px;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .about-checklist-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 14px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 12px;
          font-size: clamp(0.82rem, 1vw, 0.9rem);
          font-weight: 500;
          color: #cbd5e1;
          transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
        }

        .about-checklist-item:hover {
          transform: translateX(4px);
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(249, 115, 22, 0.4);
          color: #ffffff;
        }

        .about-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 14px 30px;
          border-radius: 12px;
          font-size: 0.94rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 4px 18px rgba(24, 119, 242, 0.4);
          transition: all 0.25s ease;
          width: fit-content;
        }

        .about-cta-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 28px rgba(24, 119, 242, 0.6);
        }

        /* Right Column: Interactive Pillars Card Deck */
        .about-right-col {
          display: flex;
          flex-direction: column;
          gap: clamp(14px, 2vw, 18px);
        }

        /* Quick Stat Highlights Top Row */
        .about-stats-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: clamp(10px, 1.8vw, 14px);
        }

        .about-stat-mini-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          padding: clamp(14px, 2vw, 18px);
          display: flex;
          align-items: center;
          gap: 12px;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }

        .about-stat-icon-box {
          width: 42px;
          height: 42px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .about-stat-number {
          font-size: clamp(1.2rem, 1.8vw, 1.45rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.1;
        }

        .about-stat-label {
          font-size: 0.68rem;
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        /* Value Cards Deck */
        .about-values-deck {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .about-value-card {
          background: rgba(255, 255, 255, 0.02);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 20px);
          display: flex;
          align-items: flex-start;
          gap: 14px;
          cursor: pointer;
          transition: all 0.25s ease;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }

        .about-value-card:hover,
        .about-value-card.is-active {
          background: rgba(255, 255, 255, 0.06);
          border-color: var(--card-color);
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .about-value-icon {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          background: rgba(255, 255, 255, 0.04);
        }

        .about-value-content {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .about-value-title {
          font-size: clamp(0.92rem, 1.2vw, 1.05rem);
          font-weight: 800;
          color: #ffffff;
        }

        .about-value-desc {
          font-size: clamp(0.78rem, 1vw, 0.85rem);
          color: #94a3b8;
          line-height: 1.5;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .about-container {
            grid-template-columns: 1fr;
            gap: 40px;
          }

          .about-cta-btn {
            align-self: flex-start;
          }
        }

        @media (max-width: 640px) {
          .about-section {
            padding: 40px 14px;
          }

          .about-checklist-item {
            padding: 8px 10px;
            gap: 8px;
            font-size: 0.8rem;
          }

          .about-cta-btn {
            width: 100%;
            justify-content: center;
          }

          .about-stat-mini-card {
            padding: 10px;
            gap: 8px;
          }

          .about-stat-icon-box {
            width: 34px;
            height: 34px;
          }

          .about-value-card {
            padding: 12px 14px;
            gap: 10px;
          }

          .about-value-icon {
            width: 34px;
            height: 34px;
          }
        }

        @media (max-width: 400px) {
          .about-stats-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .about-section {
          background: #ffffff;
        }

        [data-theme="light"] .about-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .about-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .about-title {
          color: #0f172a;
        }

        [data-theme="light"] .about-desc-p {
          color: #475569;
        }

        [data-theme="light"] .about-desc-p strong {
          color: #0f172a;
        }

        [data-theme="light"] .about-checklist-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          color: #1e293b;
        }

        [data-theme="light"] .about-stat-mini-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .about-stat-number {
          color: #0f172a;
        }

        [data-theme="light"] .about-stat-label {
          color: #64748b;
        }

        [data-theme="light"] .about-value-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .about-value-card:hover,
        [data-theme="light"] .about-value-card.is-active {
          background: #ffffff;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .about-value-title {
          color: #0f172a;
        }

        [data-theme="light"] .about-value-desc {
          color: #475569;
        }

/* SOURCE: about.html */
/* ============================================================
           CTA BANNER COMPONENT STYLES
           ============================================================ */

        .cta-banner-wrapper {
          position: relative;
          max-width: 1280px;
          width: calc(100% - clamp(24px, 5vw, 64px));
          margin: clamp(40px, 7vw, 80px) auto;
          background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0a0d24 100%);
          border: 1px solid rgba(99, 102, 241, 0.35);
          border-radius: clamp(20px, 3.5vw, 32px);
          padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 60px);
          overflow: hidden;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(99, 102, 241, 0.15);
        }

        .cta-banner-orb-1 {
          position: absolute;
          width: clamp(260px, 40vw, 500px);
          height: clamp(260px, 40vw, 500px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%);
          filter: blur(80px);
          top: -120px;
          left: -80px;
          pointer-events: none;
        }

        .cta-banner-orb-2 {
          position: absolute;
          width: clamp(240px, 35vw, 450px);
          height: clamp(240px, 35vw, 450px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.22), transparent 70%);
          filter: blur(80px);
          bottom: -100px;
          right: -60px;
          pointer-events: none;
        }

        .cta-banner-inner {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: 1.3fr auto;
          gap: clamp(24px, 4vw, 48px);
          align-items: center;
        }

        .cta-banner-content {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .cta-banner-badge {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(249, 115, 22, 0.15);
          border: 1px solid rgba(249, 115, 22, 0.35);
          color: #fb923c;
          font-size: clamp(0.68rem, 1vw, 0.74rem);
          font-weight: 800;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          padding: 6px 14px;
          border-radius: 50px;
          width: fit-content;
        }

        .cta-banner-heading {
          font-size: clamp(1.6rem, 3.5vw, 2.9rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.15;
          letter-spacing: -0.025em;
          margin: 0;
        }

        .cta-banner-heading-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .cta-banner-desc {
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          color: #cbd5e1;
          line-height: 1.6;
          margin: 0;
          max-width: 580px;
        }

        .cta-banner-actions {
          display: flex;
          flex-direction: column;
          gap: 12px;
          min-width: 220px;
        }

        .cta-btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 15px 30px;
          border-radius: 14px;
          background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
          color: #1e1b4b;
          font-size: 0.95rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          white-space: nowrap;
        }

        .cta-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 40px rgba(255, 255, 255, 0.35);
        }

        .cta-btn-whatsapp {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 13px 26px;
          border-radius: 14px;
          background: rgba(37, 211, 102, 0.12);
          border: 1.5px solid rgba(37, 211, 102, 0.45);
          color: #4ade80;
          font-size: 0.92rem;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.2s ease;
          white-space: nowrap;
        }

        .cta-btn-whatsapp:hover {
          background: rgba(37, 211, 102, 0.22);
          border-color: #22c55e;
          color: #ffffff;
          transform: translateY(-2px);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 880px) {
          .cta-banner-inner {
            grid-template-columns: 1fr;
            gap: 28px;
            text-align: center;
          }

          .cta-banner-content {
            align-items: center;
          }

          .cta-banner-badge {
            align-self: center;
          }

          .cta-banner-actions {
            flex-direction: row;
            justify-content: center;
            width: 100%;
          }

          .cta-btn-primary,
          .cta-btn-whatsapp {
            flex: 1;
            padding: 13px 18px;
          }
        }

        @media (max-width: 540px) {
          .cta-banner-wrapper {
            padding: 28px 16px;
            width: calc(100% - 20px);
            margin: 32px auto;
          }

          .cta-banner-actions {
            flex-direction: column;
            width: 100%;
          }

          .cta-btn-primary,
          .cta-btn-whatsapp {
            width: 100%;
          }
        }

/* SOURCE: about.html */
/* ============================================================
           RESULTS COMPONENT STYLES
           ============================================================ */

        @keyframes resultsFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes resultsScaleIn {
          from {  transform: scale(0.94); }
          to { opacity: 1; transform: scale(1); }
        }

        .results-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .results-watermark {
          position: absolute;
          top: 22%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .results-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.16), transparent 70%);
          filter: blur(90px);
          top: -100px;
          right: 5%;
          pointer-events: none;
        }

        .results-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: 10%;
          left: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .results-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .results-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .results-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .results-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .results-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Stats Bar */
        .results-stats-bar {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: clamp(8px, 1.5vw, 14px);
          max-width: 1200px;
          margin: 0 auto clamp(36px, 5vw, 56px);
          position: relative;
          z-index: 1;
        }

        .results-stat-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: clamp(12px, 1.8vw, 18px) clamp(10px, 1.5vw, 16px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          text-align: center;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .results-stat-card:hover {
          transform: translateY(-3px);
          border-color: rgba(99, 102, 241, 0.35);
        }

        .results-stat-num {
          display: flex;
          align-items: center;
          gap: 3px;
          font-size: clamp(1.3rem, 2vw, 1.75rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1;
          margin-bottom: 4px;
        }

        .results-stat-lbl {
          font-size: clamp(0.6rem, 0.8vw, 0.72rem);
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        /* Case Studies Carousel */
        .results-cases-wrap {
          max-width: 1280px;
          margin: 0 auto clamp(40px, 6vw, 64px);
          position: relative;
          z-index: 1;
        }

        .results-cases-title {
          font-size: clamp(1.1rem, 2vw, 1.4rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .results-cases-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(12px, 2vw, 20px);
        }

        .results-case-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          padding: clamp(16px, 2.5vw, 20px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          position: relative;
          overflow: hidden;
          transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .results-case-card:hover {
          transform: translateY(-4px);
          border-color: var(--case-color);
        }

        .results-case-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 10px;
          margin-bottom: 12px;
        }

        .results-case-brand {
          font-size: 1.05rem;
          font-weight: 900;
          color: #ffffff;
        }

        .results-case-cat {
          font-size: 0.65rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          padding: 3px 8px;
          border-radius: 6px;
          white-space: nowrap;
        }

        .results-case-metric-box {
          display: flex;
          align-items: baseline;
          gap: 6px;
          margin-bottom: 10px;
        }

        .results-case-metric-val {
          font-size: 1.8rem;
          font-weight: 900;
          line-height: 1;
        }

        .results-case-metric-lbl {
          font-size: 0.72rem;
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
        }

        .results-case-desc {
          font-size: 0.8rem;
          color: #94a3b8;
          line-height: 1.5;
          margin-bottom: 14px;
        }

        .results-case-sub-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          margin-bottom: 12px;
        }

        .results-case-sub-item {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 10px;
          padding: 6px 8px;
          text-align: center;
        }

        .results-case-sub-val {
          font-size: 0.88rem;
          font-weight: 800;
          display: block;
        }

        .results-case-sub-lbl {
          font-size: 0.6rem;
          color: #64748b;
          font-weight: 700;
          text-transform: uppercase;
        }

        .results-case-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }

        .results-case-tag-pill {
          font-size: 0.65rem;
          font-weight: 600;
          padding: 3px 8px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.05);
          color: #cbd5e1;
        }

        /* Platform Filter Tabs */
        .results-filter-bar {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(24px, 4vw, 36px);
          position: relative;
          z-index: 1;
        }

        .results-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: clamp(0.76rem, 1vw, 0.85rem);
          font-weight: 600;
          padding: 8px 16px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          gap: 6px;
        }

        .results-filter-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
        }

        .results-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Platform Block */
        .platform-block {
          max-width: 1280px;
          margin: 0 auto clamp(32px, 5vw, 48px);
          position: relative;
          z-index: 1;
        }

        .platform-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: clamp(16px, 3vw, 24px) clamp(16px, 3vw, 28px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          margin-bottom: clamp(14px, 2vw, 20px);
          gap: 20px;
          flex-wrap: wrap;
        }

        .platform-header-left {
          display: flex;
          align-items: center;
          gap: 16px;
          flex: 1;
          min-width: 260px;
        }

        .platform-icon-wrap {
          width: clamp(44px, 5vw, 52px);
          height: clamp(44px, 5vw, 52px);
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }

        .platform-text-wrap {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .platform-title {
          font-size: clamp(1.15rem, 1.8vw, 1.35rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.01em;
        }

        .platform-desc {
          font-size: clamp(0.78rem, 1vw, 0.86rem);
          color: #94a3b8;
          line-height: 1.45;
        }

        .platform-stats-chips {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
        }

        .platform-chip {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 6px 14px;
          border-radius: 10px;
          border: 1px solid;
          text-align: center;
        }

        .platform-chip-val {
          font-size: 0.95rem;
          font-weight: 900;
          line-height: 1.1;
        }

        .platform-chip-lbl {
          font-size: 0.62rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          .85;
        }

        /* Proof Grid */
        .platform-images-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(10px, 1.8vw, 18px);
        }

        .platform-proof-card {
          position: relative;
          background: rgba(255, 255, 255, 0.02);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          overflow: hidden;
          cursor: pointer;
          transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
          display: flex;
          flex-direction: column;
        }

        .platform-proof-card:hover {
          transform: translateY(-4px);
          border-color: var(--platform-color);
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
        }

        .platform-proof-top-bar {
          height: 3px;
          width: 100%;
        }

        .platform-img-box {
          position: relative;
          width: 100%;
          height: clamp(140px, 18vw, 180px);
          overflow: hidden;
          background: #000;
        }

        .platform-proof-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          transition: transform 0.4s ease;
        }

        .platform-proof-card:hover .platform-proof-img {
          transform: scale(1.06);
        }

        .platform-proof-overlay {
          position: absolute;
          inset: 0;
          background: rgba(3, 7, 18, 0.5);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          display: flex;
          align-items: center;
          justify-content: center;
          
          transition: opacity 0.25s ease;
        }

        .platform-proof-card:hover .platform-proof-overlay {
          opacity: 1;
        }

        .platform-zoom-btn {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        }

        .platform-proof-footer {
          padding: 10px 12px;
          display: flex;
          align-items: center;
          gap: 8px;
          background: rgba(10, 15, 30, 0.5);
        }

        .platform-proof-tag {
          font-size: 0.62rem;
          font-weight: 700;
          padding: 2px 7px;
          border-radius: 5px;
          white-space: nowrap;
          flex-shrink: 0;
          text-transform: uppercase;
        }

        .platform-proof-label {
          font-size: 0.78rem;
          font-weight: 600;
          color: #e2e8f0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        /* Lightbox Modal */
        .results-lightbox-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 99999;
          padding: clamp(12px, 3vw, 24px);
          animation: resultsFadeIn 0.2s ease-out;
        }

        .results-lightbox-close {
          position: absolute;
          top: 16px;
          right: 16px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 100;
        }

        .results-lightbox-close:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .results-lightbox-container {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(8px, 2vw, 16px);
          width: 100%;
          max-width: 960px;
          animation: resultsScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .results-lightbox-nav {
          width: clamp(38px, 4.5vw, 48px);
          height: clamp(38px, 4.5vw, 48px);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .results-lightbox-nav:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .results-lightbox-frame {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: #000000;
          border: 2px solid;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
          max-width: 100%;
          display: flex;
          flex-direction: column;
        }

        .results-lightbox-img {
          width: 100%;
          max-height: 70vh;
          object-fit: contain;
          display: block;
        }

        .results-lightbox-caption {
          padding: 12px 18px;
          background: rgba(10, 15, 30, 0.95);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
        }

        .results-lightbox-badge {
          font-size: 0.72rem;
          font-weight: 700;
          padding: 3px 9px;
          border-radius: 5px;
          color: #ffffff;
        }

        .results-lightbox-title {
          font-size: 0.86rem;
          font-weight: 600;
          color: #f1f5f9;
          flex: 1;
        }

        .results-lightbox-counter {
          font-size: 0.75rem;
          color: #94a3b8;
          font-weight: 700;
        }

        /* Bottom CTA Banner */
        .results-cta-banner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 1200px;
          margin: clamp(36px, 5vw, 60px) auto 0;
          padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 40px);
          background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(249, 115, 22, 0.08) 100%);
          border: 1px solid rgba(99, 102, 241, 0.25);
          border-radius: 24px;
          position: relative;
          z-index: 1;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          gap: 24px;
          flex-wrap: wrap;
        }

        .results-cta-text h3 {
          font-size: clamp(1.2rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 6px;
        }

        .results-cta-text p {
          font-size: clamp(0.85rem, 1vw, 0.95rem);
          color: #cbd5e1;
        }

        .results-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 13px 28px;
          border-radius: 12px;
          font-size: 0.92rem;
          font-weight: 700;
          text-decoration: none;
          box-shadow: 0 4px 18px rgba(24, 119, 242, 0.4);
          transition: all 0.25s ease;
          white-space: nowrap;
        }

        .results-cta-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 26px rgba(24, 119, 242, 0.6);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .results-cases-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .platform-images-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 768px) {
          .results-stats-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          .results-cases-grid {
            grid-template-columns: 1fr;
          }

          .platform-images-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .platform-header {
            flex-direction: column;
            align-items: flex-start;
          }

          .platform-stats-chips {
            width: 100%;
          }

          .platform-chip {
            flex: 1 1 calc(33% - 6px);
          }

          .results-cta-banner {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
          }

          .results-cta-btn {
            justify-content: center;
          }
        }

        @media (max-width: 480px) {
          .results-section {
            padding: 40px 12px;
          }

          .results-stats-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .results-stat-card {
            padding: 10px 8px;
            border-radius: 12px;
          }

          .results-stat-num {
            font-size: 1.25rem;
          }

          .platform-images-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .platform-img-box {
            height: 125px;
          }

          .platform-proof-footer {
            padding: 8px 10px;
          }

          .platform-proof-label {
            font-size: 0.72rem;
          }

          .results-lightbox-container {
            flex-direction: column;
          }

          .results-lightbox-nav {
            display: none;
          }
        }

        @media (max-width: 360px) {
          .platform-images-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .results-section {
          background: #ffffff;
        }

        [data-theme="light"] .results-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .results-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .results-title {
          color: #0f172a;
        }

        [data-theme="light"] .results-subtitle {
          color: #475569;
        }

        [data-theme="light"] .results-stat-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .results-stat-num {
          color: #0f172a;
        }

        [data-theme="light"] .results-stat-lbl {
          color: #64748b;
        }

        /* Case Studies Cards in Results.jsx */
        [data-theme="light"] .results-cases-title {
          color: #0f172a;
        }

        [data-theme="light"] .results-case-card {
          background: #ffffff;
          border: 1.5px solid rgba(0, 0, 0, 0.09);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .results-case-card:hover {
          border-color: var(--case-color);
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .results-case-brand {
          color: #0f172a;
        }

        [data-theme="light"] .results-case-metric-lbl {
          color: #475569;
          font-weight: 800;
        }

        [data-theme="light"] .results-case-desc {
          color: #334155;
        }

        [data-theme="light"] .results-case-sub-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .results-case-sub-lbl {
          color: #64748b;
          font-weight: 700;
        }

        [data-theme="light"] .results-case-tag-pill {
          background: #f1f5f9;
          color: #334155;
          border: 1px solid rgba(0, 0, 0, 0.06);
          font-weight: 600;
        }

        /* Platform Headers & Proof Screenshots */
        [data-theme="light"] .platform-header {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .platform-title {
          color: #0f172a;
        }

        [data-theme="light"] .platform-desc {
          color: #475569;
        }

        [data-theme="light"] .platform-proof-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .platform-proof-footer {
          background: #f8fafc;
        }

        [data-theme="light"] .platform-proof-label {
          color: #1e293b;
        }

        [data-theme="light"] .results-cta-banner {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .results-cta-text h3 {
          color: #0f172a;
        }

        [data-theme="light"] .results-cta-text p {
          color: #475569;
        }

/* SOURCE: about.html */
/* ============================================================
           TEAM COMPONENT STYLES
           ============================================================ */

        @keyframes teamFadeIn {
          from {  transform: scale(0.96); }
          to { opacity: 1; transform: scale(1); }
        }

        @keyframes teamOverlayFade {
          from {  }
          to { opacity: 1; }
        }

        .team-section {
          position: relative;
          padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .team-watermark {
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 220px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .team-header {
          text-align: center;
          margin-bottom: clamp(32px, 5vw, 48px);
          position: relative;
          z-index: 1;
        }

        .team-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .team-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .team-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .team-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Filter Tabs */
        .team-filter-bar {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(28px, 4vw, 40px);
          position: relative;
          z-index: 1;
        }

        .team-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: clamp(0.76rem, 1vw, 0.85rem);
          font-weight: 600;
          padding: 8px 18px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.22s ease;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }

        .team-filter-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
          border-color: rgba(255, 255, 255, 0.25);
        }

        .team-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Unified Responsive Grid */
        .team-grid-wrap {
          position: relative;
          z-index: 1;
          max-width: 1360px;
          margin: 0 auto;
          width: 100%;
        }

        .team-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(14px, 2vw, 24px);
          width: 100%;
        }

        /* Team Card */
        .team-card {
          position: relative;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          padding: clamp(16px, 2.5vw, 24px) clamp(12px, 2vw, 18px);
          text-align: center;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow: hidden;
        }

        .team-card:hover {
          transform: translateY(-6px);
          border-color: var(--member-color);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(99, 102, 241, 0.15);
        }

        .team-card-top-accent {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, transparent, var(--member-color), transparent);
          .6;
          transition: opacity 0.25s;
        }

        .team-card:hover .team-card-top-accent {
          opacity: 1;
          height: 3px;
        }

        /* Avatar */
        .team-avatar-box {
          width: clamp(86px, 11vw, 120px);
          height: clamp(86px, 11vw, 120px);
          border-radius: 18px;
          overflow: hidden;
          margin-bottom: clamp(12px, 2vw, 16px);
          position: relative;
          background: rgba(255, 255, 255, 0.06);
          border: 2px solid rgba(255, 255, 255, 0.12);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
          transition: border-color 0.25s ease, transform 0.25s ease;
        }

        .team-card:hover .team-avatar-box {
          border-color: var(--member-color);
          transform: scale(1.03);
        }

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

        .team-card:hover .team-avatar-img {
          transform: scale(1.08);
        }

        .team-avatar-zoom-btn {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(3, 7, 18, 0.6);
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          
          transition: opacity 0.25s ease;
          color: #ffffff;
        }

        .team-card:hover .team-avatar-zoom-btn {
          opacity: 1;
        }

        .team-zoom-icon-pill {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: var(--member-color);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        /* Content */
        .team-member-name {
          font-size: clamp(0.95rem, 1.2vw, 1.15rem);
          font-weight: 800;
          color: #ffffff;
          margin-bottom: 4px;
          line-height: 1.2;
        }

        .team-member-role {
          font-size: clamp(0.68rem, 0.9vw, 0.78rem);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          color: var(--member-color);
          margin-bottom: 8px;
          line-height: 1.3;
        }

        .team-member-bio {
          font-size: clamp(0.75rem, 0.95vw, 0.82rem);
          color: #94a3b8;
          line-height: 1.5;
          margin-bottom: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .team-member-divider {
          width: 28px;
          height: 2px;
          border-radius: 2px;
          background: var(--member-color);
          .8;
          margin-top: auto;
        }

        /* Modal Styles */
        .team-modal-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.82);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 9999;
          padding: clamp(14px, 3vw, 24px);
          animation: teamOverlayFade 0.2s ease-out;
        }

        .team-modal-card {
          position: relative;
          background: #0d1322;
          border: 1px solid var(--modal-color);
          border-radius: 24px;
          overflow: hidden;
          width: 100%;
          max-width: 440px;
          max-height: 88vh;
          overflow-y: auto;
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(99, 102, 241, 0.2);
          animation: teamFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .team-modal-close {
          position: absolute;
          top: 14px;
          right: 14px;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: rgba(3, 7, 18, 0.75);
          border: 1px solid rgba(255, 255, 255, 0.15);
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          transition: all 0.2s ease;
        }

        .team-modal-close:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.08);
        }

        .team-modal-img-wrap {
          width: 100%;
          height: clamp(220px, 35vh, 290px);
          overflow: hidden;
          position: relative;
          background: #000000;
        }

        .team-modal-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .team-modal-img-gradient {
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, transparent 40%, #0d1322 100%);
        }

        .team-modal-info {
          padding: clamp(18px, 4vw, 24px);
        }

        .team-modal-name {
          font-size: clamp(1.3rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 4px;
          line-height: 1.15;
        }

        .team-modal-role {
          font-size: 0.85rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          color: var(--modal-color);
          display: flex;
          align-items: center;
          gap: 6px;
          margin-bottom: 14px;
        }

        .team-modal-bio {
          font-size: 0.9rem;
          color: #cbd5e1;
          line-height: 1.65;
          margin-bottom: 20px;
        }

        .team-modal-skills-title {
          font-size: 0.74rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #94a3b8;
          margin-bottom: 10px;
        }

        .team-modal-skills-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 22px;
        }

        .team-modal-skill-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #f1f5f9;
          font-size: 0.78rem;
          font-weight: 600;
          padding: 5px 12px;
          border-radius: 50px;
        }

        .team-modal-cta {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          width: 100%;
          padding: 12px 20px;
          border-radius: 12px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          text-decoration: none;
          font-size: 0.92rem;
          font-weight: 700;
          border: none;
          cursor: pointer;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.35);
          transition: all 0.2s ease;
        }

        .team-modal-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(24, 119, 242, 0.5);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .team-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
          }
        }

        @media (max-width: 768px) {
          .team-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
          }

          .team-filter-bar {
            gap: 6px;
          }

          .team-filter-btn {
            padding: 6px 14px;
            font-size: 0.76rem;
          }
        }

        @media (max-width: 480px) {
          .team-section {
            padding: 40px 12px;
          }

          .team-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          .team-card {
            padding: 14px 10px;
            border-radius: 16px;
          }

          .team-avatar-box {
            width: 76px;
            height: 76px;
            border-radius: 14px;
            margin-bottom: 10px;
          }

          .team-member-name {
            font-size: 0.88rem;
          }

          .team-member-role {
            font-size: 0.65rem;
            margin-bottom: 6px;
          }

          .team-member-bio {
            font-size: 0.72rem;
            line-height: 1.4;
            margin-bottom: 8px;
          }

          .team-modal-card {
            border-radius: 20px;
          }
        }

        @media (max-width: 360px) {
          .team-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .team-section {
          background: #f8fafc;
        }

        [data-theme="light"] .team-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .team-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .team-title {
          color: #0f172a;
        }

        [data-theme="light"] .team-subtitle {
          color: #475569;
        }

        [data-theme="light"] .team-filter-btn {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.08);
          color: #334155;
        }

        [data-theme="light"] .team-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .team-member-name {
          color: #0f172a;
        }

        [data-theme="light"] .team-member-bio {
          color: #64748b;
        }

        [data-theme="light"] .team-modal-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.1);
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
        }

        [data-theme="light"] .team-modal-name {
          color: #0f172a;
        }

        [data-theme="light"] .team-modal-bio {
          color: #475569;
        }

        [data-theme="light"] .team-modal-skill-pill {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #1e293b;
        }

/* SOURCE: about.html */
/* ============================================================
           REVIEWS COMPONENT STYLES
           ============================================================ */

        @keyframes reviewsFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes reviewsScaleIn {
          from {  transform: scale(0.92); }
          to { opacity: 1; transform: scale(1); }
        }

        .reviews-section {
          position: relative;
          padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .reviews-watermark {
          position: absolute;
          top: 25%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        /* Section Header */
        .reviews-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .reviews-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .reviews-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .reviews-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .reviews-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Trust Summary Bar */
        .reviews-trust-bar {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(8px, 1.5vw, 16px);
          max-width: 1000px;
          margin: 0 auto clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .reviews-trust-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          padding: clamp(12px, 2vw, 16px) clamp(10px, 1.5vw, 14px);
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .reviews-trust-card:hover {
          transform: translateY(-2px);
          border-color: rgba(99, 102, 241, 0.35);
        }

        .reviews-trust-num {
          font-size: clamp(1.2rem, 2vw, 1.6rem);
          font-weight: 900;
          color: #ffffff;
          display: flex;
          align-items: center;
          gap: 4px;
          line-height: 1;
          margin-bottom: 4px;
        }

        .reviews-trust-lbl {
          font-size: clamp(0.6rem, 0.8vw, 0.72rem);
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 0.6px;
        }

        /* Mobile View Mode Switcher */
        .reviews-view-toggle {
          display: none;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin-bottom: 20px;
          position: relative;
          z-index: 1;
        }

        .reviews-toggle-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #94a3b8;
          padding: 6px 14px;
          border-radius: 50px;
          font-size: 0.76rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .reviews-toggle-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
        }

        /* Reviews Grid */
        .reviews-grid-wrap {
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        .reviews-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: clamp(10px, 1.8vw, 20px);
        }

        .reviews-card {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.09);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
          cursor: pointer;
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
          display: flex;
          flex-direction: column;
        }

        .reviews-card:hover {
          transform: translateY(-5px) scale(1.02);
          border-color: rgba(99, 102, 241, 0.5);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(99, 102, 241, 0.2);
        }

        .reviews-img-container {
          position: relative;
          width: 100%;
          aspect-ratio: 3 / 4;
          overflow: hidden;
          background: #0d1322;
        }

        .reviews-card-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          transition: transform 0.4s ease;
        }

        .reviews-card:hover .reviews-card-img {
          transform: scale(1.06);
        }

        .reviews-overlay {
          position: absolute;
          inset: 0;
          background: rgba(3, 7, 18, 0.55);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          display: flex;
          align-items: center;
          justify-content: center;
          
          transition: opacity 0.25s ease;
        }

        .reviews-card:hover .reviews-overlay {
          opacity: 1;
        }

        .reviews-zoom-pill {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #1877f2;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
        }

        .reviews-card-footer {
          padding: 10px 12px;
          background: rgba(10, 15, 30, 0.7);
          border-top: 1px solid rgba(255, 255, 255, 0.06);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 6px;
        }

        .reviews-card-tag {
          font-size: 0.65rem;
          font-weight: 700;
          color: #818cf8;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .reviews-card-verified {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 0.62rem;
          font-weight: 700;
          color: #10b981;
        }

        /* Mobile Snap Slider */
        .reviews-mobile-slider {
          display: none;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
          gap: 12px;
          padding: 6px 0 16px;
          scrollbar-width: none;
        }

        .reviews-mobile-slider::-webkit-scrollbar {
          display: none;
        }

        .reviews-mobile-slide {
          flex: 0 0 calc(85vw - 20px);
          max-width: 320px;
          scroll-snap-align: center;
          border-radius: 18px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.1);
          cursor: pointer;
        }

        .reviews-mobile-slide-img {
          width: 100%;
          aspect-ratio: 3 / 4;
          object-fit: cover;
          object-position: center top;
          display: block;
        }

        .reviews-dots {
          display: none;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin-top: 14px;
        }

        .reviews-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2);
          border: none;
          padding: 0;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .reviews-dot.is-active {
          width: 22px;
          border-radius: 10px;
          background: #6366f1;
        }

        /* Lightbox Modal */
        .reviews-lightbox-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 99999;
          padding: clamp(12px, 3vw, 24px);
          animation: reviewsFadeIn 0.2s ease-out;
        }

        .reviews-lightbox-close {
          position: absolute;
          top: 16px;
          right: 16px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 100;
        }

        .reviews-lightbox-close:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .reviews-lightbox-content {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(8px, 2vw, 16px);
          width: 100%;
          max-width: 680px;
          animation: reviewsScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reviews-lightbox-nav {
          width: clamp(38px, 4.5vw, 48px);
          height: clamp(38px, 4.5vw, 48px);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .reviews-lightbox-nav:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .reviews-lightbox-frame {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: #000000;
          border: 2px solid rgba(99, 102, 241, 0.4);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
          max-width: 100%;
          display: flex;
          flex-direction: column;
        }

        .reviews-lightbox-img {
          width: 100%;
          max-height: 72vh;
          object-fit: contain;
          display: block;
        }

        .reviews-lightbox-caption {
          padding: 12px 18px;
          background: rgba(10, 15, 30, 0.95);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
        }

        .reviews-lightbox-info {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
        }

        .reviews-lightbox-badge {
          font-size: 0.7rem;
          font-weight: 700;
          padding: 3px 8px;
          border-radius: 5px;
          background: #1877f2;
          color: #ffffff;
        }

        .reviews-lightbox-title {
          font-size: 0.84rem;
          font-weight: 600;
          color: #f1f5f9;
        }

        .reviews-lightbox-counter {
          font-size: 0.75rem;
          color: #94a3b8;
          font-weight: 700;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1200px) {
          .reviews-grid {
            grid-template-columns: repeat(4, 1fr);
          }
        }

        @media (max-width: 900px) {
          .reviews-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 640px) {
          .reviews-trust-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .reviews-view-toggle {
            display: flex;
          }

          /* Grid View on Mobile */
          .reviews-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          /* If in carousel mode on mobile */
          .reviews-grid.mode-carousel {
            display: none;
          }

          .reviews-mobile-slider.mode-carousel {
            display: flex;
          }

          .reviews-dots.mode-carousel {
            display: flex;
          }
        }

        @media (max-width: 480px) {
          .reviews-section {
            padding: 40px 12px;
          }

          .reviews-grid {
            gap: 8px;
          }

          .reviews-card {
            border-radius: 14px;
          }

          .reviews-card-footer {
            padding: 6px 8px;
          }

          .reviews-card-tag {
            font-size: 0.58rem;
          }

          .reviews-card-verified {
            font-size: 0.56rem;
          }

          .reviews-lightbox-nav {
            display: none;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .reviews-section {
          background: #f8fafc;
        }

        [data-theme="light"] .reviews-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .reviews-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .reviews-title {
          color: #0f172a;
        }

        [data-theme="light"] .reviews-subtitle {
          color: #475569;
        }

        [data-theme="light"] .reviews-trust-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .reviews-trust-val {
          color: #0f172a;
        }

        [data-theme="light"] .reviews-trust-lbl {
          color: #64748b;
        }

        [data-theme="light"] .reviews-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .reviews-card-footer {
          background: #f8fafc;
        }

        [data-theme="light"] .reviews-card-name {
          color: #0f172a;
        }

/* SOURCE: about.html */
/* ============================================================
           CONTACT COMPONENT STYLES
           ============================================================ */

        @keyframes contactPulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.04); }
        }

        @keyframes contactCheckAnim {
          0% { transform: scale(0);  }
          60% { transform: scale(1.15); opacity: 1; }
          100% { transform: scale(1); opacity: 1; }
        }

        .contact-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .contact-watermark {
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .contact-orb-1 {
          position: absolute;
          width: clamp(300px, 40vw, 600px);
          height: clamp(300px, 40vw, 600px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
          filter: blur(90px);
          top: -100px;
          left: 5%;
          pointer-events: none;
        }

        .contact-orb-2 {
          position: absolute;
          width: clamp(280px, 35vw, 500px);
          height: clamp(280px, 35vw, 500px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: 5%;
          right: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .contact-header {
          text-align: center;
          margin-bottom: clamp(32px, 5vw, 56px);
          position: relative;
          z-index: 1;
        }

        .contact-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .contact-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .contact-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .contact-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* 2-Column Grid Layout */
        .contact-grid-wrap {
          display: grid;
          grid-template-columns: 1.1fr 1.3fr;
          gap: clamp(24px, 4vw, 44px);
          max-width: 1300px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Left Column: Direct Info */
        .contact-info-col {
          display: flex;
          flex-direction: column;
          gap: clamp(14px, 2vw, 20px);
        }

        .contact-info-card {
          display: flex;
          align-items: flex-start;
          gap: 16px;
          padding: clamp(16px, 2.5vw, 22px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          text-decoration: none;
          color: inherit;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
        }

        .contact-info-card:hover {
          transform: translateY(-3px);
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.4);
        }

        .contact-info-icon-box {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          background: rgba(99, 102, 241, 0.15);
          border: 1px solid rgba(99, 102, 241, 0.25);
          color: #a5b4fc;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .contact-info-text {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .contact-info-label {
          font-size: 0.72rem;
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
        }

        .contact-info-val {
          font-size: 0.94rem;
          color: #f1f5f9;
          font-weight: 600;
          line-height: 1.45;
        }

        /* WhatsApp Direct CTA Button */
        .contact-wa-banner {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          padding: clamp(14px, 2vw, 18px) 24px;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          color: #ffffff;
          border-radius: 16px;
          text-decoration: none;
          font-size: clamp(0.9rem, 1.2vw, 1rem);
          font-weight: 800;
          box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .contact-wa-banner:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55);
        }

        /* Interactive Map Frame with Location Pin Marker */
        .contact-map-frame {
          position: relative;
          width: 100%;
          height: clamp(230px, 26vw, 290px);
          border-radius: 18px;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.1);
          background: #090e1a;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .contact-map-iframe {
          width: 100%;
          height: 100%;
          border: none;
        }

        .contact-map-overlay-badge {
          position: absolute;
          bottom: 12px;
          left: 12px;
          right: 12px;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 12px;
          padding: 8px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
          z-index: 2;
        }

        .contact-map-badge-icon {
          width: 28px;
          height: 28px;
          border-radius: 8px;
          background: rgba(239, 68, 68, 0.2);
          color: #ef4444;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .contact-map-badge-text {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-width: 0;
        }

        .contact-map-badge-title {
          font-size: 0.82rem;
          font-weight: 800;
          color: #ffffff;
          line-height: 1.2;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .contact-map-badge-sub {
          font-size: 0.7rem;
          color: #94a3b8;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .contact-map-badge-link {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          background: rgba(99, 102, 241, 0.2);
          border: 1px solid rgba(99, 102, 241, 0.35);
          color: #818cf8;
          font-size: 0.72rem;
          font-weight: 700;
          padding: 5px 10px;
          border-radius: 8px;
          text-decoration: none;
          white-space: nowrap;
          flex-shrink: 0;
          transition: all 0.2s ease;
        }

        .contact-map-badge-link:hover {
          background: #6366f1;
          color: #ffffff;
          border-color: #6366f1;
        }

        /* Light Theme Map Badge Adaptations */
        [data-theme="light"] .contact-map-overlay-badge {
          background: rgba(255, 255, 255, 0.94);
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .contact-map-badge-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-map-badge-sub {
          color: #64748b;
        }

        [data-theme="light"] .contact-map-badge-link {
          background: #eef2ff;
          border-color: rgba(79, 70, 229, 0.25);
          color: #4f46e5;
        }

        [data-theme="light"] .contact-map-badge-link:hover {
          background: #4f46e5;
          color: #ffffff;
        }

        /* Right Column: Growth Consultation Form */
        .contact-form-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 24px;
          padding: clamp(24px, 4vw, 40px);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
          position: relative;
        }

        .contact-form-title {
          font-size: clamp(1.25rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 6px;
          letter-spacing: -0.02em;
        }

        .contact-form-sub {
          font-size: 0.86rem;
          color: #94a3b8;
          margin-bottom: 24px;
          line-height: 1.5;
        }

        /* Form Row & Groups */
        .contact-form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(12px, 2vw, 16px);
          margin-bottom: 16px;
        }

        .contact-form-group {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-bottom: 16px;
        }

        .contact-label {
          font-size: 0.78rem;
          font-weight: 700;
          color: #cbd5e1;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .contact-input,
        .contact-select,
        .contact-textarea {
          width: 100%;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 12px;
          padding: 12px 16px;
          color: #ffffff;
          font-size: 0.92rem;
          font-family: inherit;
          transition: all 0.2s ease;
          box-sizing: border-box;
        }

        .contact-input:focus,
        .contact-select:focus,
        .contact-textarea:focus {
          outline: none;
          background: rgba(255, 255, 255, 0.08);
          border-color: #6366f1;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
        }

        .contact-select {
          cursor: pointer;
        }

        .contact-select option {
          background: #0d1322;
          color: #ffffff;
        }

        .contact-textarea {
          resize: vertical;
          min-height: 95px;
        }

        /* Submit Button */
        .contact-submit-btn {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 14px 28px;
          border-radius: 12px;
          border: none;
          font-size: 0.95rem;
          font-weight: 800;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
          margin-top: 8px;
        }

        .contact-submit-btn:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 10px 28px rgba(24, 119, 242, 0.6);
        }

        .contact-submit-btn:disabled {
          .6;
          cursor: not-allowed;
        }

        .contact-privacy-note {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          font-size: 0.76rem;
          color: #64748b;
          margin-top: 14px;
          text-align: center;
        }

        .contact-error-msg {
          color: #f87171;
          font-size: 0.84rem;
          font-weight: 600;
          margin-bottom: 12px;
          text-align: center;
        }

        /* Success Card View */
        .contact-success-wrap {
          text-align: center;
          padding: clamp(16px, 3vw, 24px) 0;
        }

        .contact-success-icon-box {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          background: rgba(16, 185, 129, 0.15);
          border: 2px solid #10b981;
          color: #10b981;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20px;
          animation: contactCheckAnim 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .contact-success-h3 {
          font-size: clamp(1.3rem, 2.5vw, 1.7rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 10px;
        }

        .contact-success-desc {
          font-size: 0.92rem;
          color: #cbd5e1;
          line-height: 1.6;
          margin-bottom: 24px;
        }

        .contact-steps-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 24px;
          text-align: left;
        }

        .contact-step-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 14px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 12px;
          font-size: 0.86rem;
          color: #e2e8f0;
        }

        .contact-step-badge {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #1877f2;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
          font-size: 0.75rem;
          flex-shrink: 0;
        }

        .contact-success-wa-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          color: #ffffff;
          padding: 12px 24px;
          border-radius: 12px;
          text-decoration: none;
          font-weight: 700;
          font-size: 0.9rem;
          box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .contact-grid-wrap {
            grid-template-columns: 1fr;
            gap: 32px;
          }

          .contact-info-col {
            order: 2;
          }

          .contact-form-card {
            order: 1;
          }
        }

        @media (max-width: 640px) {
          .contact-section {
            padding: 40px 14px;
          }

          .contact-form-card {
            padding: 20px 16px;
            border-radius: 18px;
          }

          .contact-form-row {
            grid-template-columns: 1fr;
            gap: 0;
            margin-bottom: 0;
          }

          .contact-info-card {
            padding: 14px;
            gap: 12px;
          }

          .contact-info-icon-box {
            width: 38px;
            height: 38px;
          }

          .contact-info-val {
            font-size: 0.88rem;
          }

          .contact-map-frame {
            height: 220px;
          }
        }

        @media (max-width: 400px) {
          .contact-form-card {
            padding: 18px 12px;
          }

          .contact-input,
          .contact-select,
          .contact-textarea {
            padding: 10px 12px;
            font-size: 0.88rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .contact-section {
          background: #ffffff;
        }

        [data-theme="light"] .contact-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .contact-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .contact-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-subtitle {
          color: #475569;
        }

        [data-theme="light"] .contact-info-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .contact-info-label {
          color: #64748b;
        }

        [data-theme="light"] .contact-info-val {
          color: #0f172a;
        }

        [data-theme="light"] .contact-map-frame {
          border-color: rgba(0, 0, 0, 0.08);
          background: #f8fafc;
        }

        [data-theme="light"] .contact-form-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .contact-form-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-form-sub {
          color: #475569;
        }

        [data-theme="light"] .contact-label {
          color: #0f172a;
          font-weight: 700;
        }

        [data-theme="light"] .contact-input,
        [data-theme="light"] .contact-select,
        [data-theme="light"] .contact-textarea {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.16);
          color: #0f172a;
        }

        [data-theme="light"] .contact-input::placeholder,
        [data-theme="light"] .contact-textarea::placeholder {
          color: #94a3b8;
        }

        [data-theme="light"] .contact-select option {
          background: #ffffff;
          color: #0f172a;
        }

        [data-theme="light"] .contact-input:focus,
        [data-theme="light"] .contact-select:focus,
        [data-theme="light"] .contact-textarea:focus {
          border-color: #6366f1;
          background: #ffffff;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
        }

/* SOURCE: about.html */
/* ============================================================
           MODERN ULTRA-PREMIUM FOOTER STYLING
           ============================================================ */

        @keyframes waFloatPulse {
          0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
          50% { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 36px rgba(37, 211, 102, 0.65); }
        }

        @keyframes statusGlow {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { .5; transform: scale(1.25); }
        }

        @keyframes beamGlow {
          0%, 100% { .6; }
          50% { opacity: 1; }
        }

        .footer-root {
          position: relative;
          background: #030712;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          color: #f8fafc;
          width: 100%;
          overflow: hidden;
          font-family: inherit;
        }

        /* Top Ambient Glow Mesh */
        .footer-ambient-mesh {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          max-width: 1200px;
          height: 240px;
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.15) 0%, rgba(249, 115, 22, 0.06) 60%, transparent 100%);
          pointer-events: none;
          z-index: 0;
        }

        .footer-top-accent-line {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.6) 30%, rgba(249, 115, 22, 0.6) 70%, transparent 100%);
          animation: beamGlow 4s ease-in-out infinite;
        }

        .footer-main-wrap {
          position: relative;
          z-index: 1;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(48px, 6vw, 76px) clamp(16px, 4vw, 48px) clamp(24px, 3.5vw, 40px);
        }

        /* ── Main Footer Columns Grid ── */
        .footer-grid {
          display: grid;
          grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
          gap: clamp(28px, 4vw, 56px);
        }

        /* Column 1: Brand */
        .footer-brand-col {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .footer-brand-link {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          color: #ffffff;
          width: fit-content;
        }

        .footer-logo-box {
          width: 48px;
          height: 48px;
          border-radius: 14px;
          overflow: hidden;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
          border: 1.5px solid rgba(255, 255, 255, 0.15);
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .footer-brand-link:hover .footer-logo-box {
          transform: scale(1.08) rotate(3deg);
        }

        .footer-logo-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          padding: 3px;
        }

        .footer-brand-title {
          display: flex;
          flex-direction: column;
        }

        .footer-brand-name {
          font-size: 1.3rem;
          font-weight: 900;
          letter-spacing: -0.02em;
          background: linear-gradient(135deg, #ffffff 40%, #c7d2fe 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1.1;
        }

        .footer-brand-badge {
          font-size: 0.62rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1.2px;
          color: #818cf8;
        }

        .footer-tagline {
          font-size: clamp(0.88rem, 1.05vw, 0.94rem);
          font-weight: 500;
          line-height: 1.6;
          color: #94a3b8;
          margin: 0;
        }

        .footer-tagline-highlight {
          color: #f1f5f9;
          font-weight: 700;
        }

        /* Live Status Pill */
        .footer-status-pill {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 14px;
          background: rgba(16, 185, 129, 0.08);
          border: 1px solid rgba(16, 185, 129, 0.25);
          border-radius: 9999px;
          font-size: 0.76rem;
          font-weight: 700;
          color: #34d399;
          width: fit-content;
        }

        .footer-status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 10px #10b981;
          animation: statusGlow 2s infinite ease-in-out;
        }

        /* Social Icons */
        .footer-socials {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
          margin-top: 2px;
        }

        .footer-social-icon {
          width: 38px;
          height: 38px;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.09);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #cbd5e1;
          text-decoration: none;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer-social-icon:hover {
          transform: translateY(-3px) scale(1.08);
          background: var(--social-bg, rgba(99, 102, 241, 0.2));
          border-color: var(--social-color, #6366f1);
          color: var(--social-color, #ffffff);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
        }

        /* Nav Columns */
        .footer-nav-col {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .footer-col-title {
          font-size: 0.88rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #ffffff;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .footer-col-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #6366f1;
        }

        .footer-nav-link {
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          width: fit-content;
          gap: 8px;
          padding: 3px 0;
        }

        .footer-nav-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-service-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          padding: 3px 0;
        }

        .footer-service-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-nav-tag {
          font-size: 0.62rem;
          font-weight: 800;
          padding: 2px 7px;
          border-radius: 50px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .footer-nav-tag.hot {
          background: rgba(249, 115, 22, 0.15);
          color: #fb923c;
          border: 1px solid rgba(249, 115, 22, 0.3);
        }

        .footer-nav-tag.pro {
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .footer-nav-tag.lead {
          background: rgba(16, 185, 129, 0.15);
          color: #34d399;
          border: 1px solid rgba(16, 185, 129, 0.3);
        }

        /* Contact Items */
        .footer-contact-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .footer-contact-card {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 10px 12px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 12px;
          text-decoration: none;
          color: #cbd5e1;
          transition: all 0.2s ease;
        }

        .footer-contact-card:hover {
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.35);
          color: #ffffff;
          transform: translateY(-2px);
        }

        .footer-contact-icon-box {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-top: 1px;
        }

        .footer-contact-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .footer-contact-label {
          font-size: 0.68rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: #64748b;
        }

        .footer-contact-val {
          font-size: 0.84rem;
          font-weight: 600;
          line-height: 1.4;
          color: #f1f5f9;
        }

        /* ── Divider ── */
        .footer-divider {
          height: 1px;
          width: 100%;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.3) 50%, transparent 100%);
          margin: clamp(36px, 4vw, 48px) 0 clamp(20px, 3vw, 28px);
        }

        /* ── Bottom Bar ── */
        .footer-bottom-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          flex-wrap: wrap;
        }

        .footer-copy-text {
          font-size: 0.82rem;
          color: #64748b;
          margin: 0;
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .footer-legal-links {
          display: flex;
          align-items: center;
          gap: clamp(14px, 2vw, 24px);
          flex-wrap: wrap;
        }

        .footer-legal-btn {
          background: none;
          border: none;
          color: #64748b;
          font-size: 0.8rem;
          cursor: pointer;
          transition: color 0.2s ease;
          padding: 2px 0;
          font-family: inherit;
          position: relative;
        }

        .footer-legal-btn:hover {
          color: #cbd5e1;
        }

        .footer-back-to-top {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          position: relative;
          z-index: 10;
          transition: all 0.2s ease;
          font-family: inherit;
          outline: none;
          user-select: none;
        }

        .footer-back-to-top:hover {
          background: rgba(99, 102, 241, 0.2);
          border-color: rgba(99, 102, 241, 0.4);
          color: #ffffff;
          transform: translateY(-2px);
        }

        /* ── Floating WhatsApp Widget ── */
        .footer-wa-float {
          position: fixed;
          bottom: calc(20px + env(safe-area-inset-bottom, 0px));
          right: 20px;
          width: 54px;
          height: 54px;
          border-radius: 50%;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          z-index: 999;
          cursor: pointer;
          text-decoration: none;
          box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
          animation: waFloatPulse 2.5s ease-in-out infinite;
          transition: transform 0.25s ease;
        }

        .footer-wa-float:hover {
          transform: scale(1.12) !important;
        }

        /* ============================================================
           LIGHT THEME ADAPTATIONS
           ============================================================ */
        [data-theme="light"] .footer-root {
          background: #ffffff;
          border-top-color: rgba(0, 0, 0, 0.08);
          color: #0f172a;
        }

        [data-theme="light"] .footer-ambient-mesh {
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.1) 0%, rgba(249, 115, 22, 0.04) 60%, transparent 100%);
        }

        [data-theme="light"] .footer-brand-name {
          background: linear-gradient(135deg, #0f172a 40%, #4338ca 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        [data-theme="light"] .footer-tagline {
          color: #64748b;
        }

        [data-theme="light"] .footer-tagline-highlight {
          color: #0f172a;
        }

        [data-theme="light"] .footer-social-icon {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-social-icon:hover {
          background: var(--social-bg, #eef2ff);
          border-color: var(--social-color, #4f46e5);
          color: var(--social-color, #4f46e5);
        }

        [data-theme="light"] .footer-col-title {
          color: #0f172a;
        }

        [data-theme="light"] .footer-nav-link,
        [data-theme="light"] .footer-service-link {
          color: #64748b;
        }

        [data-theme="light"] .footer-nav-link:hover,
        [data-theme="light"] .footer-service-link:hover {
          color: #4f46e5;
        }

        [data-theme="light"] .footer-contact-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
          color: #334155;
        }

        [data-theme="light"] .footer-contact-card:hover {
          background: #f1f5f9;
          border-color: rgba(79, 70, 229, 0.3);
          color: #0f172a;
        }

        [data-theme="light"] .footer-contact-val {
          color: #0f172a;
        }

        [data-theme="light"] .footer-divider {
          background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, 0.2) 50%, transparent 100%);
        }

        [data-theme="light"] .footer-copy-text,
        [data-theme="light"] .footer-legal-btn {
          color: #64748b;
        }

        [data-theme="light"] .footer-legal-btn:hover {
          color: #0f172a;
        }

        [data-theme="light"] .footer-back-to-top {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-back-to-top:hover {
          background: #eef2ff;
          border-color: rgba(79, 70, 229, 0.3);
          color: #4f46e5;
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS
           ============================================================ */
        @media (max-width: 1100px) {
          .footer-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
          }
        }

        @media (max-width: 600px) {
          .footer-grid {
            grid-template-columns: 1fr;
            gap: 32px;
          }

          .footer-bottom-bar {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 16px;
          }

          .footer-legal-links {
            justify-content: center;
            gap: 14px;
          }

          .footer-wa-float {
            width: 48px;
            height: 48px;
            bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            right: 16px;
          }
        }

/* SOURCE: about.html */
.marquee-section {
          background: linear-gradient(90deg, #1a2aff 0%, #0d1499 25%, #1a2aff 50%, #0d1499 75%, #1a2aff 100%);
          background-size: 200% 100%;
          animation: stripShift 8s linear infinite;
          padding: 13px 0;
          overflow: hidden;
          position: relative;
          z-index: 999;
          box-shadow: 0 4px 32px rgba(26,42,255,0.45), 0 -1px 0 rgba(255,255,255,0.08);
        }

        @keyframes stripShift {
          0% { background-position: 0% 0%; }
          100% { background-position: 200% 0%; }
        }

        /* Top shimmer */
        .marquee-section::before {
          content: '';
          position: absolute; 
          top: 0; 
          left: 0; 
          right: 0; 
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
          pointer-events: none;
        }

        .marquee-track { 
          overflow: hidden; 
          white-space: nowrap; 
          width: 100%;
        }

        .marquee-inner {
          display: inline-flex;
          align-items: center;
          width: max-content;
          animation: marqueeScroll 30s linear infinite;
          will-change: transform;
        }
        .marquee-inner:hover { 
          animation-play-state: paused; 
        }

        .marquee-item {
          display: inline-flex; 
          align-items: center; 
          gap: 9px;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.72rem; 
          font-weight: 800;
          color: #ffffff;
          letter-spacing: 1.2px;
          padding: 0 30px;
          white-space: nowrap;
          text-transform: uppercase;
          text-shadow: 0 1px 8px rgba(0,0,0,0.2);
          position: relative;
          flex-shrink: 0;
        }

        .marquee-item::after {
          content: '◆';
          position: absolute; 
          right: 0;
          font-size: 0.38rem;
          color: rgba(255,255,255,0.4);
          transform: translateX(50%);
        }

        .marquee-item svg {
          color: #fff;
          .9;
          flex-shrink: 0;
        }

        @keyframes marqueeScroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }

        @media (max-width: 480px) {
          .marquee-section { padding: 11px 0; }
          .marquee-item { font-size: 0.64rem; padding: 0 20px; }
        }

/* SOURCE: contact.html */
/* ============================================================
           HERO SECTION COMPONENT STYLES
           ============================================================ */

        @keyframes hoSpin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes hoCounter {
          from { transform: rotate(0deg); }
          to { transform: rotate(-360deg); }
        }

        @keyframes hoSpinRev {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }

        @keyframes centerPulseRing {
          0%, 100% { transform: translate(-50%, -50%) scale(1); .25; }
          50% { transform: translate(-50%, -50%) scale(1.15); .7; }
        }

        @keyframes photonOrbit {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes photonOrbitRev {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }

        @keyframes iconPing {
          0% { transform: scale(1); .8; }
          100% { transform: scale(1.6);  }
        }

        @keyframes clientsScroll {
          0% { transform: translate3d(0, 0, 0); }
          100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes clientsScrollRev {
          0% { transform: translate3d(-50%, 0, 0); }
          100% { transform: translate3d(0, 0, 0); }
        }

        @keyframes cursorBlink {
          0%, 100% { opacity: 1; }
          50% {  }
        }

        @keyframes floatAmbient {
          0%, 100% { transform: translate(0, 0); }
          50% { transform: translate(15px, -20px); }
        }

        .hero-section {
          position: relative;
          min-height: 100vh;
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background: linear-gradient(135deg, #030712 0%, #0a0f1e 50%, #0f1629 100%);
          isolation: isolate;
          contain: paint;
        }

        /* Ambient Glow & Grid Layer */
        .hero-bg-layer {
          position: absolute;
          inset: 0;
          overflow: hidden;
          pointer-events: none;
          z-index: 0;
        }

        .hero-grid-overlay {
          position: absolute;
          inset: 0;
          background-image: 
            linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
          background-size: clamp(40px, 6vw, 64px) clamp(40px, 6vw, 64px);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
          -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
        }

        .hero-glow-blob-1 {
          position: absolute;
          width: clamp(300px, 50vw, 750px);
          height: clamp(300px, 50vw, 750px);
          background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 68%);
          border-radius: 50%;
          filter: blur(80px);
          top: -150px;
          left: -100px;
          animation: floatAmbient 12s ease-in-out infinite;
        }

        .hero-glow-blob-2 {
          position: absolute;
          width: clamp(280px, 45vw, 650px);
          height: clamp(280px, 45vw, 650px);
          background: radial-gradient(circle, rgba(249,115,22,0.16), transparent 68%);
          border-radius: 50%;
          filter: blur(80px);
          bottom: -150px;
          right: -80px;
          animation: floatAmbient 14s ease-in-out infinite reverse;
        }

        .hero-watermark {
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: clamp(64px, 16vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(99,102,241,0.04);
          letter-spacing: clamp(8px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        /* Hero Main Layout */
        .hero-main-wrapper {
          position: relative;
          z-index: 2;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(36px, 6vw, 64px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 60px);
        }

        .hero-grid {
          display: grid;
          grid-template-columns: 1.15fr 0.95fr;
          align-items: center;
          gap: clamp(32px, 5vw, 64px);
          width: 100%;
        }

        .hero-text-col {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          width: 100%;
          max-width: 620px;
        }

        /* Top Announcement Badge */
        .hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: rgba(99,102,241,0.12);
          border: 1px solid rgba(99,102,241,0.3);
          color: #c7d2fe;
          font-size: clamp(0.7rem, 1vw, 0.78rem);
          font-weight: 700;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          padding: clamp(6px, 1.2vw, 9px) clamp(14px, 2vw, 20px);
          border-radius: 50px;
          margin-bottom: clamp(18px, 3vw, 26px);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 4px 20px rgba(99,102,241,0.18);
          max-width: 100%;
          word-break: break-word;
        }

        .hero-badge-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 10px #10b981;
          flex-shrink: 0;
        }

        /* Hero Headline */
        .hero-headline {
          font-size: clamp(2.35rem, 5.2vw + 0.5rem, 5.4rem);
          font-weight: 900;
          line-height: 1.05;
          color: #ffffff;
          margin-bottom: clamp(14px, 2.5vw, 20px);
          letter-spacing: -0.035em;
          text-shadow: 0 4px 30px rgba(0,0,0,0.5);
          word-break: break-word;
        }

        .hero-headline-accent {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          display: inline-block;
        }

        .hero-cursor {
          color: #ff6b00;
          font-weight: 300;
          display: inline-block;
          margin-left: 2px;
          animation: cursorBlink 0.9s infinite;
        }

        .hero-headline-bar {
          width: clamp(70px, 12vw, 110px);
          height: 4px;
          background: linear-gradient(90deg, #ff6b00, rgba(255,107,0,0.1));
          border-radius: 4px;
          margin-bottom: clamp(16px, 2.5vw, 24px);
        }

        /* Hero Description */
        .hero-desc {
          color: #cbd5e1;
          font-size: clamp(0.95rem, 1.1vw + 0.4rem, 1.1rem);
          line-height: 1.8;
          max-width: 520px;
          margin-bottom: clamp(24px, 3.5vw, 32px);
          font-weight: 400;
        }

        .hero-desc strong {
          color: #ffffff;
          font-weight: 700;
        }

        /* CTA Buttons */
        .hero-cta-group {
          display: flex;
          align-items: center;
          gap: 14px;
          flex-wrap: wrap;
          width: 100%;
          margin-bottom: clamp(24px, 4vw, 34px);
        }

        .hero-btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border: none;
          padding: 13px 28px;
          border-radius: 12px;
          font-size: clamp(0.9rem, 1vw, 1rem);
          font-weight: 700;
          cursor: pointer;
          box-shadow: 0 4px 20px rgba(24,119,242,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          text-decoration: none;
        }

        .hero-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 30px rgba(24,119,242,0.6);
        }

        .hero-btn-primary:active {
          transform: translateY(0);
        }

        .hero-btn-secondary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: rgba(255,255,255,0.06);
          color: #f8fafc;
          border: 1.5px solid rgba(255,255,255,0.22);
          padding: 13px 26px;
          border-radius: 12px;
          font-size: clamp(0.9rem, 1vw, 1rem);
          font-weight: 600;
          cursor: pointer;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hero-btn-secondary:hover {
          background: rgba(255,255,255,0.12);
          border-color: rgba(255,255,255,0.45);
          color: #ffffff;
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        /* Stats Grid */
        .hero-stats-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(8px, 1.5vw, 12px);
          width: 100%;
        }

        .hero-stat-card {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding: clamp(10px, 1.5vw, 14px) clamp(10px, 1.5vw, 16px);
          border-radius: 14px;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          transition: all 0.25s ease;
          position: relative;
          overflow: hidden;
        }

        .hero-stat-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 24px rgba(0,0,0,0.35);
        }

        .hero-stat-num {
          font-size: clamp(1.25rem, 2vw + 0.3rem, 1.7rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1.1;
          margin-bottom: 4px;
        }

        .hero-stat-label {
          font-size: clamp(0.58rem, 0.7vw + 0.2rem, 0.68rem);
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          line-height: 1.25;
        }

        /* Hero Orbit Showcase */
        .hero-orbit-col {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          position: relative;
        }

        .hero-orbit-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          position: relative;
        }

        .hero-orbit-box {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          user-select: none;
          flex-shrink: 0;
        }

        /* Ambient background glow */
        .hero-orbit-ambient-aura {
          position: absolute;
          inset: 6%;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(249, 115, 22, 0.08) 45%, transparent 72%);
          filter: blur(40px);
          pointer-events: none;
          z-index: 0;
        }

        /* Concentric Track Rings */
        .hero-orbit-track {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          pointer-events: none;
          z-index: 1;
        }

        /* Outer Celestial Ring */
        .hero-orbit-track-outer {
          border: 1px dashed rgba(99, 102, 241, 0.22);
          box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.05);
        }

        /* Middle Primary Track - where the 6 planets travel */
        .hero-orbit-track-main {
          border: 1.5px solid rgba(255, 255, 255, 0.12);
          box-shadow: 
            0 0 16px rgba(99, 102, 241, 0.15),
            inset 0 0 16px rgba(99, 102, 241, 0.1);
        }

        .hero-orbit-track-glow {
          position: absolute;
          inset: -1px;
          border-radius: 50%;
          border: 1.5px solid transparent;
          background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(249,115,22,0.25)) border-box;
          -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          .6;
        }

        /* Inner Celestial Ring */
        .hero-orbit-track-inner {
          border: 1px dashed rgba(249, 115, 22, 0.22);
          animation: hoSpinRev 38s linear infinite;
        }

        /* Orbiting Photons / Particles */
        .hero-orbit-photon-wrap {
          position: absolute;
          inset: 0;
          border-radius: 50%;
        }

        .outer-photon-wrap {
          animation: photonOrbit 32s linear infinite;
        }

        .inner-photon-wrap-1 {
          animation: photonOrbitRev 24s linear infinite;
        }

        .inner-photon-wrap-2 {
          animation: photonOrbit 18s linear infinite;
        }

        .hero-orbit-photon {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #60a5fa;
          box-shadow: 0 0 12px 3px #60a5fa, 0 0 20px #3b82f6;
        }

        .hero-orbit-photon.inner-photon {
          background: #fb923c;
          box-shadow: 0 0 10px 2px #fb923c, 0 0 18px #ea580c;
          width: 6px;
          height: 6px;
        }

        .hero-orbit-photon.inner-photon.alt {
          top: auto;
          bottom: 0;
          background: #a855f7;
          box-shadow: 0 0 10px 2px #a855f7;
          width: 5px;
          height: 5px;
        }

        /* Rotator */
        .hero-orbit-rotator {
          position: absolute;
          inset: 0;
          animation: hoSpin 28s linear infinite;
          z-index: 5;
        }

        .hero-orbit-rotator.is-paused {
          animation-play-state: paused;
        }

        /* Orbit Node (Planet) Anchor */
        .hero-orbit-node {
          position: absolute;
          transform: translate(-50%, -50%);
          cursor: pointer;
          outline: none;
          z-index: 10;
          transition: z-index 0.2s ease;
        }

        .hero-orbit-node.is-node-hovered {
          z-index: 30;
        }

        /* Counter-rotating container keeps content upright around exact anchor */
        .hero-orbit-node-inner {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          animation: hoCounter 28s linear infinite;
          transform-origin: center center;
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .hero-orbit-node-inner.is-paused {
          animation-play-state: paused;
        }

        .hero-orbit-node:hover .hero-orbit-node-inner,
        .hero-orbit-node:focus-visible .hero-orbit-node-inner {
          transform: scale(1.18);
        }

        /* Icon Sphere */
        .hero-orbit-icon {
          position: relative;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(3, 7, 18, 0.98) 100%);
          border: 2px solid var(--service-color);
          box-shadow: 
            0 0 18px rgba(0, 0, 0, 0.8),
            0 0 16px var(--service-color),
            inset 0 1px 2px rgba(255, 255, 255, 0.3);
          transition: all 0.3s ease;
          overflow: visible;
        }

        .hero-orbit-node:hover .hero-orbit-icon {
          box-shadow: 
            0 0 30px var(--service-color),
            0 8px 24px rgba(0, 0, 0, 0.9),
            inset 0 1px 4px rgba(255, 255, 255, 0.5);
          border-color: #ffffff;
        }

        .hero-orbit-icon-img {
          object-fit: contain;
          border-radius: 8px;
          z-index: 2;
          transition: transform 0.3s ease;
        }

        .hero-orbit-node:hover .hero-orbit-icon-img {
          transform: scale(1.08);
        }

        .hero-orbit-icon-glow {
          position: absolute;
          inset: -4px;
          border-radius: 50%;
          .3;
          filter: blur(8px);
          transition: opacity 0.3s ease;
          z-index: 1;
        }

        .hero-orbit-node:hover .hero-orbit-icon-glow {
          .85;
          filter: blur(12px);
        }

        .hero-orbit-icon-ping {
          position: absolute;
          inset: -2px;
          border-radius: 50%;
          border: 1.5px solid var(--service-color);
          animation: iconPing 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
          pointer-events: none;
          
        }

        .hero-orbit-node:hover .hero-orbit-icon-ping {
          opacity: 1;
        }

        /* Label Pill */
        .hero-orbit-node-label {
          font-size: clamp(0.58rem, 0.8vw, 0.72rem);
          font-weight: 800;
          text-align: center;
          white-space: nowrap;
          background: rgba(3, 7, 18, 0.92);
          padding: 3px 9px;
          border-radius: 20px;
          color: #f1f5f9;
          border: 1px solid rgba(255, 255, 255, 0.16);
          border-left: 2.5px solid var(--service-color);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
          pointer-events: none;
          transition: all 0.25s ease;
        }

        .hero-orbit-node:hover .hero-orbit-node-label {
          background: rgba(15, 23, 42, 0.98);
          color: #ffffff;
          border-color: var(--service-color);
          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 10px var(--service-color);
        }

        /* Center Hub (Sun Core) */
        .hero-orbit-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 8;
        }

        .hero-orbit-center-core {
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 
            0 0 0 3px rgba(255, 255, 255, 0.85),
            0 0 30px rgba(99, 102, 241, 0.5),
            0 0 60px rgba(249, 115, 22, 0.25),
            0 14px 40px rgba(0, 0, 0, 0.5);
          overflow: hidden;
          z-index: 2;
        }

        .hero-orbit-center-img {
          width: 86%;
          height: 86%;
          object-fit: contain;
          border-radius: 50%;
        }

        .hero-orbit-center-overlay {
          position: absolute;
          bottom: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .hero-orbit-center-badge {
          font-size: 0.52rem;
          font-weight: 900;
          letter-spacing: 0.8px;
          text-transform: uppercase;
          background: linear-gradient(135deg, #6366f1, #f97316);
          color: #ffffff;
          padding: 1px 6px;
          border-radius: 10px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        /* Pulse Rings */
        .hero-orbit-pulse-ring {
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 50%;
          pointer-events: none;
        }

        .hero-orbit-pulse-ring.ring-1 {
          width: 125%;
          height: 125%;
          border: 1.5px solid rgba(99, 102, 241, 0.35);
          animation: centerPulseRing 3.2s ease-in-out infinite;
        }

        .hero-orbit-pulse-ring.ring-2 {
          width: 155%;
          height: 155%;
          border: 1px dashed rgba(249, 115, 22, 0.3);
          animation: centerPulseRing 3.2s ease-in-out infinite 1.1s;
        }

        .hero-orbit-pulse-ring.ring-3 {
          width: 190%;
          height: 190%;
          border: 1px solid rgba(99, 102, 241, 0.15);
          animation: centerPulseRing 3.2s ease-in-out infinite 2.2s;
        }



        /* Quick Service Chips for Small Devices */
        .hero-orbit-chips {
          display: none;
          flex-direction: column;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        }

        .hero-orbit-chips-title {
          font-size: 0.72rem;
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 1.5px;
          margin-bottom: 10px;
        }

        .hero-orbit-chips-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
          width: 100%;
        }

        .hero-orbit-chip {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.12);
          border-left: 3px solid var(--chip-color);
          border-radius: 20px;
          padding: 6px 14px;
          color: #f1f5f9;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          transition: all 0.2s ease;
        }

        .hero-orbit-chip:hover,
        .hero-orbit-chip:active {
          background: rgba(255,255,255,0.12);
          transform: translateY(-1px);
        }

        .hero-orbit-chip-icon {
          width: 18px;
          height: 18px;
          object-fit: contain;
          border-radius: 4px;
        }

        .hero-orbit-chip-arrow {
          color: #94a3b8;
        }





        /* Modal Styles */
        .service-modal-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.78);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: clamp(12px, 3vw, 24px);
          animation: fadeIn 0.2s ease-out;
        }

        @keyframes fadeIn {
          from {  }
          to { opacity: 1; }
        }

        .service-modal-card {
          width: 100%;
          max-width: 500px;
          max-height: 88vh;
          border-radius: 24px;
          overflow-y: auto;
          box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
          background: #ffffff;
          position: relative;
        }

        .service-modal-close {
          position: absolute;
          top: 14px;
          right: 14px;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.3);
          border: none;
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          transition: background 0.2s, transform 0.2s;
        }

        .service-modal-close:hover {
          background: rgba(0, 0, 0, 0.55);
          transform: scale(1.08);
        }

        .service-modal-header {
          padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 28px);
          display: flex;
          align-items: center;
          gap: 16px;
          position: relative;
        }

        .service-modal-icon-wrap {
          width: 54px;
          height: 54px;
          border-radius: 16px;
          background: rgba(255,255,255,0.22);
          backdrop-filter: blur(8px);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }

        .service-modal-icon-wrap img {
          width: 38px;
          height: 38px;
          object-fit: contain;
          border-radius: 8px;
        }

        .service-modal-title-wrap {
          flex: 1;
          min-width: 0;
          padding-right: 28px;
        }

        .service-modal-title {
          font-size: clamp(1.25rem, 2vw, 1.45rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.02em;
          line-height: 1.2;
        }

        .service-modal-tagline {
          font-size: 0.82rem;
          color: rgba(255,255,255,0.88);
          margin-top: 3px;
          line-height: 1.35;
        }

        .service-modal-badge {
          position: absolute;
          top: 14px;
          right: 54px;
          background: rgba(255,255,255,0.25);
          border: 1px solid rgba(255,255,255,0.4);
          color: #ffffff;
          font-size: 0.65rem;
          font-weight: 800;
          padding: 3px 10px;
          border-radius: 50px;
          letter-spacing: 0.4px;
        }

        .service-modal-body {
          padding: clamp(20px, 4vw, 28px);
          background: #ffffff;
        }

        .service-modal-desc {
          color: #4b5563;
          font-size: 0.88rem;
          line-height: 1.7;
          margin-bottom: 20px;
        }

        .service-modal-features-title {
          font-size: 0.78rem;
          font-weight: 800;
          color: #111827;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 12px;
        }

        .service-modal-features-list {
          list-style: none;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px 12px;
          margin-bottom: 24px;
          padding: 0;
        }

        .service-modal-features-list li {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 0.82rem;
          color: #374151;
          font-weight: 500;
        }

        .service-modal-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 20px;
          background: #f8fafc;
          border-radius: 16px;
          border: 1px solid #e2e8f0;
          gap: 14px;
          flex-wrap: wrap;
        }

        .service-modal-price-label {
          font-size: 0.68rem;
          color: #64748b;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        .service-modal-price-val {
          font-size: 1.65rem;
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1;
        }

        .service-modal-period {
          font-size: 0.78rem;
          font-weight: 600;
          color: #64748b;
          margin-left: 3px;
        }

        .service-modal-cta {
          color: #ffffff;
          border: none;
          padding: 11px 22px;
          border-radius: 50px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 0.88rem;
          font-weight: 700;
          box-shadow: 0 4px 14px rgba(0,0,0,0.18);
          transition: transform 0.2s, box-shadow 0.2s;
        }

        .service-modal-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 22px rgba(0,0,0,0.25);
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS (Desktop, Tablet, Mobile)
           ============================================================ */

        /* Tablets & Medium Screens (<= 1024px) */
        @media (max-width: 1024px) {
          .hero-grid {
            grid-template-columns: 1fr;
            gap: 48px;
          }

          .hero-text-col {
            max-width: 100%;
            align-items: center;
            text-align: center;
          }

          .hero-headline {
            text-align: center;
          }

          .hero-headline-bar {
            margin-left: auto;
            margin-right: auto;
          }

          .hero-desc {
            text-align: center;
            max-width: 600px;
          }

          .hero-cta-group {
            justify-content: center;
          }

          .hero-stats-grid {
            max-width: 600px;
            margin: 0 auto;
          }
        }

        /* Portrait Tablets & Large Phones (<= 768px) */
        @media (max-width: 768px) {
          .hero-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            max-width: 100%;
          }

          .hero-orbit-chips {
            display: flex;
          }

          .service-modal-features-list {
            grid-template-columns: 1fr;
          }
        }

        /* Mobile Phones (<= 540px) */
        @media (max-width: 540px) {
          .hero-main-wrapper {
            padding: 28px 14px 36px;
          }

          .hero-badge {
            font-size: 0.68rem;
            padding: 6px 14px;
            letter-spacing: 0.8px;
            margin-bottom: 16px;
          }

          .hero-headline {
            font-size: clamp(2.1rem, 9.5vw, 2.7rem);
            line-height: 1.1;
            margin-bottom: 14px;
          }

          .hero-desc {
            font-size: 0.92rem;
            line-height: 1.7;
            margin-bottom: 22px;
          }

          .hero-cta-group {
            flex-direction: column;
            width: 100%;
            gap: 10px;
            margin-bottom: 24px;
          }

          .hero-btn-primary,
          .hero-btn-secondary {
            width: 100%;
            padding: 13px 20px;
            font-size: 0.94rem;
          }

          .hero-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .hero-stat-card {
            padding: 10px 12px;
            border-radius: 12px;
          }

          .hero-stat-num {
            font-size: 1.35rem;
          }

          .hero-stat-label {
            font-size: 0.62rem;
            letter-spacing: 0.5px;
          }

          .service-modal-card {
            max-height: 92vh;
            border-radius: 20px;
          }

          .service-modal-footer {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
          }

          .service-modal-cta {
            width: 100%;
            justify-content: center;
          }

          .clients-strip-wrapper {
            padding: 36px 0 28px;
          }

          .clients-strip-header {
            padding: 0 16px;
            margin-bottom: 20px;
          }
        }

        /* Extra Small Phones (<= 380px) */
        @media (max-width: 380px) {
          .hero-headline {
            font-size: 1.95rem;
          }

          .hero-badge {
            font-size: 0.64rem;
          }

          .hero-stat-num {
            font-size: 1.25rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .hero-section {
          background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #fef3c7 100%);
        }

        [data-theme="light"] .hero-badge {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .hero-headline {
          color: #0f172a;
          text-shadow: none;
        }

        [data-theme="light"] .hero-desc {
          color: #475569;
        }

        [data-theme="light"] .hero-desc strong {
          color: #0f172a;
        }

        [data-theme="light"] .hero-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .hero-stat-card {
          background: rgba(255, 255, 255, 0.85) !important;
          border-color: rgba(0, 0, 0, 0.08) !important;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .hero-stat-num {
          color: #0f172a;
        }

        [data-theme="light"] .hero-stat-label {
          color: #64748b;
        }

        [data-theme="light"] .hero-orbit-chip {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          color: #0f172a;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .hero-orbit-ambient-aura {
          background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(249, 115, 22, 0.06) 45%, transparent 72%);
        }

        [data-theme="light"] .hero-orbit-track-outer {
          border-color: rgba(99, 102, 241, 0.25);
        }

        [data-theme="light"] .hero-orbit-track-main {
          border-color: rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 16px rgba(99, 102, 241, 0.08);
        }

        [data-theme="light"] .hero-orbit-track-inner {
          border-color: rgba(249, 115, 22, 0.28);
        }

        [data-theme="light"] .hero-orbit-icon {
          background: #ffffff;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 12px var(--service-color);
        }

        [data-theme="light"] .hero-orbit-node-label {
          background: #ffffff;
          color: #0f172a;
          border-color: rgba(0, 0, 0, 0.12);
          border-left: 2.5px solid var(--service-color);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }



        [data-theme="light"] .hero-btn-secondary {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.12);
          color: #0f172a;
        }

        [data-theme="light"] .hero-btn-secondary:hover {
          background: rgba(0, 0, 0, 0.08);
        }

/* SOURCE: contact.html */
/* ============================================================
           STANDALONE CLIENTS MARQUEE SECTION STYLES
           ============================================================ */

        @keyframes clientsScrollNormal {
          0% { transform: translate3d(0, 0, 0); }
          100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes clientsScrollReverse {
          0% { transform: translate3d(-50%, 0, 0); }
          100% { transform: translate3d(0, 0, 0); }
        }

        .clients-strip-section {
          position: relative;
          z-index: 10;
          width: 100%;
          padding: clamp(36px, 5vw, 64px) 0 clamp(32px, 5vw, 56px);
          background: #030712;
          overflow: hidden;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .clients-strip-header {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 0 clamp(16px, 4vw, 60px);
          margin-bottom: clamp(20px, 3.5vw, 32px);
          position: relative;
        }

        .clients-strip-line {
          flex: 1;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.25), transparent);
        }

        .clients-strip-center {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          flex-shrink: 0;
          text-align: center;
        }

        .clients-strip-tag {
          font-size: clamp(0.6rem, 0.9vw, 0.7rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: #818cf8;
          background: rgba(99, 102, 241, 0.1);
          border: 1px solid rgba(99, 102, 241, 0.25);
          padding: 4px 14px;
          border-radius: 50px;
        }

        .clients-strip-title {
          font-size: clamp(1.25rem, 2.5vw, 1.65rem);
          font-weight: 900;
          background: linear-gradient(135deg, #ffffff 30%, #c7d2fe);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          letter-spacing: -0.02em;
          margin: 0;
        }

        .clients-marquee-container {
          overflow: hidden;
          width: 100%;
          -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        }

        .clients-marquee-container.row-2 {
          margin-top: 14px;
        }

        .clients-marquee-track {
          display: flex;
          gap: 16px;
          width: max-content;
          will-change: transform;
          transform: translateZ(0);
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          padding: 6px 0;
        }

        .clients-marquee-track.anim-normal {
          animation: clientsScrollNormal 75s linear infinite;
        }

        .clients-marquee-track.anim-reverse {
          animation: clientsScrollReverse 70s linear infinite;
        }

        .clients-marquee-track:hover {
          animation-play-state: paused;
        }

        /* Client Card */
        .client-card {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          gap: 12px;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 18px;
          padding: 10px 14px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
          position: relative;
          overflow: hidden;
          min-width: clamp(175px, 20vw, 215px);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          text-decoration: none;
          color: inherit;
          transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .client-card.is-clickable {
          cursor: pointer;
        }

        .client-card:hover {
          transform: translateY(-4px) scale(1.02);
          box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
          border-color: var(--card-color);
        }

        .client-card-top-bar {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--card-color), transparent 80%);
          
          transition: opacity 0.25s;
        }

        .client-card:hover .client-card-top-bar {
          opacity: 1;
        }

        .client-card-logo-box {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          flex-shrink: 0;
          border: 1px solid rgba(255, 255, 255, 0.12);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.92);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .client-card-logo-img {
          width: 82%;
          height: 82%;
          object-fit: contain;
        }

        .client-card-fallback-letter {
          font-size: 1.1rem;
          font-weight: 900;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .client-card-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
        }

        .client-card-name {
          font-size: 0.88rem;
          font-weight: 800;
          color: #ffffff;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .client-card-industry {
          font-size: 0.65rem;
          color: #94a3b8;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        @media (max-width: 640px) {
          .clients-strip-section {
            padding: 28px 0;
          }

          .client-card {
            min-width: 160px;
            padding: 8px 12px;
          }

          .client-card-logo-box {
            width: 38px;
            height: 38px;
          }

          .client-card-name {
            font-size: 0.82rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .clients-strip-section {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .clients-strip-title {
          background: linear-gradient(135deg, #0f172a 30%, #4338ca);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        [data-theme="light"] .client-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .client-card-name {
          color: #0f172a;
        }

/* SOURCE: contact.html */
/* ============================================================
           SERVICES COMPONENT STYLES
           ============================================================ */

        @keyframes serviceFloat {
          0%, 100% { transform: translateY(0) rotate(4deg); }
          50% { transform: translateY(-6px) rotate(4deg); }
        }

        .services-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .services-watermark {
          position: absolute;
          top: 18%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .services-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
          filter: blur(90px);
          top: -100px;
          left: -100px;
          pointer-events: none;
        }

        .services-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          right: -100px;
          pointer-events: none;
        }

        /* Section Header */
        .services-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .services-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .services-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .services-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .services-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Category Filter Tabs */
        .services-filters-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .services-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.09);
          color: #94a3b8;
          font-size: clamp(0.76rem, 1vw, 0.84rem);
          font-weight: 600;
          padding: 7px 16px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .services-filter-btn:hover {
          background: rgba(255, 255, 255, 0.08);
          color: #ffffff;
        }

        .services-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Responsive Services Grid */
        .services-grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: clamp(16px, 2.5vw, 28px);
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Service Card */
        .service-card-item {
          position: relative;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          overflow: hidden;
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .service-card-item:hover {
          transform: translateY(-6px);
          border-color: var(--service-color);
          box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--service-rgb), 0.2);
        }

        /* Card Header */
        .service-card-header {
          position: relative;
          padding: clamp(24px, 3.5vw, 32px) clamp(18px, 3vw, 24px) clamp(18px, 3vw, 22px);
          background: linear-gradient(135deg, var(--service-color) 0%, var(--service-dark) 100%);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .service-header-circle-1 {
          position: absolute;
          width: 220px;
          height: 220px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
          top: -60px;
          right: -60px;
          pointer-events: none;
        }

        .service-header-circle-2 {
          position: absolute;
          width: 160px;
          height: 160px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.05);
          bottom: -50px;
          left: -40px;
          pointer-events: none;
        }

        .service-badge {
          position: absolute;
          top: 14px;
          right: 14px;
          background: rgba(0, 0, 0, 0.3);
          border: 1px solid rgba(255, 255, 255, 0.25);
          color: #ffffff;
          font-size: 0.65rem;
          font-weight: 700;
          padding: 4px 10px;
          border-radius: 50px;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          z-index: 2;
        }

        .service-icon-box {
          position: relative;
          width: clamp(68px, 8vw, 84px);
          height: clamp(68px, 8vw, 84px);
          margin-bottom: 14px;
          z-index: 1;
          animation: serviceFloat 3.6s ease-in-out infinite;
        }

        .service-icon-glow {
          position: absolute;
          inset: 0;
          border-radius: 20px;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
          filter: blur(4px);
        }

        .service-icon-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          border-radius: 18px;
          position: relative;
          z-index: 1;
        }

        .service-category-pill {
          display: inline-block;
          font-size: 0.64rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          background: rgba(255, 255, 255, 0.15);
          color: #ffffff;
          padding: 3px 10px;
          border-radius: 50px;
          margin-bottom: 6px;
        }

        .service-card-title {
          font-size: clamp(1.2rem, 1.8vw, 1.4rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.2;
          margin-bottom: 4px;
          letter-spacing: -0.01em;
        }

        .service-card-subtitle {
          font-size: clamp(0.76rem, 1vw, 0.84rem);
          color: rgba(255, 255, 255, 0.8);
          font-weight: 500;
        }

        /* Card Body */
        .service-card-body {
          padding: clamp(18px, 2.5vw, 24px);
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-between;
        }

        .service-card-desc {
          font-size: clamp(0.84rem, 1.1vw, 0.92rem);
          color: #94a3b8;
          line-height: 1.65;
          margin-bottom: 18px;
        }

        /* Stats Grid Inside Card */
        .service-stats-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          margin-bottom: 18px;
        }

        .service-stat-chip {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-radius: 12px;
          padding: 8px 6px;
          text-align: center;
        }

        .service-stat-num {
          font-size: clamp(0.95rem, 1.2vw, 1.15rem);
          font-weight: 900;
          line-height: 1.1;
          display: block;
        }

        .service-stat-lbl {
          font-size: 0.62rem;
          font-weight: 700;
          color: #64748b;
          text-transform: uppercase;
          letter-spacing: 0.4px;
          margin-top: 2px;
          display: block;
        }

        /* Checklist */
        .service-points-list {
          list-style: none;
          padding: 0;
          margin: 0 0 20px;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .service-point-item {
          display: flex;
          align-items: center;
          gap: 9px;
          font-size: clamp(0.78rem, 1vw, 0.84rem);
          color: #cbd5e1;
          font-weight: 500;
        }

        .service-point-check {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        /* CTA Button */
        .service-card-cta {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 18px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 12px;
          color: #ffffff;
          font-size: 0.88rem;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.25s ease;
          margin-top: auto;
        }

        .service-card-cta:hover {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.25);
          transform: translateY(-2px);
        }

        .service-cta-arrow {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          transition: transform 0.2s ease;
        }

        .service-card-cta:hover .service-cta-arrow {
          transform: translateX(4px);
        }

        /* Bottom Glow Line */
        .service-bottom-bar {
          height: 3px;
          width: 100%;
          background: linear-gradient(90deg, var(--service-color), var(--service-dark));
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .services-grid-container {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (max-width: 768px) {
          .services-section {
            padding: 48px 16px;
          }

          .services-grid-container {
            grid-template-columns: 1fr;
            gap: 18px;
          }

          .service-card-item {
            border-radius: 20px;
          }

          .service-card-header {
            padding: 22px 16px 18px;
          }

          .service-icon-box {
            width: 64px;
            height: 64px;
            margin-bottom: 12px;
          }

          .service-card-body {
            padding: 18px;
          }

          .service-stats-grid {
            gap: 6px;
            margin-bottom: 14px;
          }

          .service-stat-chip {
            padding: 6px 4px;
          }

          .service-stat-num {
            font-size: 0.95rem;
          }

          .service-stat-lbl {
            font-size: 0.58rem;
          }
        }

        @media (max-width: 480px) {
          .services-section {
            padding: 36px 12px;
          }

          .services-filters-wrap {
            gap: 6px;
            margin-bottom: 24px;
          }

          .services-filter-btn {
            padding: 6px 12px;
            font-size: 0.72rem;
          }

          .service-card-body {
            padding: 14px;
          }

          .service-point-item {
            font-size: 0.76rem;
            gap: 7px;
          }

          .service-card-cta {
            padding: 10px 14px;
            font-size: 0.82rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .services-section {
          background: #ffffff;
        }

        [data-theme="light"] .services-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .services-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .services-title {
          color: #0f172a;
        }

        [data-theme="light"] .services-subtitle {
          color: #475569;
        }

        [data-theme="light"] .services-filter-btn {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.08);
          color: #334155;
        }

        [data-theme="light"] .services-filter-btn:hover {
          background: rgba(0, 0, 0, 0.08);
          color: #0f172a;
        }

        [data-theme="light"] .service-card-item {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .service-card-desc {
          color: #475569;
        }

        [data-theme="light"] .service-stat-chip {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .service-stat-lbl {
          color: #64748b;
        }

        [data-theme="light"] .service-point-item {
          color: #1e293b;
        }

        [data-theme="light"] .service-card-cta {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.12);
          color: #0f172a;
        }

        [data-theme="light"] .service-card-cta:hover {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.2);
        }

/* SOURCE: contact.html */
/* ============================================================
           PROCESS COMPONENT STYLES
           ============================================================ */

        .process-section-root {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .process-bg-text {
          position: absolute;
          top: 18%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .process-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 600px);
          height: clamp(300px, 45vw, 600px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          top: -120px;
          right: 5%;
          pointer-events: none;
        }

        .process-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          left: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .process-header {
          text-align: center;
          margin-bottom: clamp(36px, 5vw, 64px);
          position: relative;
          z-index: 1;
        }

        .process-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.74rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 6px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }

        .process-title {
          font-size: clamp(1.85rem, 4.5vw, 3.4rem);
          font-weight: 900;
          line-height: 1.1;
          color: #ffffff;
          letter-spacing: -0.025em;
          margin-bottom: 12px;
        }

        .process-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .process-sub {
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          color: #94a3b8;
          line-height: 1.75;
          max-width: 560px;
          margin: 0 auto;
        }

        /* Grid */
        .process-grid-container {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(16px, 2vw, 24px);
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Card */
        .process-card-item {
          position: relative;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          padding: clamp(24px, 3vw, 32px) clamp(16px, 2.5vw, 22px);
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .process-card-item:hover {
          transform: translateY(-6px);
          border-color: var(--step-color);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--step-rgb), 0.2);
        }

        .process-step-indicator {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 0.64rem;
          font-weight: 800;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          color: var(--step-color);
          background: rgba(var(--step-rgb), 0.12);
          border: 1px solid rgba(var(--step-rgb), 0.25);
          padding: 4px 12px;
          border-radius: 50px;
          margin-bottom: 20px;
        }

        .process-icon-bubble {
          width: clamp(60px, 7vw, 72px);
          height: clamp(60px, 7vw, 72px);
          border-radius: 20px;
          background: linear-gradient(135deg, rgba(var(--step-rgb), 0.2) 0%, rgba(var(--step-rgb), 0.05) 100%);
          border: 1.5px solid rgba(var(--step-rgb), 0.35);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--step-color);
          margin-bottom: 20px;
          box-shadow: 0 8px 24px rgba(var(--step-rgb), 0.2);
          transition: transform 0.3s ease;
        }

        .process-card-item:hover .process-icon-bubble {
          transform: scale(1.1) rotate(5deg);
        }

        .process-card-title {
          font-size: clamp(1.1rem, 1.5vw, 1.25rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.01em;
          margin-bottom: 10px;
        }

        .process-card-desc {
          font-size: clamp(0.82rem, 1vw, 0.88rem);
          color: #94a3b8;
          line-height: 1.65;
          margin: 0;
        }

        /* Connector Arrow Between Cards (Desktop only) */
        .process-connector-arrow {
          position: absolute;
          right: -16px;
          top: 40%;
          transform: translateY(-50%);
          color: rgba(255, 255, 255, 0.2);
          z-index: 2;
          pointer-events: none;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .process-grid-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
          }

          .process-connector-arrow {
            display: none;
          }
        }

        @media (max-width: 680px) {
          .process-section-root {
            padding: 40px 14px;
          }

          .process-grid-container {
            grid-template-columns: 1fr;
            gap: 14px;
          }

          .process-card-item {
            border-radius: 20px;
            padding: 22px 16px;
          }

          .process-icon-bubble {
            width: 54px;
            height: 54px;
            margin-bottom: 14px;
          }

          .process-step-indicator {
            margin-bottom: 14px;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .process-section-root {
          background: #f8fafc;
        }

        [data-theme="light"] .process-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .process-bg-text {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .process-title {
          color: #0f172a;
        }

        [data-theme="light"] .process-sub {
          color: #475569;
        }

        [data-theme="light"] .process-card-item {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .process-card-title {
          color: #0f172a;
        }

        [data-theme="light"] .process-card-desc {
          color: #475569;
        }

        [data-theme="light"] .process-connector-arrow {
          color: rgba(0, 0, 0, 0.15);
        }

/* SOURCE: contact.html */
/* ============================================================
           ABOUT COMPONENT STYLES
           ============================================================ */

        .about-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .about-watermark {
          position: absolute;
          top: 25%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .about-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.14), transparent 70%);
          filter: blur(90px);
          top: -120px;
          left: -100px;
          pointer-events: none;
        }

        .about-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.1), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          right: -100px;
          pointer-events: none;
        }

        /* 2-Column Grid Layout */
        .about-container {
          display: grid;
          grid-template-columns: 1.15fr 1fr;
          gap: clamp(32px, 5vw, 64px);
          align-items: center;
          max-width: 1300px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Left Column: Mission & Features */
        .about-left-col {
          display: flex;
          flex-direction: column;
        }

        .about-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
          width: fit-content;
        }

        .about-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 18px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .about-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .about-desc-p {
          font-size: clamp(0.88rem, 1.1vw, 0.98rem);
          color: #94a3b8;
          line-height: 1.75;
          margin-bottom: 14px;
        }

        .about-desc-p strong {
          color: #f1f5f9;
        }

        /* Value Checklist */
        .about-checklist {
          list-style: none;
          padding: 0;
          margin: 18px 0 28px;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .about-checklist-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 14px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 12px;
          font-size: clamp(0.82rem, 1vw, 0.9rem);
          font-weight: 500;
          color: #cbd5e1;
          transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
        }

        .about-checklist-item:hover {
          transform: translateX(4px);
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(249, 115, 22, 0.4);
          color: #ffffff;
        }

        .about-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 14px 30px;
          border-radius: 12px;
          font-size: 0.94rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 4px 18px rgba(24, 119, 242, 0.4);
          transition: all 0.25s ease;
          width: fit-content;
        }

        .about-cta-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 28px rgba(24, 119, 242, 0.6);
        }

        /* Right Column: Interactive Pillars Card Deck */
        .about-right-col {
          display: flex;
          flex-direction: column;
          gap: clamp(14px, 2vw, 18px);
        }

        /* Quick Stat Highlights Top Row */
        .about-stats-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: clamp(10px, 1.8vw, 14px);
        }

        .about-stat-mini-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          padding: clamp(14px, 2vw, 18px);
          display: flex;
          align-items: center;
          gap: 12px;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }

        .about-stat-icon-box {
          width: 42px;
          height: 42px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .about-stat-number {
          font-size: clamp(1.2rem, 1.8vw, 1.45rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.1;
        }

        .about-stat-label {
          font-size: 0.68rem;
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        /* Value Cards Deck */
        .about-values-deck {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .about-value-card {
          background: rgba(255, 255, 255, 0.02);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 20px);
          display: flex;
          align-items: flex-start;
          gap: 14px;
          cursor: pointer;
          transition: all 0.25s ease;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }

        .about-value-card:hover,
        .about-value-card.is-active {
          background: rgba(255, 255, 255, 0.06);
          border-color: var(--card-color);
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .about-value-icon {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          background: rgba(255, 255, 255, 0.04);
        }

        .about-value-content {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .about-value-title {
          font-size: clamp(0.92rem, 1.2vw, 1.05rem);
          font-weight: 800;
          color: #ffffff;
        }

        .about-value-desc {
          font-size: clamp(0.78rem, 1vw, 0.85rem);
          color: #94a3b8;
          line-height: 1.5;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .about-container {
            grid-template-columns: 1fr;
            gap: 40px;
          }

          .about-cta-btn {
            align-self: flex-start;
          }
        }

        @media (max-width: 640px) {
          .about-section {
            padding: 40px 14px;
          }

          .about-checklist-item {
            padding: 8px 10px;
            gap: 8px;
            font-size: 0.8rem;
          }

          .about-cta-btn {
            width: 100%;
            justify-content: center;
          }

          .about-stat-mini-card {
            padding: 10px;
            gap: 8px;
          }

          .about-stat-icon-box {
            width: 34px;
            height: 34px;
          }

          .about-value-card {
            padding: 12px 14px;
            gap: 10px;
          }

          .about-value-icon {
            width: 34px;
            height: 34px;
          }
        }

        @media (max-width: 400px) {
          .about-stats-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .about-section {
          background: #ffffff;
        }

        [data-theme="light"] .about-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .about-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .about-title {
          color: #0f172a;
        }

        [data-theme="light"] .about-desc-p {
          color: #475569;
        }

        [data-theme="light"] .about-desc-p strong {
          color: #0f172a;
        }

        [data-theme="light"] .about-checklist-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          color: #1e293b;
        }

        [data-theme="light"] .about-stat-mini-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .about-stat-number {
          color: #0f172a;
        }

        [data-theme="light"] .about-stat-label {
          color: #64748b;
        }

        [data-theme="light"] .about-value-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .about-value-card:hover,
        [data-theme="light"] .about-value-card.is-active {
          background: #ffffff;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .about-value-title {
          color: #0f172a;
        }

        [data-theme="light"] .about-value-desc {
          color: #475569;
        }

/* SOURCE: contact.html */
/* ============================================================
           CTA BANNER COMPONENT STYLES
           ============================================================ */

        .cta-banner-wrapper {
          position: relative;
          max-width: 1280px;
          width: calc(100% - clamp(24px, 5vw, 64px));
          margin: clamp(40px, 7vw, 80px) auto;
          background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0a0d24 100%);
          border: 1px solid rgba(99, 102, 241, 0.35);
          border-radius: clamp(20px, 3.5vw, 32px);
          padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 60px);
          overflow: hidden;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(99, 102, 241, 0.15);
        }

        .cta-banner-orb-1 {
          position: absolute;
          width: clamp(260px, 40vw, 500px);
          height: clamp(260px, 40vw, 500px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%);
          filter: blur(80px);
          top: -120px;
          left: -80px;
          pointer-events: none;
        }

        .cta-banner-orb-2 {
          position: absolute;
          width: clamp(240px, 35vw, 450px);
          height: clamp(240px, 35vw, 450px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.22), transparent 70%);
          filter: blur(80px);
          bottom: -100px;
          right: -60px;
          pointer-events: none;
        }

        .cta-banner-inner {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: 1.3fr auto;
          gap: clamp(24px, 4vw, 48px);
          align-items: center;
        }

        .cta-banner-content {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .cta-banner-badge {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(249, 115, 22, 0.15);
          border: 1px solid rgba(249, 115, 22, 0.35);
          color: #fb923c;
          font-size: clamp(0.68rem, 1vw, 0.74rem);
          font-weight: 800;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          padding: 6px 14px;
          border-radius: 50px;
          width: fit-content;
        }

        .cta-banner-heading {
          font-size: clamp(1.6rem, 3.5vw, 2.9rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.15;
          letter-spacing: -0.025em;
          margin: 0;
        }

        .cta-banner-heading-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .cta-banner-desc {
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          color: #cbd5e1;
          line-height: 1.6;
          margin: 0;
          max-width: 580px;
        }

        .cta-banner-actions {
          display: flex;
          flex-direction: column;
          gap: 12px;
          min-width: 220px;
        }

        .cta-btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 15px 30px;
          border-radius: 14px;
          background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
          color: #1e1b4b;
          font-size: 0.95rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          white-space: nowrap;
        }

        .cta-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 40px rgba(255, 255, 255, 0.35);
        }

        .cta-btn-whatsapp {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 13px 26px;
          border-radius: 14px;
          background: rgba(37, 211, 102, 0.12);
          border: 1.5px solid rgba(37, 211, 102, 0.45);
          color: #4ade80;
          font-size: 0.92rem;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.2s ease;
          white-space: nowrap;
        }

        .cta-btn-whatsapp:hover {
          background: rgba(37, 211, 102, 0.22);
          border-color: #22c55e;
          color: #ffffff;
          transform: translateY(-2px);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 880px) {
          .cta-banner-inner {
            grid-template-columns: 1fr;
            gap: 28px;
            text-align: center;
          }

          .cta-banner-content {
            align-items: center;
          }

          .cta-banner-badge {
            align-self: center;
          }

          .cta-banner-actions {
            flex-direction: row;
            justify-content: center;
            width: 100%;
          }

          .cta-btn-primary,
          .cta-btn-whatsapp {
            flex: 1;
            padding: 13px 18px;
          }
        }

        @media (max-width: 540px) {
          .cta-banner-wrapper {
            padding: 28px 16px;
            width: calc(100% - 20px);
            margin: 32px auto;
          }

          .cta-banner-actions {
            flex-direction: column;
            width: 100%;
          }

          .cta-btn-primary,
          .cta-btn-whatsapp {
            width: 100%;
          }
        }

/* SOURCE: contact.html */
/* ============================================================
           RESULTS COMPONENT STYLES
           ============================================================ */

        @keyframes resultsFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes resultsScaleIn {
          from {  transform: scale(0.94); }
          to { opacity: 1; transform: scale(1); }
        }

        .results-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .results-watermark {
          position: absolute;
          top: 22%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .results-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.16), transparent 70%);
          filter: blur(90px);
          top: -100px;
          right: 5%;
          pointer-events: none;
        }

        .results-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: 10%;
          left: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .results-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .results-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .results-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .results-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .results-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Stats Bar */
        .results-stats-bar {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: clamp(8px, 1.5vw, 14px);
          max-width: 1200px;
          margin: 0 auto clamp(36px, 5vw, 56px);
          position: relative;
          z-index: 1;
        }

        .results-stat-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: clamp(12px, 1.8vw, 18px) clamp(10px, 1.5vw, 16px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          text-align: center;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .results-stat-card:hover {
          transform: translateY(-3px);
          border-color: rgba(99, 102, 241, 0.35);
        }

        .results-stat-num {
          display: flex;
          align-items: center;
          gap: 3px;
          font-size: clamp(1.3rem, 2vw, 1.75rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1;
          margin-bottom: 4px;
        }

        .results-stat-lbl {
          font-size: clamp(0.6rem, 0.8vw, 0.72rem);
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        /* Case Studies Carousel */
        .results-cases-wrap {
          max-width: 1280px;
          margin: 0 auto clamp(40px, 6vw, 64px);
          position: relative;
          z-index: 1;
        }

        .results-cases-title {
          font-size: clamp(1.1rem, 2vw, 1.4rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .results-cases-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(12px, 2vw, 20px);
        }

        .results-case-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          padding: clamp(16px, 2.5vw, 20px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          position: relative;
          overflow: hidden;
          transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .results-case-card:hover {
          transform: translateY(-4px);
          border-color: var(--case-color);
        }

        .results-case-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 10px;
          margin-bottom: 12px;
        }

        .results-case-brand {
          font-size: 1.05rem;
          font-weight: 900;
          color: #ffffff;
        }

        .results-case-cat {
          font-size: 0.65rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          padding: 3px 8px;
          border-radius: 6px;
          white-space: nowrap;
        }

        .results-case-metric-box {
          display: flex;
          align-items: baseline;
          gap: 6px;
          margin-bottom: 10px;
        }

        .results-case-metric-val {
          font-size: 1.8rem;
          font-weight: 900;
          line-height: 1;
        }

        .results-case-metric-lbl {
          font-size: 0.72rem;
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
        }

        .results-case-desc {
          font-size: 0.8rem;
          color: #94a3b8;
          line-height: 1.5;
          margin-bottom: 14px;
        }

        .results-case-sub-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          margin-bottom: 12px;
        }

        .results-case-sub-item {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 10px;
          padding: 6px 8px;
          text-align: center;
        }

        .results-case-sub-val {
          font-size: 0.88rem;
          font-weight: 800;
          display: block;
        }

        .results-case-sub-lbl {
          font-size: 0.6rem;
          color: #64748b;
          font-weight: 700;
          text-transform: uppercase;
        }

        .results-case-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }

        .results-case-tag-pill {
          font-size: 0.65rem;
          font-weight: 600;
          padding: 3px 8px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.05);
          color: #cbd5e1;
        }

        /* Platform Filter Tabs */
        .results-filter-bar {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(24px, 4vw, 36px);
          position: relative;
          z-index: 1;
        }

        .results-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: clamp(0.76rem, 1vw, 0.85rem);
          font-weight: 600;
          padding: 8px 16px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          gap: 6px;
        }

        .results-filter-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
        }

        .results-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Platform Block */
        .platform-block {
          max-width: 1280px;
          margin: 0 auto clamp(32px, 5vw, 48px);
          position: relative;
          z-index: 1;
        }

        .platform-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: clamp(16px, 3vw, 24px) clamp(16px, 3vw, 28px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          margin-bottom: clamp(14px, 2vw, 20px);
          gap: 20px;
          flex-wrap: wrap;
        }

        .platform-header-left {
          display: flex;
          align-items: center;
          gap: 16px;
          flex: 1;
          min-width: 260px;
        }

        .platform-icon-wrap {
          width: clamp(44px, 5vw, 52px);
          height: clamp(44px, 5vw, 52px);
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }

        .platform-text-wrap {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .platform-title {
          font-size: clamp(1.15rem, 1.8vw, 1.35rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.01em;
        }

        .platform-desc {
          font-size: clamp(0.78rem, 1vw, 0.86rem);
          color: #94a3b8;
          line-height: 1.45;
        }

        .platform-stats-chips {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
        }

        .platform-chip {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 6px 14px;
          border-radius: 10px;
          border: 1px solid;
          text-align: center;
        }

        .platform-chip-val {
          font-size: 0.95rem;
          font-weight: 900;
          line-height: 1.1;
        }

        .platform-chip-lbl {
          font-size: 0.62rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          .85;
        }

        /* Proof Grid */
        .platform-images-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(10px, 1.8vw, 18px);
        }

        .platform-proof-card {
          position: relative;
          background: rgba(255, 255, 255, 0.02);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          overflow: hidden;
          cursor: pointer;
          transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
          display: flex;
          flex-direction: column;
        }

        .platform-proof-card:hover {
          transform: translateY(-4px);
          border-color: var(--platform-color);
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
        }

        .platform-proof-top-bar {
          height: 3px;
          width: 100%;
        }

        .platform-img-box {
          position: relative;
          width: 100%;
          height: clamp(140px, 18vw, 180px);
          overflow: hidden;
          background: #000;
        }

        .platform-proof-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          transition: transform 0.4s ease;
        }

        .platform-proof-card:hover .platform-proof-img {
          transform: scale(1.06);
        }

        .platform-proof-overlay {
          position: absolute;
          inset: 0;
          background: rgba(3, 7, 18, 0.5);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          display: flex;
          align-items: center;
          justify-content: center;
          
          transition: opacity 0.25s ease;
        }

        .platform-proof-card:hover .platform-proof-overlay {
          opacity: 1;
        }

        .platform-zoom-btn {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        }

        .platform-proof-footer {
          padding: 10px 12px;
          display: flex;
          align-items: center;
          gap: 8px;
          background: rgba(10, 15, 30, 0.5);
        }

        .platform-proof-tag {
          font-size: 0.62rem;
          font-weight: 700;
          padding: 2px 7px;
          border-radius: 5px;
          white-space: nowrap;
          flex-shrink: 0;
          text-transform: uppercase;
        }

        .platform-proof-label {
          font-size: 0.78rem;
          font-weight: 600;
          color: #e2e8f0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        /* Lightbox Modal */
        .results-lightbox-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 99999;
          padding: clamp(12px, 3vw, 24px);
          animation: resultsFadeIn 0.2s ease-out;
        }

        .results-lightbox-close {
          position: absolute;
          top: 16px;
          right: 16px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 100;
        }

        .results-lightbox-close:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .results-lightbox-container {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(8px, 2vw, 16px);
          width: 100%;
          max-width: 960px;
          animation: resultsScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .results-lightbox-nav {
          width: clamp(38px, 4.5vw, 48px);
          height: clamp(38px, 4.5vw, 48px);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .results-lightbox-nav:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .results-lightbox-frame {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: #000000;
          border: 2px solid;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
          max-width: 100%;
          display: flex;
          flex-direction: column;
        }

        .results-lightbox-img {
          width: 100%;
          max-height: 70vh;
          object-fit: contain;
          display: block;
        }

        .results-lightbox-caption {
          padding: 12px 18px;
          background: rgba(10, 15, 30, 0.95);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
        }

        .results-lightbox-badge {
          font-size: 0.72rem;
          font-weight: 700;
          padding: 3px 9px;
          border-radius: 5px;
          color: #ffffff;
        }

        .results-lightbox-title {
          font-size: 0.86rem;
          font-weight: 600;
          color: #f1f5f9;
          flex: 1;
        }

        .results-lightbox-counter {
          font-size: 0.75rem;
          color: #94a3b8;
          font-weight: 700;
        }

        /* Bottom CTA Banner */
        .results-cta-banner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 1200px;
          margin: clamp(36px, 5vw, 60px) auto 0;
          padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 40px);
          background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(249, 115, 22, 0.08) 100%);
          border: 1px solid rgba(99, 102, 241, 0.25);
          border-radius: 24px;
          position: relative;
          z-index: 1;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          gap: 24px;
          flex-wrap: wrap;
        }

        .results-cta-text h3 {
          font-size: clamp(1.2rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 6px;
        }

        .results-cta-text p {
          font-size: clamp(0.85rem, 1vw, 0.95rem);
          color: #cbd5e1;
        }

        .results-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 13px 28px;
          border-radius: 12px;
          font-size: 0.92rem;
          font-weight: 700;
          text-decoration: none;
          box-shadow: 0 4px 18px rgba(24, 119, 242, 0.4);
          transition: all 0.25s ease;
          white-space: nowrap;
        }

        .results-cta-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 26px rgba(24, 119, 242, 0.6);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .results-cases-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .platform-images-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 768px) {
          .results-stats-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          .results-cases-grid {
            grid-template-columns: 1fr;
          }

          .platform-images-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .platform-header {
            flex-direction: column;
            align-items: flex-start;
          }

          .platform-stats-chips {
            width: 100%;
          }

          .platform-chip {
            flex: 1 1 calc(33% - 6px);
          }

          .results-cta-banner {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
          }

          .results-cta-btn {
            justify-content: center;
          }
        }

        @media (max-width: 480px) {
          .results-section {
            padding: 40px 12px;
          }

          .results-stats-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .results-stat-card {
            padding: 10px 8px;
            border-radius: 12px;
          }

          .results-stat-num {
            font-size: 1.25rem;
          }

          .platform-images-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .platform-img-box {
            height: 125px;
          }

          .platform-proof-footer {
            padding: 8px 10px;
          }

          .platform-proof-label {
            font-size: 0.72rem;
          }

          .results-lightbox-container {
            flex-direction: column;
          }

          .results-lightbox-nav {
            display: none;
          }
        }

        @media (max-width: 360px) {
          .platform-images-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .results-section {
          background: #ffffff;
        }

        [data-theme="light"] .results-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .results-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .results-title {
          color: #0f172a;
        }

        [data-theme="light"] .results-subtitle {
          color: #475569;
        }

        [data-theme="light"] .results-stat-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .results-stat-num {
          color: #0f172a;
        }

        [data-theme="light"] .results-stat-lbl {
          color: #64748b;
        }

        /* Case Studies Cards in Results.jsx */
        [data-theme="light"] .results-cases-title {
          color: #0f172a;
        }

        [data-theme="light"] .results-case-card {
          background: #ffffff;
          border: 1.5px solid rgba(0, 0, 0, 0.09);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .results-case-card:hover {
          border-color: var(--case-color);
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .results-case-brand {
          color: #0f172a;
        }

        [data-theme="light"] .results-case-metric-lbl {
          color: #475569;
          font-weight: 800;
        }

        [data-theme="light"] .results-case-desc {
          color: #334155;
        }

        [data-theme="light"] .results-case-sub-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .results-case-sub-lbl {
          color: #64748b;
          font-weight: 700;
        }

        [data-theme="light"] .results-case-tag-pill {
          background: #f1f5f9;
          color: #334155;
          border: 1px solid rgba(0, 0, 0, 0.06);
          font-weight: 600;
        }

        /* Platform Headers & Proof Screenshots */
        [data-theme="light"] .platform-header {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .platform-title {
          color: #0f172a;
        }

        [data-theme="light"] .platform-desc {
          color: #475569;
        }

        [data-theme="light"] .platform-proof-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .platform-proof-footer {
          background: #f8fafc;
        }

        [data-theme="light"] .platform-proof-label {
          color: #1e293b;
        }

        [data-theme="light"] .results-cta-banner {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .results-cta-text h3 {
          color: #0f172a;
        }

        [data-theme="light"] .results-cta-text p {
          color: #475569;
        }

/* SOURCE: contact.html */
/* ============================================================
           TEAM COMPONENT STYLES
           ============================================================ */

        @keyframes teamFadeIn {
          from {  transform: scale(0.96); }
          to { opacity: 1; transform: scale(1); }
        }

        @keyframes teamOverlayFade {
          from {  }
          to { opacity: 1; }
        }

        .team-section {
          position: relative;
          padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .team-watermark {
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 220px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .team-header {
          text-align: center;
          margin-bottom: clamp(32px, 5vw, 48px);
          position: relative;
          z-index: 1;
        }

        .team-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .team-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .team-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .team-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Filter Tabs */
        .team-filter-bar {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(28px, 4vw, 40px);
          position: relative;
          z-index: 1;
        }

        .team-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: clamp(0.76rem, 1vw, 0.85rem);
          font-weight: 600;
          padding: 8px 18px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.22s ease;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }

        .team-filter-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
          border-color: rgba(255, 255, 255, 0.25);
        }

        .team-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Unified Responsive Grid */
        .team-grid-wrap {
          position: relative;
          z-index: 1;
          max-width: 1360px;
          margin: 0 auto;
          width: 100%;
        }

        .team-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(14px, 2vw, 24px);
          width: 100%;
        }

        /* Team Card */
        .team-card {
          position: relative;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          padding: clamp(16px, 2.5vw, 24px) clamp(12px, 2vw, 18px);
          text-align: center;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow: hidden;
        }

        .team-card:hover {
          transform: translateY(-6px);
          border-color: var(--member-color);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(99, 102, 241, 0.15);
        }

        .team-card-top-accent {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, transparent, var(--member-color), transparent);
          .6;
          transition: opacity 0.25s;
        }

        .team-card:hover .team-card-top-accent {
          opacity: 1;
          height: 3px;
        }

        /* Avatar */
        .team-avatar-box {
          width: clamp(86px, 11vw, 120px);
          height: clamp(86px, 11vw, 120px);
          border-radius: 18px;
          overflow: hidden;
          margin-bottom: clamp(12px, 2vw, 16px);
          position: relative;
          background: rgba(255, 255, 255, 0.06);
          border: 2px solid rgba(255, 255, 255, 0.12);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
          transition: border-color 0.25s ease, transform 0.25s ease;
        }

        .team-card:hover .team-avatar-box {
          border-color: var(--member-color);
          transform: scale(1.03);
        }

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

        .team-card:hover .team-avatar-img {
          transform: scale(1.08);
        }

        .team-avatar-zoom-btn {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(3, 7, 18, 0.6);
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          
          transition: opacity 0.25s ease;
          color: #ffffff;
        }

        .team-card:hover .team-avatar-zoom-btn {
          opacity: 1;
        }

        .team-zoom-icon-pill {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: var(--member-color);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        /* Content */
        .team-member-name {
          font-size: clamp(0.95rem, 1.2vw, 1.15rem);
          font-weight: 800;
          color: #ffffff;
          margin-bottom: 4px;
          line-height: 1.2;
        }

        .team-member-role {
          font-size: clamp(0.68rem, 0.9vw, 0.78rem);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          color: var(--member-color);
          margin-bottom: 8px;
          line-height: 1.3;
        }

        .team-member-bio {
          font-size: clamp(0.75rem, 0.95vw, 0.82rem);
          color: #94a3b8;
          line-height: 1.5;
          margin-bottom: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .team-member-divider {
          width: 28px;
          height: 2px;
          border-radius: 2px;
          background: var(--member-color);
          .8;
          margin-top: auto;
        }

        /* Modal Styles */
        .team-modal-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.82);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 9999;
          padding: clamp(14px, 3vw, 24px);
          animation: teamOverlayFade 0.2s ease-out;
        }

        .team-modal-card {
          position: relative;
          background: #0d1322;
          border: 1px solid var(--modal-color);
          border-radius: 24px;
          overflow: hidden;
          width: 100%;
          max-width: 440px;
          max-height: 88vh;
          overflow-y: auto;
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(99, 102, 241, 0.2);
          animation: teamFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .team-modal-close {
          position: absolute;
          top: 14px;
          right: 14px;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: rgba(3, 7, 18, 0.75);
          border: 1px solid rgba(255, 255, 255, 0.15);
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          transition: all 0.2s ease;
        }

        .team-modal-close:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.08);
        }

        .team-modal-img-wrap {
          width: 100%;
          height: clamp(220px, 35vh, 290px);
          overflow: hidden;
          position: relative;
          background: #000000;
        }

        .team-modal-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .team-modal-img-gradient {
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, transparent 40%, #0d1322 100%);
        }

        .team-modal-info {
          padding: clamp(18px, 4vw, 24px);
        }

        .team-modal-name {
          font-size: clamp(1.3rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 4px;
          line-height: 1.15;
        }

        .team-modal-role {
          font-size: 0.85rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          color: var(--modal-color);
          display: flex;
          align-items: center;
          gap: 6px;
          margin-bottom: 14px;
        }

        .team-modal-bio {
          font-size: 0.9rem;
          color: #cbd5e1;
          line-height: 1.65;
          margin-bottom: 20px;
        }

        .team-modal-skills-title {
          font-size: 0.74rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #94a3b8;
          margin-bottom: 10px;
        }

        .team-modal-skills-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 22px;
        }

        .team-modal-skill-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #f1f5f9;
          font-size: 0.78rem;
          font-weight: 600;
          padding: 5px 12px;
          border-radius: 50px;
        }

        .team-modal-cta {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          width: 100%;
          padding: 12px 20px;
          border-radius: 12px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          text-decoration: none;
          font-size: 0.92rem;
          font-weight: 700;
          border: none;
          cursor: pointer;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.35);
          transition: all 0.2s ease;
        }

        .team-modal-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(24, 119, 242, 0.5);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .team-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
          }
        }

        @media (max-width: 768px) {
          .team-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
          }

          .team-filter-bar {
            gap: 6px;
          }

          .team-filter-btn {
            padding: 6px 14px;
            font-size: 0.76rem;
          }
        }

        @media (max-width: 480px) {
          .team-section {
            padding: 40px 12px;
          }

          .team-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          .team-card {
            padding: 14px 10px;
            border-radius: 16px;
          }

          .team-avatar-box {
            width: 76px;
            height: 76px;
            border-radius: 14px;
            margin-bottom: 10px;
          }

          .team-member-name {
            font-size: 0.88rem;
          }

          .team-member-role {
            font-size: 0.65rem;
            margin-bottom: 6px;
          }

          .team-member-bio {
            font-size: 0.72rem;
            line-height: 1.4;
            margin-bottom: 8px;
          }

          .team-modal-card {
            border-radius: 20px;
          }
        }

        @media (max-width: 360px) {
          .team-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .team-section {
          background: #f8fafc;
        }

        [data-theme="light"] .team-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .team-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .team-title {
          color: #0f172a;
        }

        [data-theme="light"] .team-subtitle {
          color: #475569;
        }

        [data-theme="light"] .team-filter-btn {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.08);
          color: #334155;
        }

        [data-theme="light"] .team-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .team-member-name {
          color: #0f172a;
        }

        [data-theme="light"] .team-member-bio {
          color: #64748b;
        }

        [data-theme="light"] .team-modal-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.1);
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
        }

        [data-theme="light"] .team-modal-name {
          color: #0f172a;
        }

        [data-theme="light"] .team-modal-bio {
          color: #475569;
        }

        [data-theme="light"] .team-modal-skill-pill {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #1e293b;
        }

/* SOURCE: contact.html */
/* ============================================================
           REVIEWS COMPONENT STYLES
           ============================================================ */

        @keyframes reviewsFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes reviewsScaleIn {
          from {  transform: scale(0.92); }
          to { opacity: 1; transform: scale(1); }
        }

        .reviews-section {
          position: relative;
          padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .reviews-watermark {
          position: absolute;
          top: 25%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        /* Section Header */
        .reviews-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .reviews-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .reviews-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .reviews-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .reviews-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Trust Summary Bar */
        .reviews-trust-bar {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(8px, 1.5vw, 16px);
          max-width: 1000px;
          margin: 0 auto clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .reviews-trust-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          padding: clamp(12px, 2vw, 16px) clamp(10px, 1.5vw, 14px);
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .reviews-trust-card:hover {
          transform: translateY(-2px);
          border-color: rgba(99, 102, 241, 0.35);
        }

        .reviews-trust-num {
          font-size: clamp(1.2rem, 2vw, 1.6rem);
          font-weight: 900;
          color: #ffffff;
          display: flex;
          align-items: center;
          gap: 4px;
          line-height: 1;
          margin-bottom: 4px;
        }

        .reviews-trust-lbl {
          font-size: clamp(0.6rem, 0.8vw, 0.72rem);
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 0.6px;
        }

        /* Mobile View Mode Switcher */
        .reviews-view-toggle {
          display: none;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin-bottom: 20px;
          position: relative;
          z-index: 1;
        }

        .reviews-toggle-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #94a3b8;
          padding: 6px 14px;
          border-radius: 50px;
          font-size: 0.76rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .reviews-toggle-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
        }

        /* Reviews Grid */
        .reviews-grid-wrap {
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        .reviews-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: clamp(10px, 1.8vw, 20px);
        }

        .reviews-card {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.09);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
          cursor: pointer;
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
          display: flex;
          flex-direction: column;
        }

        .reviews-card:hover {
          transform: translateY(-5px) scale(1.02);
          border-color: rgba(99, 102, 241, 0.5);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(99, 102, 241, 0.2);
        }

        .reviews-img-container {
          position: relative;
          width: 100%;
          aspect-ratio: 3 / 4;
          overflow: hidden;
          background: #0d1322;
        }

        .reviews-card-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          transition: transform 0.4s ease;
        }

        .reviews-card:hover .reviews-card-img {
          transform: scale(1.06);
        }

        .reviews-overlay {
          position: absolute;
          inset: 0;
          background: rgba(3, 7, 18, 0.55);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          display: flex;
          align-items: center;
          justify-content: center;
          
          transition: opacity 0.25s ease;
        }

        .reviews-card:hover .reviews-overlay {
          opacity: 1;
        }

        .reviews-zoom-pill {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #1877f2;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
        }

        .reviews-card-footer {
          padding: 10px 12px;
          background: rgba(10, 15, 30, 0.7);
          border-top: 1px solid rgba(255, 255, 255, 0.06);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 6px;
        }

        .reviews-card-tag {
          font-size: 0.65rem;
          font-weight: 700;
          color: #818cf8;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .reviews-card-verified {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 0.62rem;
          font-weight: 700;
          color: #10b981;
        }

        /* Mobile Snap Slider */
        .reviews-mobile-slider {
          display: none;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
          gap: 12px;
          padding: 6px 0 16px;
          scrollbar-width: none;
        }

        .reviews-mobile-slider::-webkit-scrollbar {
          display: none;
        }

        .reviews-mobile-slide {
          flex: 0 0 calc(85vw - 20px);
          max-width: 320px;
          scroll-snap-align: center;
          border-radius: 18px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.1);
          cursor: pointer;
        }

        .reviews-mobile-slide-img {
          width: 100%;
          aspect-ratio: 3 / 4;
          object-fit: cover;
          object-position: center top;
          display: block;
        }

        .reviews-dots {
          display: none;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin-top: 14px;
        }

        .reviews-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2);
          border: none;
          padding: 0;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .reviews-dot.is-active {
          width: 22px;
          border-radius: 10px;
          background: #6366f1;
        }

        /* Lightbox Modal */
        .reviews-lightbox-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 99999;
          padding: clamp(12px, 3vw, 24px);
          animation: reviewsFadeIn 0.2s ease-out;
        }

        .reviews-lightbox-close {
          position: absolute;
          top: 16px;
          right: 16px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 100;
        }

        .reviews-lightbox-close:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .reviews-lightbox-content {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(8px, 2vw, 16px);
          width: 100%;
          max-width: 680px;
          animation: reviewsScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reviews-lightbox-nav {
          width: clamp(38px, 4.5vw, 48px);
          height: clamp(38px, 4.5vw, 48px);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .reviews-lightbox-nav:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .reviews-lightbox-frame {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: #000000;
          border: 2px solid rgba(99, 102, 241, 0.4);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
          max-width: 100%;
          display: flex;
          flex-direction: column;
        }

        .reviews-lightbox-img {
          width: 100%;
          max-height: 72vh;
          object-fit: contain;
          display: block;
        }

        .reviews-lightbox-caption {
          padding: 12px 18px;
          background: rgba(10, 15, 30, 0.95);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
        }

        .reviews-lightbox-info {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
        }

        .reviews-lightbox-badge {
          font-size: 0.7rem;
          font-weight: 700;
          padding: 3px 8px;
          border-radius: 5px;
          background: #1877f2;
          color: #ffffff;
        }

        .reviews-lightbox-title {
          font-size: 0.84rem;
          font-weight: 600;
          color: #f1f5f9;
        }

        .reviews-lightbox-counter {
          font-size: 0.75rem;
          color: #94a3b8;
          font-weight: 700;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1200px) {
          .reviews-grid {
            grid-template-columns: repeat(4, 1fr);
          }
        }

        @media (max-width: 900px) {
          .reviews-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 640px) {
          .reviews-trust-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .reviews-view-toggle {
            display: flex;
          }

          /* Grid View on Mobile */
          .reviews-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          /* If in carousel mode on mobile */
          .reviews-grid.mode-carousel {
            display: none;
          }

          .reviews-mobile-slider.mode-carousel {
            display: flex;
          }

          .reviews-dots.mode-carousel {
            display: flex;
          }
        }

        @media (max-width: 480px) {
          .reviews-section {
            padding: 40px 12px;
          }

          .reviews-grid {
            gap: 8px;
          }

          .reviews-card {
            border-radius: 14px;
          }

          .reviews-card-footer {
            padding: 6px 8px;
          }

          .reviews-card-tag {
            font-size: 0.58rem;
          }

          .reviews-card-verified {
            font-size: 0.56rem;
          }

          .reviews-lightbox-nav {
            display: none;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .reviews-section {
          background: #f8fafc;
        }

        [data-theme="light"] .reviews-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .reviews-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .reviews-title {
          color: #0f172a;
        }

        [data-theme="light"] .reviews-subtitle {
          color: #475569;
        }

        [data-theme="light"] .reviews-trust-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .reviews-trust-val {
          color: #0f172a;
        }

        [data-theme="light"] .reviews-trust-lbl {
          color: #64748b;
        }

        [data-theme="light"] .reviews-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .reviews-card-footer {
          background: #f8fafc;
        }

        [data-theme="light"] .reviews-card-name {
          color: #0f172a;
        }

/* SOURCE: contact.html */
/* ============================================================
           CONTACT COMPONENT STYLES
           ============================================================ */

        @keyframes contactPulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.04); }
        }

        @keyframes contactCheckAnim {
          0% { transform: scale(0);  }
          60% { transform: scale(1.15); opacity: 1; }
          100% { transform: scale(1); opacity: 1; }
        }

        .contact-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .contact-watermark {
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .contact-orb-1 {
          position: absolute;
          width: clamp(300px, 40vw, 600px);
          height: clamp(300px, 40vw, 600px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
          filter: blur(90px);
          top: -100px;
          left: 5%;
          pointer-events: none;
        }

        .contact-orb-2 {
          position: absolute;
          width: clamp(280px, 35vw, 500px);
          height: clamp(280px, 35vw, 500px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: 5%;
          right: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .contact-header {
          text-align: center;
          margin-bottom: clamp(32px, 5vw, 56px);
          position: relative;
          z-index: 1;
        }

        .contact-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .contact-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .contact-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .contact-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* 2-Column Grid Layout */
        .contact-grid-wrap {
          display: grid;
          grid-template-columns: 1.1fr 1.3fr;
          gap: clamp(24px, 4vw, 44px);
          max-width: 1300px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Left Column: Direct Info */
        .contact-info-col {
          display: flex;
          flex-direction: column;
          gap: clamp(14px, 2vw, 20px);
        }

        .contact-info-card {
          display: flex;
          align-items: flex-start;
          gap: 16px;
          padding: clamp(16px, 2.5vw, 22px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          text-decoration: none;
          color: inherit;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
        }

        .contact-info-card:hover {
          transform: translateY(-3px);
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.4);
        }

        .contact-info-icon-box {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          background: rgba(99, 102, 241, 0.15);
          border: 1px solid rgba(99, 102, 241, 0.25);
          color: #a5b4fc;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .contact-info-text {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .contact-info-label {
          font-size: 0.72rem;
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
        }

        .contact-info-val {
          font-size: 0.94rem;
          color: #f1f5f9;
          font-weight: 600;
          line-height: 1.45;
        }

        /* WhatsApp Direct CTA Button */
        .contact-wa-banner {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          padding: clamp(14px, 2vw, 18px) 24px;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          color: #ffffff;
          border-radius: 16px;
          text-decoration: none;
          font-size: clamp(0.9rem, 1.2vw, 1rem);
          font-weight: 800;
          box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .contact-wa-banner:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55);
        }

        /* Interactive Map Frame with Location Pin Marker */
        .contact-map-frame {
          position: relative;
          width: 100%;
          height: clamp(230px, 26vw, 290px);
          border-radius: 18px;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.1);
          background: #090e1a;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .contact-map-iframe {
          width: 100%;
          height: 100%;
          border: none;
        }

        .contact-map-overlay-badge {
          position: absolute;
          bottom: 12px;
          left: 12px;
          right: 12px;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 12px;
          padding: 8px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
          z-index: 2;
        }

        .contact-map-badge-icon {
          width: 28px;
          height: 28px;
          border-radius: 8px;
          background: rgba(239, 68, 68, 0.2);
          color: #ef4444;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .contact-map-badge-text {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-width: 0;
        }

        .contact-map-badge-title {
          font-size: 0.82rem;
          font-weight: 800;
          color: #ffffff;
          line-height: 1.2;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .contact-map-badge-sub {
          font-size: 0.7rem;
          color: #94a3b8;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .contact-map-badge-link {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          background: rgba(99, 102, 241, 0.2);
          border: 1px solid rgba(99, 102, 241, 0.35);
          color: #818cf8;
          font-size: 0.72rem;
          font-weight: 700;
          padding: 5px 10px;
          border-radius: 8px;
          text-decoration: none;
          white-space: nowrap;
          flex-shrink: 0;
          transition: all 0.2s ease;
        }

        .contact-map-badge-link:hover {
          background: #6366f1;
          color: #ffffff;
          border-color: #6366f1;
        }

        /* Light Theme Map Badge Adaptations */
        [data-theme="light"] .contact-map-overlay-badge {
          background: rgba(255, 255, 255, 0.94);
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .contact-map-badge-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-map-badge-sub {
          color: #64748b;
        }

        [data-theme="light"] .contact-map-badge-link {
          background: #eef2ff;
          border-color: rgba(79, 70, 229, 0.25);
          color: #4f46e5;
        }

        [data-theme="light"] .contact-map-badge-link:hover {
          background: #4f46e5;
          color: #ffffff;
        }

        /* Right Column: Growth Consultation Form */
        .contact-form-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 24px;
          padding: clamp(24px, 4vw, 40px);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
          position: relative;
        }

        .contact-form-title {
          font-size: clamp(1.25rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 6px;
          letter-spacing: -0.02em;
        }

        .contact-form-sub {
          font-size: 0.86rem;
          color: #94a3b8;
          margin-bottom: 24px;
          line-height: 1.5;
        }

        /* Form Row & Groups */
        .contact-form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(12px, 2vw, 16px);
          margin-bottom: 16px;
        }

        .contact-form-group {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-bottom: 16px;
        }

        .contact-label {
          font-size: 0.78rem;
          font-weight: 700;
          color: #cbd5e1;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .contact-input,
        .contact-select,
        .contact-textarea {
          width: 100%;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 12px;
          padding: 12px 16px;
          color: #ffffff;
          font-size: 0.92rem;
          font-family: inherit;
          transition: all 0.2s ease;
          box-sizing: border-box;
        }

        .contact-input:focus,
        .contact-select:focus,
        .contact-textarea:focus {
          outline: none;
          background: rgba(255, 255, 255, 0.08);
          border-color: #6366f1;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
        }

        .contact-select {
          cursor: pointer;
        }

        .contact-select option {
          background: #0d1322;
          color: #ffffff;
        }

        .contact-textarea {
          resize: vertical;
          min-height: 95px;
        }

        /* Submit Button */
        .contact-submit-btn {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 14px 28px;
          border-radius: 12px;
          border: none;
          font-size: 0.95rem;
          font-weight: 800;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
          margin-top: 8px;
        }

        .contact-submit-btn:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 10px 28px rgba(24, 119, 242, 0.6);
        }

        .contact-submit-btn:disabled {
          .6;
          cursor: not-allowed;
        }

        .contact-privacy-note {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          font-size: 0.76rem;
          color: #64748b;
          margin-top: 14px;
          text-align: center;
        }

        .contact-error-msg {
          color: #f87171;
          font-size: 0.84rem;
          font-weight: 600;
          margin-bottom: 12px;
          text-align: center;
        }

        /* Success Card View */
        .contact-success-wrap {
          text-align: center;
          padding: clamp(16px, 3vw, 24px) 0;
        }

        .contact-success-icon-box {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          background: rgba(16, 185, 129, 0.15);
          border: 2px solid #10b981;
          color: #10b981;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20px;
          animation: contactCheckAnim 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .contact-success-h3 {
          font-size: clamp(1.3rem, 2.5vw, 1.7rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 10px;
        }

        .contact-success-desc {
          font-size: 0.92rem;
          color: #cbd5e1;
          line-height: 1.6;
          margin-bottom: 24px;
        }

        .contact-steps-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 24px;
          text-align: left;
        }

        .contact-step-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 14px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 12px;
          font-size: 0.86rem;
          color: #e2e8f0;
        }

        .contact-step-badge {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #1877f2;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
          font-size: 0.75rem;
          flex-shrink: 0;
        }

        .contact-success-wa-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          color: #ffffff;
          padding: 12px 24px;
          border-radius: 12px;
          text-decoration: none;
          font-weight: 700;
          font-size: 0.9rem;
          box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .contact-grid-wrap {
            grid-template-columns: 1fr;
            gap: 32px;
          }

          .contact-info-col {
            order: 2;
          }

          .contact-form-card {
            order: 1;
          }
        }

        @media (max-width: 640px) {
          .contact-section {
            padding: 40px 14px;
          }

          .contact-form-card {
            padding: 20px 16px;
            border-radius: 18px;
          }

          .contact-form-row {
            grid-template-columns: 1fr;
            gap: 0;
            margin-bottom: 0;
          }

          .contact-info-card {
            padding: 14px;
            gap: 12px;
          }

          .contact-info-icon-box {
            width: 38px;
            height: 38px;
          }

          .contact-info-val {
            font-size: 0.88rem;
          }

          .contact-map-frame {
            height: 220px;
          }
        }

        @media (max-width: 400px) {
          .contact-form-card {
            padding: 18px 12px;
          }

          .contact-input,
          .contact-select,
          .contact-textarea {
            padding: 10px 12px;
            font-size: 0.88rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .contact-section {
          background: #ffffff;
        }

        [data-theme="light"] .contact-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .contact-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .contact-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-subtitle {
          color: #475569;
        }

        [data-theme="light"] .contact-info-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .contact-info-label {
          color: #64748b;
        }

        [data-theme="light"] .contact-info-val {
          color: #0f172a;
        }

        [data-theme="light"] .contact-map-frame {
          border-color: rgba(0, 0, 0, 0.08);
          background: #f8fafc;
        }

        [data-theme="light"] .contact-form-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .contact-form-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-form-sub {
          color: #475569;
        }

        [data-theme="light"] .contact-label {
          color: #0f172a;
          font-weight: 700;
        }

        [data-theme="light"] .contact-input,
        [data-theme="light"] .contact-select,
        [data-theme="light"] .contact-textarea {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.16);
          color: #0f172a;
        }

        [data-theme="light"] .contact-input::placeholder,
        [data-theme="light"] .contact-textarea::placeholder {
          color: #94a3b8;
        }

        [data-theme="light"] .contact-select option {
          background: #ffffff;
          color: #0f172a;
        }

        [data-theme="light"] .contact-input:focus,
        [data-theme="light"] .contact-select:focus,
        [data-theme="light"] .contact-textarea:focus {
          border-color: #6366f1;
          background: #ffffff;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
        }

/* SOURCE: contact.html */
/* ============================================================
           MODERN ULTRA-PREMIUM FOOTER STYLING
           ============================================================ */

        @keyframes waFloatPulse {
          0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
          50% { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 36px rgba(37, 211, 102, 0.65); }
        }

        @keyframes statusGlow {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { .5; transform: scale(1.25); }
        }

        @keyframes beamGlow {
          0%, 100% { .6; }
          50% { opacity: 1; }
        }

        .footer-root {
          position: relative;
          background: #030712;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          color: #f8fafc;
          width: 100%;
          overflow: hidden;
          font-family: inherit;
        }

        /* Top Ambient Glow Mesh */
        .footer-ambient-mesh {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          max-width: 1200px;
          height: 240px;
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.15) 0%, rgba(249, 115, 22, 0.06) 60%, transparent 100%);
          pointer-events: none;
          z-index: 0;
        }

        .footer-top-accent-line {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.6) 30%, rgba(249, 115, 22, 0.6) 70%, transparent 100%);
          animation: beamGlow 4s ease-in-out infinite;
        }

        .footer-main-wrap {
          position: relative;
          z-index: 1;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(48px, 6vw, 76px) clamp(16px, 4vw, 48px) clamp(24px, 3.5vw, 40px);
        }

        /* ── Main Footer Columns Grid ── */
        .footer-grid {
          display: grid;
          grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
          gap: clamp(28px, 4vw, 56px);
        }

        /* Column 1: Brand */
        .footer-brand-col {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .footer-brand-link {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          color: #ffffff;
          width: fit-content;
        }

        .footer-logo-box {
          width: 48px;
          height: 48px;
          border-radius: 14px;
          overflow: hidden;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
          border: 1.5px solid rgba(255, 255, 255, 0.15);
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .footer-brand-link:hover .footer-logo-box {
          transform: scale(1.08) rotate(3deg);
        }

        .footer-logo-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          padding: 3px;
        }

        .footer-brand-title {
          display: flex;
          flex-direction: column;
        }

        .footer-brand-name {
          font-size: 1.3rem;
          font-weight: 900;
          letter-spacing: -0.02em;
          background: linear-gradient(135deg, #ffffff 40%, #c7d2fe 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1.1;
        }

        .footer-brand-badge {
          font-size: 0.62rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1.2px;
          color: #818cf8;
        }

        .footer-tagline {
          font-size: clamp(0.88rem, 1.05vw, 0.94rem);
          font-weight: 500;
          line-height: 1.6;
          color: #94a3b8;
          margin: 0;
        }

        .footer-tagline-highlight {
          color: #f1f5f9;
          font-weight: 700;
        }

        /* Live Status Pill */
        .footer-status-pill {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 14px;
          background: rgba(16, 185, 129, 0.08);
          border: 1px solid rgba(16, 185, 129, 0.25);
          border-radius: 9999px;
          font-size: 0.76rem;
          font-weight: 700;
          color: #34d399;
          width: fit-content;
        }

        .footer-status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 10px #10b981;
          animation: statusGlow 2s infinite ease-in-out;
        }

        /* Social Icons */
        .footer-socials {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
          margin-top: 2px;
        }

        .footer-social-icon {
          width: 38px;
          height: 38px;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.09);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #cbd5e1;
          text-decoration: none;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer-social-icon:hover {
          transform: translateY(-3px) scale(1.08);
          background: var(--social-bg, rgba(99, 102, 241, 0.2));
          border-color: var(--social-color, #6366f1);
          color: var(--social-color, #ffffff);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
        }

        /* Nav Columns */
        .footer-nav-col {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .footer-col-title {
          font-size: 0.88rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #ffffff;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .footer-col-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #6366f1;
        }

        .footer-nav-link {
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          width: fit-content;
          gap: 8px;
          padding: 3px 0;
        }

        .footer-nav-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-service-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          padding: 3px 0;
        }

        .footer-service-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-nav-tag {
          font-size: 0.62rem;
          font-weight: 800;
          padding: 2px 7px;
          border-radius: 50px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .footer-nav-tag.hot {
          background: rgba(249, 115, 22, 0.15);
          color: #fb923c;
          border: 1px solid rgba(249, 115, 22, 0.3);
        }

        .footer-nav-tag.pro {
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .footer-nav-tag.lead {
          background: rgba(16, 185, 129, 0.15);
          color: #34d399;
          border: 1px solid rgba(16, 185, 129, 0.3);
        }

        /* Contact Items */
        .footer-contact-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .footer-contact-card {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 10px 12px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 12px;
          text-decoration: none;
          color: #cbd5e1;
          transition: all 0.2s ease;
        }

        .footer-contact-card:hover {
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.35);
          color: #ffffff;
          transform: translateY(-2px);
        }

        .footer-contact-icon-box {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-top: 1px;
        }

        .footer-contact-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .footer-contact-label {
          font-size: 0.68rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: #64748b;
        }

        .footer-contact-val {
          font-size: 0.84rem;
          font-weight: 600;
          line-height: 1.4;
          color: #f1f5f9;
        }

        /* ── Divider ── */
        .footer-divider {
          height: 1px;
          width: 100%;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.3) 50%, transparent 100%);
          margin: clamp(36px, 4vw, 48px) 0 clamp(20px, 3vw, 28px);
        }

        /* ── Bottom Bar ── */
        .footer-bottom-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          flex-wrap: wrap;
        }

        .footer-copy-text {
          font-size: 0.82rem;
          color: #64748b;
          margin: 0;
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .footer-legal-links {
          display: flex;
          align-items: center;
          gap: clamp(14px, 2vw, 24px);
          flex-wrap: wrap;
        }

        .footer-legal-btn {
          background: none;
          border: none;
          color: #64748b;
          font-size: 0.8rem;
          cursor: pointer;
          transition: color 0.2s ease;
          padding: 2px 0;
          font-family: inherit;
          position: relative;
        }

        .footer-legal-btn:hover {
          color: #cbd5e1;
        }

        .footer-back-to-top {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          position: relative;
          z-index: 10;
          transition: all 0.2s ease;
          font-family: inherit;
          outline: none;
          user-select: none;
        }

        .footer-back-to-top:hover {
          background: rgba(99, 102, 241, 0.2);
          border-color: rgba(99, 102, 241, 0.4);
          color: #ffffff;
          transform: translateY(-2px);
        }

        /* ── Floating WhatsApp Widget ── */
        .footer-wa-float {
          position: fixed;
          bottom: calc(20px + env(safe-area-inset-bottom, 0px));
          right: 20px;
          width: 54px;
          height: 54px;
          border-radius: 50%;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          z-index: 999;
          cursor: pointer;
          text-decoration: none;
          box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
          animation: waFloatPulse 2.5s ease-in-out infinite;
          transition: transform 0.25s ease;
        }

        .footer-wa-float:hover {
          transform: scale(1.12) !important;
        }

        /* ============================================================
           LIGHT THEME ADAPTATIONS
           ============================================================ */
        [data-theme="light"] .footer-root {
          background: #ffffff;
          border-top-color: rgba(0, 0, 0, 0.08);
          color: #0f172a;
        }

        [data-theme="light"] .footer-ambient-mesh {
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.1) 0%, rgba(249, 115, 22, 0.04) 60%, transparent 100%);
        }

        [data-theme="light"] .footer-brand-name {
          background: linear-gradient(135deg, #0f172a 40%, #4338ca 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        [data-theme="light"] .footer-tagline {
          color: #64748b;
        }

        [data-theme="light"] .footer-tagline-highlight {
          color: #0f172a;
        }

        [data-theme="light"] .footer-social-icon {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-social-icon:hover {
          background: var(--social-bg, #eef2ff);
          border-color: var(--social-color, #4f46e5);
          color: var(--social-color, #4f46e5);
        }

        [data-theme="light"] .footer-col-title {
          color: #0f172a;
        }

        [data-theme="light"] .footer-nav-link,
        [data-theme="light"] .footer-service-link {
          color: #64748b;
        }

        [data-theme="light"] .footer-nav-link:hover,
        [data-theme="light"] .footer-service-link:hover {
          color: #4f46e5;
        }

        [data-theme="light"] .footer-contact-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
          color: #334155;
        }

        [data-theme="light"] .footer-contact-card:hover {
          background: #f1f5f9;
          border-color: rgba(79, 70, 229, 0.3);
          color: #0f172a;
        }

        [data-theme="light"] .footer-contact-val {
          color: #0f172a;
        }

        [data-theme="light"] .footer-divider {
          background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, 0.2) 50%, transparent 100%);
        }

        [data-theme="light"] .footer-copy-text,
        [data-theme="light"] .footer-legal-btn {
          color: #64748b;
        }

        [data-theme="light"] .footer-legal-btn:hover {
          color: #0f172a;
        }

        [data-theme="light"] .footer-back-to-top {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-back-to-top:hover {
          background: #eef2ff;
          border-color: rgba(79, 70, 229, 0.3);
          color: #4f46e5;
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS
           ============================================================ */
        @media (max-width: 1100px) {
          .footer-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
          }
        }

        @media (max-width: 600px) {
          .footer-grid {
            grid-template-columns: 1fr;
            gap: 32px;
          }

          .footer-bottom-bar {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 16px;
          }

          .footer-legal-links {
            justify-content: center;
            gap: 14px;
          }

          .footer-wa-float {
            width: 48px;
            height: 48px;
            bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            right: 16px;
          }
        }

/* SOURCE: contact.html */
.marquee-section {
          background: linear-gradient(90deg, #1a2aff 0%, #0d1499 25%, #1a2aff 50%, #0d1499 75%, #1a2aff 100%);
          background-size: 200% 100%;
          animation: stripShift 8s linear infinite;
          padding: 13px 0;
          overflow: hidden;
          position: relative;
          z-index: 999;
          box-shadow: 0 4px 32px rgba(26,42,255,0.45), 0 -1px 0 rgba(255,255,255,0.08);
        }

        @keyframes stripShift {
          0% { background-position: 0% 0%; }
          100% { background-position: 200% 0%; }
        }

        /* Top shimmer */
        .marquee-section::before {
          content: '';
          position: absolute; 
          top: 0; 
          left: 0; 
          right: 0; 
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
          pointer-events: none;
        }

        .marquee-track { 
          overflow: hidden; 
          white-space: nowrap; 
          width: 100%;
        }

        .marquee-inner {
          display: inline-flex;
          align-items: center;
          width: max-content;
          animation: marqueeScroll 30s linear infinite;
          will-change: transform;
        }
        .marquee-inner:hover { 
          animation-play-state: paused; 
        }

        .marquee-item {
          display: inline-flex; 
          align-items: center; 
          gap: 9px;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.72rem; 
          font-weight: 800;
          color: #ffffff;
          letter-spacing: 1.2px;
          padding: 0 30px;
          white-space: nowrap;
          text-transform: uppercase;
          text-shadow: 0 1px 8px rgba(0,0,0,0.2);
          position: relative;
          flex-shrink: 0;
        }

        .marquee-item::after {
          content: '◆';
          position: absolute; 
          right: 0;
          font-size: 0.38rem;
          color: rgba(255,255,255,0.4);
          transform: translateX(50%);
        }

        .marquee-item svg {
          color: #fff;
          .9;
          flex-shrink: 0;
        }

        @keyframes marqueeScroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }

        @media (max-width: 480px) {
          .marquee-section { padding: 11px 0; }
          .marquee-item { font-size: 0.64rem; padding: 0 20px; }
        }

/* SOURCE: home.html */
.marquee-section {
          background: linear-gradient(90deg, #1a2aff 0%, #0d1499 25%, #1a2aff 50%, #0d1499 75%, #1a2aff 100%);
          background-size: 200% 100%;
          animation: stripShift 8s linear infinite;
          padding: 13px 0;
          overflow: hidden;
          position: relative;
          z-index: 999;
          box-shadow: 0 4px 32px rgba(26,42,255,0.45), 0 -1px 0 rgba(255,255,255,0.08);
        }

        @keyframes stripShift {
          0% { background-position: 0% 0%; }
          100% { background-position: 200% 0%; }
        }

        /* Top shimmer */
        .marquee-section::before {
          content: '';
          position: absolute; 
          top: 0; 
          left: 0; 
          right: 0; 
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
          pointer-events: none;
        }

        .marquee-track { 
          overflow: hidden; 
          white-space: nowrap; 
          width: 100%;
        }

        .marquee-inner {
          display: inline-flex;
          align-items: center;
          width: max-content;
          animation: marqueeScroll 30s linear infinite;
          will-change: transform;
        }
        .marquee-inner:hover { 
          animation-play-state: paused; 
        }

        .marquee-item {
          display: inline-flex; 
          align-items: center; 
          gap: 9px;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.72rem; 
          font-weight: 800;
          color: #ffffff;
          letter-spacing: 1.2px;
          padding: 0 30px;
          white-space: nowrap;
          text-transform: uppercase;
          text-shadow: 0 1px 8px rgba(0,0,0,0.2);
          position: relative;
          flex-shrink: 0;
        }

        .marquee-item::after {
          content: '◆';
          position: absolute; 
          right: 0;
          font-size: 0.38rem;
          color: rgba(255,255,255,0.4);
          transform: translateX(50%);
        }

        .marquee-item svg {
          color: #fff;
          .9;
          flex-shrink: 0;
        }

        @keyframes marqueeScroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }

        @media (max-width: 480px) {
          .marquee-section { padding: 11px 0; }
          .marquee-item { font-size: 0.64rem; padding: 0 20px; }
        }

/* SOURCE: home.html */
/* ============================================================
           HERO SECTION COMPONENT STYLES
           ============================================================ */

        @keyframes hoSpin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes hoCounter {
          from { transform: rotate(0deg); }
          to { transform: rotate(-360deg); }
        }

        @keyframes hoSpinRev {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }

        @keyframes centerPulseRing {
          0%, 100% { transform: translate(-50%, -50%) scale(1); .25; }
          50% { transform: translate(-50%, -50%) scale(1.15); .7; }
        }

        @keyframes photonOrbit {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes photonOrbitRev {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }

        @keyframes iconPing {
          0% { transform: scale(1); .8; }
          100% { transform: scale(1.6);  }
        }

        @keyframes clientsScroll {
          0% { transform: translate3d(0, 0, 0); }
          100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes clientsScrollRev {
          0% { transform: translate3d(-50%, 0, 0); }
          100% { transform: translate3d(0, 0, 0); }
        }

        @keyframes cursorBlink {
          0%, 100% { opacity: 1; }
          50% {  }
        }

        @keyframes floatAmbient {
          0%, 100% { transform: translate(0, 0); }
          50% { transform: translate(15px, -20px); }
        }

        .hero-section {
          position: relative;
          min-height: 100vh;
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background: linear-gradient(135deg, #030712 0%, #0a0f1e 50%, #0f1629 100%);
          isolation: isolate;
          contain: paint;
        }

        /* Ambient Glow & Grid Layer */
        .hero-bg-layer {
          position: absolute;
          inset: 0;
          overflow: hidden;
          pointer-events: none;
          z-index: 0;
        }

        .hero-grid-overlay {
          position: absolute;
          inset: 0;
          background-image: 
            linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
          background-size: clamp(40px, 6vw, 64px) clamp(40px, 6vw, 64px);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
          -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
        }

        .hero-glow-blob-1 {
          position: absolute;
          width: clamp(300px, 50vw, 750px);
          height: clamp(300px, 50vw, 750px);
          background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 68%);
          border-radius: 50%;
          filter: blur(80px);
          top: -150px;
          left: -100px;
          animation: floatAmbient 12s ease-in-out infinite;
        }

        .hero-glow-blob-2 {
          position: absolute;
          width: clamp(280px, 45vw, 650px);
          height: clamp(280px, 45vw, 650px);
          background: radial-gradient(circle, rgba(249,115,22,0.16), transparent 68%);
          border-radius: 50%;
          filter: blur(80px);
          bottom: -150px;
          right: -80px;
          animation: floatAmbient 14s ease-in-out infinite reverse;
        }

        .hero-watermark {
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: clamp(64px, 16vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(99,102,241,0.04);
          letter-spacing: clamp(8px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        /* Hero Main Layout */
        .hero-main-wrapper {
          position: relative;
          z-index: 2;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(36px, 6vw, 64px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 60px);
        }

        .hero-grid {
          display: grid;
          grid-template-columns: 1.15fr 0.95fr;
          align-items: center;
          gap: clamp(32px, 5vw, 64px);
          width: 100%;
        }

        .hero-text-col {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          width: 100%;
          max-width: 620px;
        }

        /* Top Announcement Badge */
        .hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: rgba(99,102,241,0.12);
          border: 1px solid rgba(99,102,241,0.3);
          color: #c7d2fe;
          font-size: clamp(0.7rem, 1vw, 0.78rem);
          font-weight: 700;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          padding: clamp(6px, 1.2vw, 9px) clamp(14px, 2vw, 20px);
          border-radius: 50px;
          margin-bottom: clamp(18px, 3vw, 26px);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 4px 20px rgba(99,102,241,0.18);
          max-width: 100%;
          word-break: break-word;
        }

        .hero-badge-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 10px #10b981;
          flex-shrink: 0;
        }

        /* Hero Headline */
        .hero-headline {
          font-size: clamp(2.35rem, 5.2vw + 0.5rem, 5.4rem);
          font-weight: 900;
          line-height: 1.05;
          color: #ffffff;
          margin-bottom: clamp(14px, 2.5vw, 20px);
          letter-spacing: -0.035em;
          text-shadow: 0 4px 30px rgba(0,0,0,0.5);
          word-break: break-word;
        }

        .hero-headline-accent {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          display: inline-block;
        }

        .hero-cursor {
          color: #ff6b00;
          font-weight: 300;
          display: inline-block;
          margin-left: 2px;
          animation: cursorBlink 0.9s infinite;
        }

        .hero-headline-bar {
          width: clamp(70px, 12vw, 110px);
          height: 4px;
          background: linear-gradient(90deg, #ff6b00, rgba(255,107,0,0.1));
          border-radius: 4px;
          margin-bottom: clamp(16px, 2.5vw, 24px);
        }

        /* Hero Description */
        .hero-desc {
          color: #cbd5e1;
          font-size: clamp(0.95rem, 1.1vw + 0.4rem, 1.1rem);
          line-height: 1.8;
          max-width: 520px;
          margin-bottom: clamp(24px, 3.5vw, 32px);
          font-weight: 400;
        }

        .hero-desc strong {
          color: #ffffff;
          font-weight: 700;
        }

        /* CTA Buttons */
        .hero-cta-group {
          display: flex;
          align-items: center;
          gap: 14px;
          flex-wrap: wrap;
          width: 100%;
          margin-bottom: clamp(24px, 4vw, 34px);
        }

        .hero-btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border: none;
          padding: 13px 28px;
          border-radius: 12px;
          font-size: clamp(0.9rem, 1vw, 1rem);
          font-weight: 700;
          cursor: pointer;
          box-shadow: 0 4px 20px rgba(24,119,242,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          text-decoration: none;
        }

        .hero-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 30px rgba(24,119,242,0.6);
        }

        .hero-btn-primary:active {
          transform: translateY(0);
        }

        .hero-btn-secondary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: rgba(255,255,255,0.06);
          color: #f8fafc;
          border: 1.5px solid rgba(255,255,255,0.22);
          padding: 13px 26px;
          border-radius: 12px;
          font-size: clamp(0.9rem, 1vw, 1rem);
          font-weight: 600;
          cursor: pointer;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hero-btn-secondary:hover {
          background: rgba(255,255,255,0.12);
          border-color: rgba(255,255,255,0.45);
          color: #ffffff;
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        /* Stats Grid */
        .hero-stats-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(8px, 1.5vw, 12px);
          width: 100%;
        }

        .hero-stat-card {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding: clamp(10px, 1.5vw, 14px) clamp(10px, 1.5vw, 16px);
          border-radius: 14px;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          transition: all 0.25s ease;
          position: relative;
          overflow: hidden;
        }

        .hero-stat-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 24px rgba(0,0,0,0.35);
        }

        .hero-stat-num {
          font-size: clamp(1.25rem, 2vw + 0.3rem, 1.7rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1.1;
          margin-bottom: 4px;
        }

        .hero-stat-label {
          font-size: clamp(0.58rem, 0.7vw + 0.2rem, 0.68rem);
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          line-height: 1.25;
        }

        /* Hero Orbit Showcase */
        .hero-orbit-col {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          position: relative;
        }

        .hero-orbit-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          position: relative;
        }

        .hero-orbit-box {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          user-select: none;
          flex-shrink: 0;
        }

        /* Ambient background glow */
        .hero-orbit-ambient-aura {
          position: absolute;
          inset: 6%;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(249, 115, 22, 0.08) 45%, transparent 72%);
          filter: blur(40px);
          pointer-events: none;
          z-index: 0;
        }

        /* Concentric Track Rings */
        .hero-orbit-track {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          pointer-events: none;
          z-index: 1;
        }

        /* Outer Celestial Ring */
        .hero-orbit-track-outer {
          border: 1px dashed rgba(99, 102, 241, 0.22);
          box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.05);
        }

        /* Middle Primary Track - where the 6 planets travel */
        .hero-orbit-track-main {
          border: 1.5px solid rgba(255, 255, 255, 0.12);
          box-shadow: 
            0 0 16px rgba(99, 102, 241, 0.15),
            inset 0 0 16px rgba(99, 102, 241, 0.1);
        }

        .hero-orbit-track-glow {
          position: absolute;
          inset: -1px;
          border-radius: 50%;
          border: 1.5px solid transparent;
          background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(249,115,22,0.25)) border-box;
          -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          .6;
        }

        /* Inner Celestial Ring */
        .hero-orbit-track-inner {
          border: 1px dashed rgba(249, 115, 22, 0.22);
          animation: hoSpinRev 38s linear infinite;
        }

        /* Orbiting Photons / Particles */
        .hero-orbit-photon-wrap {
          position: absolute;
          inset: 0;
          border-radius: 50%;
        }

        .outer-photon-wrap {
          animation: photonOrbit 32s linear infinite;
        }

        .inner-photon-wrap-1 {
          animation: photonOrbitRev 24s linear infinite;
        }

        .inner-photon-wrap-2 {
          animation: photonOrbit 18s linear infinite;
        }

        .hero-orbit-photon {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #60a5fa;
          box-shadow: 0 0 12px 3px #60a5fa, 0 0 20px #3b82f6;
        }

        .hero-orbit-photon.inner-photon {
          background: #fb923c;
          box-shadow: 0 0 10px 2px #fb923c, 0 0 18px #ea580c;
          width: 6px;
          height: 6px;
        }

        .hero-orbit-photon.inner-photon.alt {
          top: auto;
          bottom: 0;
          background: #a855f7;
          box-shadow: 0 0 10px 2px #a855f7;
          width: 5px;
          height: 5px;
        }

        /* Rotator */
        .hero-orbit-rotator {
          position: absolute;
          inset: 0;
          animation: hoSpin 28s linear infinite;
          z-index: 5;
        }

        .hero-orbit-rotator.is-paused {
          animation-play-state: paused;
        }

        /* Orbit Node (Planet) Anchor */
        .hero-orbit-node {
          position: absolute;
          transform: translate(-50%, -50%);
          cursor: pointer;
          outline: none;
          z-index: 10;
          transition: z-index 0.2s ease;
        }

        .hero-orbit-node.is-node-hovered {
          z-index: 30;
        }

        /* Counter-rotating container keeps content upright around exact anchor */
        .hero-orbit-node-inner {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          animation: hoCounter 28s linear infinite;
          transform-origin: center center;
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .hero-orbit-node-inner.is-paused {
          animation-play-state: paused;
        }

        .hero-orbit-node:hover .hero-orbit-node-inner,
        .hero-orbit-node:focus-visible .hero-orbit-node-inner {
          transform: scale(1.18);
        }

        /* Icon Sphere */
        .hero-orbit-icon {
          position: relative;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(3, 7, 18, 0.98) 100%);
          border: 2px solid var(--service-color);
          box-shadow: 
            0 0 18px rgba(0, 0, 0, 0.8),
            0 0 16px var(--service-color),
            inset 0 1px 2px rgba(255, 255, 255, 0.3);
          transition: all 0.3s ease;
          overflow: visible;
        }

        .hero-orbit-node:hover .hero-orbit-icon {
          box-shadow: 
            0 0 30px var(--service-color),
            0 8px 24px rgba(0, 0, 0, 0.9),
            inset 0 1px 4px rgba(255, 255, 255, 0.5);
          border-color: #ffffff;
        }

        .hero-orbit-icon-img {
          object-fit: contain;
          border-radius: 8px;
          z-index: 2;
          transition: transform 0.3s ease;
        }

        .hero-orbit-node:hover .hero-orbit-icon-img {
          transform: scale(1.08);
        }

        .hero-orbit-icon-glow {
          position: absolute;
          inset: -4px;
          border-radius: 50%;
          .3;
          filter: blur(8px);
          transition: opacity 0.3s ease;
          z-index: 1;
        }

        .hero-orbit-node:hover .hero-orbit-icon-glow {
          .85;
          filter: blur(12px);
        }

        .hero-orbit-icon-ping {
          position: absolute;
          inset: -2px;
          border-radius: 50%;
          border: 1.5px solid var(--service-color);
          animation: iconPing 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
          pointer-events: none;
          
        }

        .hero-orbit-node:hover .hero-orbit-icon-ping {
          opacity: 1;
        }

        /* Label Pill */
        .hero-orbit-node-label {
          font-size: clamp(0.58rem, 0.8vw, 0.72rem);
          font-weight: 800;
          text-align: center;
          white-space: nowrap;
          background: rgba(3, 7, 18, 0.92);
          padding: 3px 9px;
          border-radius: 20px;
          color: #f1f5f9;
          border: 1px solid rgba(255, 255, 255, 0.16);
          border-left: 2.5px solid var(--service-color);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
          pointer-events: none;
          transition: all 0.25s ease;
        }

        .hero-orbit-node:hover .hero-orbit-node-label {
          background: rgba(15, 23, 42, 0.98);
          color: #ffffff;
          border-color: var(--service-color);
          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 10px var(--service-color);
        }

        /* Center Hub (Sun Core) */
        .hero-orbit-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 8;
        }

        .hero-orbit-center-core {
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 
            0 0 0 3px rgba(255, 255, 255, 0.85),
            0 0 30px rgba(99, 102, 241, 0.5),
            0 0 60px rgba(249, 115, 22, 0.25),
            0 14px 40px rgba(0, 0, 0, 0.5);
          overflow: hidden;
          z-index: 2;
        }

        .hero-orbit-center-img {
          width: 86%;
          height: 86%;
          object-fit: contain;
          border-radius: 50%;
        }

        .hero-orbit-center-overlay {
          position: absolute;
          bottom: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .hero-orbit-center-badge {
          font-size: 0.52rem;
          font-weight: 900;
          letter-spacing: 0.8px;
          text-transform: uppercase;
          background: linear-gradient(135deg, #6366f1, #f97316);
          color: #ffffff;
          padding: 1px 6px;
          border-radius: 10px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        /* Pulse Rings */
        .hero-orbit-pulse-ring {
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 50%;
          pointer-events: none;
        }

        .hero-orbit-pulse-ring.ring-1 {
          width: 125%;
          height: 125%;
          border: 1.5px solid rgba(99, 102, 241, 0.35);
          animation: centerPulseRing 3.2s ease-in-out infinite;
        }

        .hero-orbit-pulse-ring.ring-2 {
          width: 155%;
          height: 155%;
          border: 1px dashed rgba(249, 115, 22, 0.3);
          animation: centerPulseRing 3.2s ease-in-out infinite 1.1s;
        }

        .hero-orbit-pulse-ring.ring-3 {
          width: 190%;
          height: 190%;
          border: 1px solid rgba(99, 102, 241, 0.15);
          animation: centerPulseRing 3.2s ease-in-out infinite 2.2s;
        }



        /* Quick Service Chips for Small Devices */
        .hero-orbit-chips {
          display: none;
          flex-direction: column;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        }

        .hero-orbit-chips-title {
          font-size: 0.72rem;
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 1.5px;
          margin-bottom: 10px;
        }

        .hero-orbit-chips-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
          width: 100%;
        }

        .hero-orbit-chip {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.12);
          border-left: 3px solid var(--chip-color);
          border-radius: 20px;
          padding: 6px 14px;
          color: #f1f5f9;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          transition: all 0.2s ease;
        }

        .hero-orbit-chip:hover,
        .hero-orbit-chip:active {
          background: rgba(255,255,255,0.12);
          transform: translateY(-1px);
        }

        .hero-orbit-chip-icon {
          width: 18px;
          height: 18px;
          object-fit: contain;
          border-radius: 4px;
        }

        .hero-orbit-chip-arrow {
          color: #94a3b8;
        }





        /* Modal Styles */
        .service-modal-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.78);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: clamp(12px, 3vw, 24px);
          animation: fadeIn 0.2s ease-out;
        }

        @keyframes fadeIn {
          from {  }
          to { opacity: 1; }
        }

        .service-modal-card {
          width: 100%;
          max-width: 500px;
          max-height: 88vh;
          border-radius: 24px;
          overflow-y: auto;
          box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
          background: #ffffff;
          position: relative;
        }

        .service-modal-close {
          position: absolute;
          top: 14px;
          right: 14px;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.3);
          border: none;
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          transition: background 0.2s, transform 0.2s;
        }

        .service-modal-close:hover {
          background: rgba(0, 0, 0, 0.55);
          transform: scale(1.08);
        }

        .service-modal-header {
          padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 28px);
          display: flex;
          align-items: center;
          gap: 16px;
          position: relative;
        }

        .service-modal-icon-wrap {
          width: 54px;
          height: 54px;
          border-radius: 16px;
          background: rgba(255,255,255,0.22);
          backdrop-filter: blur(8px);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }

        .service-modal-icon-wrap img {
          width: 38px;
          height: 38px;
          object-fit: contain;
          border-radius: 8px;
        }

        .service-modal-title-wrap {
          flex: 1;
          min-width: 0;
          padding-right: 28px;
        }

        .service-modal-title {
          font-size: clamp(1.25rem, 2vw, 1.45rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.02em;
          line-height: 1.2;
        }

        .service-modal-tagline {
          font-size: 0.82rem;
          color: rgba(255,255,255,0.88);
          margin-top: 3px;
          line-height: 1.35;
        }

        .service-modal-badge {
          position: absolute;
          top: 14px;
          right: 54px;
          background: rgba(255,255,255,0.25);
          border: 1px solid rgba(255,255,255,0.4);
          color: #ffffff;
          font-size: 0.65rem;
          font-weight: 800;
          padding: 3px 10px;
          border-radius: 50px;
          letter-spacing: 0.4px;
        }

        .service-modal-body {
          padding: clamp(20px, 4vw, 28px);
          background: #ffffff;
        }

        .service-modal-desc {
          color: #4b5563;
          font-size: 0.88rem;
          line-height: 1.7;
          margin-bottom: 20px;
        }

        .service-modal-features-title {
          font-size: 0.78rem;
          font-weight: 800;
          color: #111827;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 12px;
        }

        .service-modal-features-list {
          list-style: none;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px 12px;
          margin-bottom: 24px;
          padding: 0;
        }

        .service-modal-features-list li {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 0.82rem;
          color: #374151;
          font-weight: 500;
        }

        .service-modal-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 20px;
          background: #f8fafc;
          border-radius: 16px;
          border: 1px solid #e2e8f0;
          gap: 14px;
          flex-wrap: wrap;
        }

        .service-modal-price-label {
          font-size: 0.68rem;
          color: #64748b;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        .service-modal-price-val {
          font-size: 1.65rem;
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1;
        }

        .service-modal-period {
          font-size: 0.78rem;
          font-weight: 600;
          color: #64748b;
          margin-left: 3px;
        }

        .service-modal-cta {
          color: #ffffff;
          border: none;
          padding: 11px 22px;
          border-radius: 50px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 0.88rem;
          font-weight: 700;
          box-shadow: 0 4px 14px rgba(0,0,0,0.18);
          transition: transform 0.2s, box-shadow 0.2s;
        }

        .service-modal-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 22px rgba(0,0,0,0.25);
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS (Desktop, Tablet, Mobile)
           ============================================================ */

        /* Tablets & Medium Screens (<= 1024px) */
        @media (max-width: 1024px) {
          .hero-grid {
            grid-template-columns: 1fr;
            gap: 48px;
          }

          .hero-text-col {
            max-width: 100%;
            align-items: center;
            text-align: center;
          }

          .hero-headline {
            text-align: center;
          }

          .hero-headline-bar {
            margin-left: auto;
            margin-right: auto;
          }

          .hero-desc {
            text-align: center;
            max-width: 600px;
          }

          .hero-cta-group {
            justify-content: center;
          }

          .hero-stats-grid {
            max-width: 600px;
            margin: 0 auto;
          }
        }

        /* Portrait Tablets & Large Phones (<= 768px) */
        @media (max-width: 768px) {
          .hero-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            max-width: 100%;
          }

          .hero-orbit-chips {
            display: flex;
          }

          .service-modal-features-list {
            grid-template-columns: 1fr;
          }
        }

        /* Mobile Phones (<= 540px) */
        @media (max-width: 540px) {
          .hero-main-wrapper {
            padding: 28px 14px 36px;
          }

          .hero-badge {
            font-size: 0.68rem;
            padding: 6px 14px;
            letter-spacing: 0.8px;
            margin-bottom: 16px;
          }

          .hero-headline {
            font-size: clamp(2.1rem, 9.5vw, 2.7rem);
            line-height: 1.1;
            margin-bottom: 14px;
          }

          .hero-desc {
            font-size: 0.92rem;
            line-height: 1.7;
            margin-bottom: 22px;
          }

          .hero-cta-group {
            flex-direction: column;
            width: 100%;
            gap: 10px;
            margin-bottom: 24px;
          }

          .hero-btn-primary,
          .hero-btn-secondary {
            width: 100%;
            padding: 13px 20px;
            font-size: 0.94rem;
          }

          .hero-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .hero-stat-card {
            padding: 10px 12px;
            border-radius: 12px;
          }

          .hero-stat-num {
            font-size: 1.35rem;
          }

          .hero-stat-label {
            font-size: 0.62rem;
            letter-spacing: 0.5px;
          }

          .service-modal-card {
            max-height: 92vh;
            border-radius: 20px;
          }

          .service-modal-footer {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
          }

          .service-modal-cta {
            width: 100%;
            justify-content: center;
          }

          .clients-strip-wrapper {
            padding: 36px 0 28px;
          }

          .clients-strip-header {
            padding: 0 16px;
            margin-bottom: 20px;
          }
        }

        /* Extra Small Phones (<= 380px) */
        @media (max-width: 380px) {
          .hero-headline {
            font-size: 1.95rem;
          }

          .hero-badge {
            font-size: 0.64rem;
          }

          .hero-stat-num {
            font-size: 1.25rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .hero-section {
          background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #fef3c7 100%);
        }

        [data-theme="light"] .hero-badge {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .hero-headline {
          color: #0f172a;
          text-shadow: none;
        }

        [data-theme="light"] .hero-desc {
          color: #475569;
        }

        [data-theme="light"] .hero-desc strong {
          color: #0f172a;
        }

        [data-theme="light"] .hero-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .hero-stat-card {
          background: rgba(255, 255, 255, 0.85) !important;
          border-color: rgba(0, 0, 0, 0.08) !important;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .hero-stat-num {
          color: #0f172a;
        }

        [data-theme="light"] .hero-stat-label {
          color: #64748b;
        }

        [data-theme="light"] .hero-orbit-chip {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          color: #0f172a;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .hero-orbit-ambient-aura {
          background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(249, 115, 22, 0.06) 45%, transparent 72%);
        }

        [data-theme="light"] .hero-orbit-track-outer {
          border-color: rgba(99, 102, 241, 0.25);
        }

        [data-theme="light"] .hero-orbit-track-main {
          border-color: rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 16px rgba(99, 102, 241, 0.08);
        }

        [data-theme="light"] .hero-orbit-track-inner {
          border-color: rgba(249, 115, 22, 0.28);
        }

        [data-theme="light"] .hero-orbit-icon {
          background: #ffffff;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 12px var(--service-color);
        }

        [data-theme="light"] .hero-orbit-node-label {
          background: #ffffff;
          color: #0f172a;
          border-color: rgba(0, 0, 0, 0.12);
          border-left: 2.5px solid var(--service-color);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }



        [data-theme="light"] .hero-btn-secondary {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.12);
          color: #0f172a;
        }

        [data-theme="light"] .hero-btn-secondary:hover {
          background: rgba(0, 0, 0, 0.08);
        }

/* SOURCE: home.html */
/* ============================================================
           STANDALONE CLIENTS MARQUEE SECTION STYLES
           ============================================================ */

        @keyframes clientsScrollNormal {
          0% { transform: translate3d(0, 0, 0); }
          100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes clientsScrollReverse {
          0% { transform: translate3d(-50%, 0, 0); }
          100% { transform: translate3d(0, 0, 0); }
        }

        .clients-strip-section {
          position: relative;
          z-index: 10;
          width: 100%;
          padding: clamp(36px, 5vw, 64px) 0 clamp(32px, 5vw, 56px);
          background: #030712;
          overflow: hidden;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .clients-strip-header {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 0 clamp(16px, 4vw, 60px);
          margin-bottom: clamp(20px, 3.5vw, 32px);
          position: relative;
        }

        .clients-strip-line {
          flex: 1;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.25), transparent);
        }

        .clients-strip-center {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          flex-shrink: 0;
          text-align: center;
        }

        .clients-strip-tag {
          font-size: clamp(0.6rem, 0.9vw, 0.7rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: #818cf8;
          background: rgba(99, 102, 241, 0.1);
          border: 1px solid rgba(99, 102, 241, 0.25);
          padding: 4px 14px;
          border-radius: 50px;
        }

        .clients-strip-title {
          font-size: clamp(1.25rem, 2.5vw, 1.65rem);
          font-weight: 900;
          background: linear-gradient(135deg, #ffffff 30%, #c7d2fe);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          letter-spacing: -0.02em;
          margin: 0;
        }

        .clients-marquee-container {
          overflow: hidden;
          width: 100%;
          -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        }

        .clients-marquee-container.row-2 {
          margin-top: 14px;
        }

        .clients-marquee-track {
          display: flex;
          gap: 16px;
          width: max-content;
          will-change: transform;
          transform: translateZ(0);
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          padding: 6px 0;
        }

        .clients-marquee-track.anim-normal {
          animation: clientsScrollNormal 75s linear infinite;
        }

        .clients-marquee-track.anim-reverse {
          animation: clientsScrollReverse 70s linear infinite;
        }

        .clients-marquee-track:hover {
          animation-play-state: paused;
        }

        /* Client Card */
        .client-card {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          gap: 12px;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 18px;
          padding: 10px 14px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
          position: relative;
          overflow: hidden;
          min-width: clamp(175px, 20vw, 215px);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          text-decoration: none;
          color: inherit;
          transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .client-card.is-clickable {
          cursor: pointer;
        }

        .client-card:hover {
          transform: translateY(-4px) scale(1.02);
          box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
          border-color: var(--card-color);
        }

        .client-card-top-bar {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--card-color), transparent 80%);
          
          transition: opacity 0.25s;
        }

        .client-card:hover .client-card-top-bar {
          opacity: 1;
        }

        .client-card-logo-box {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          flex-shrink: 0;
          border: 1px solid rgba(255, 255, 255, 0.12);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.92);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .client-card-logo-img {
          width: 82%;
          height: 82%;
          object-fit: contain;
        }

        .client-card-fallback-letter {
          font-size: 1.1rem;
          font-weight: 900;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .client-card-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
        }

        .client-card-name {
          font-size: 0.88rem;
          font-weight: 800;
          color: #ffffff;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .client-card-industry {
          font-size: 0.65rem;
          color: #94a3b8;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        @media (max-width: 640px) {
          .clients-strip-section {
            padding: 28px 0;
          }

          .client-card {
            min-width: 160px;
            padding: 8px 12px;
          }

          .client-card-logo-box {
            width: 38px;
            height: 38px;
          }

          .client-card-name {
            font-size: 0.82rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .clients-strip-section {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .clients-strip-title {
          background: linear-gradient(135deg, #0f172a 30%, #4338ca);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        [data-theme="light"] .client-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .client-card-name {
          color: #0f172a;
        }

/* SOURCE: home.html */
/* ============================================================
           SERVICES COMPONENT STYLES
           ============================================================ */

        @keyframes serviceFloat {
          0%, 100% { transform: translateY(0) rotate(4deg); }
          50% { transform: translateY(-6px) rotate(4deg); }
        }

        .services-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .services-watermark {
          position: absolute;
          top: 18%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .services-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
          filter: blur(90px);
          top: -100px;
          left: -100px;
          pointer-events: none;
        }

        .services-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          right: -100px;
          pointer-events: none;
        }

        /* Section Header */
        .services-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .services-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .services-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .services-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .services-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Category Filter Tabs */
        .services-filters-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .services-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.09);
          color: #94a3b8;
          font-size: clamp(0.76rem, 1vw, 0.84rem);
          font-weight: 600;
          padding: 7px 16px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .services-filter-btn:hover {
          background: rgba(255, 255, 255, 0.08);
          color: #ffffff;
        }

        .services-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Responsive Services Grid */
        .services-grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: clamp(16px, 2.5vw, 28px);
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Service Card */
        .service-card-item {
          position: relative;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          overflow: hidden;
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .service-card-item:hover {
          transform: translateY(-6px);
          border-color: var(--service-color);
          box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--service-rgb), 0.2);
        }

        /* Card Header */
        .service-card-header {
          position: relative;
          padding: clamp(24px, 3.5vw, 32px) clamp(18px, 3vw, 24px) clamp(18px, 3vw, 22px);
          background: linear-gradient(135deg, var(--service-color) 0%, var(--service-dark) 100%);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .service-header-circle-1 {
          position: absolute;
          width: 220px;
          height: 220px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
          top: -60px;
          right: -60px;
          pointer-events: none;
        }

        .service-header-circle-2 {
          position: absolute;
          width: 160px;
          height: 160px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.05);
          bottom: -50px;
          left: -40px;
          pointer-events: none;
        }

        .service-badge {
          position: absolute;
          top: 14px;
          right: 14px;
          background: rgba(0, 0, 0, 0.3);
          border: 1px solid rgba(255, 255, 255, 0.25);
          color: #ffffff;
          font-size: 0.65rem;
          font-weight: 700;
          padding: 4px 10px;
          border-radius: 50px;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          z-index: 2;
        }

        .service-icon-box {
          position: relative;
          width: clamp(68px, 8vw, 84px);
          height: clamp(68px, 8vw, 84px);
          margin-bottom: 14px;
          z-index: 1;
          animation: serviceFloat 3.6s ease-in-out infinite;
        }

        .service-icon-glow {
          position: absolute;
          inset: 0;
          border-radius: 20px;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
          filter: blur(4px);
        }

        .service-icon-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          border-radius: 18px;
          position: relative;
          z-index: 1;
        }

        .service-category-pill {
          display: inline-block;
          font-size: 0.64rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          background: rgba(255, 255, 255, 0.15);
          color: #ffffff;
          padding: 3px 10px;
          border-radius: 50px;
          margin-bottom: 6px;
        }

        .service-card-title {
          font-size: clamp(1.2rem, 1.8vw, 1.4rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.2;
          margin-bottom: 4px;
          letter-spacing: -0.01em;
        }

        .service-card-subtitle {
          font-size: clamp(0.76rem, 1vw, 0.84rem);
          color: rgba(255, 255, 255, 0.8);
          font-weight: 500;
        }

        /* Card Body */
        .service-card-body {
          padding: clamp(18px, 2.5vw, 24px);
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-between;
        }

        .service-card-desc {
          font-size: clamp(0.84rem, 1.1vw, 0.92rem);
          color: #94a3b8;
          line-height: 1.65;
          margin-bottom: 18px;
        }

        /* Stats Grid Inside Card */
        .service-stats-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          margin-bottom: 18px;
        }

        .service-stat-chip {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-radius: 12px;
          padding: 8px 6px;
          text-align: center;
        }

        .service-stat-num {
          font-size: clamp(0.95rem, 1.2vw, 1.15rem);
          font-weight: 900;
          line-height: 1.1;
          display: block;
        }

        .service-stat-lbl {
          font-size: 0.62rem;
          font-weight: 700;
          color: #64748b;
          text-transform: uppercase;
          letter-spacing: 0.4px;
          margin-top: 2px;
          display: block;
        }

        /* Checklist */
        .service-points-list {
          list-style: none;
          padding: 0;
          margin: 0 0 20px;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .service-point-item {
          display: flex;
          align-items: center;
          gap: 9px;
          font-size: clamp(0.78rem, 1vw, 0.84rem);
          color: #cbd5e1;
          font-weight: 500;
        }

        .service-point-check {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        /* CTA Button */
        .service-card-cta {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 18px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 12px;
          color: #ffffff;
          font-size: 0.88rem;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.25s ease;
          margin-top: auto;
        }

        .service-card-cta:hover {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.25);
          transform: translateY(-2px);
        }

        .service-cta-arrow {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          transition: transform 0.2s ease;
        }

        .service-card-cta:hover .service-cta-arrow {
          transform: translateX(4px);
        }

        /* Bottom Glow Line */
        .service-bottom-bar {
          height: 3px;
          width: 100%;
          background: linear-gradient(90deg, var(--service-color), var(--service-dark));
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .services-grid-container {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (max-width: 768px) {
          .services-section {
            padding: 48px 16px;
          }

          .services-grid-container {
            grid-template-columns: 1fr;
            gap: 18px;
          }

          .service-card-item {
            border-radius: 20px;
          }

          .service-card-header {
            padding: 22px 16px 18px;
          }

          .service-icon-box {
            width: 64px;
            height: 64px;
            margin-bottom: 12px;
          }

          .service-card-body {
            padding: 18px;
          }

          .service-stats-grid {
            gap: 6px;
            margin-bottom: 14px;
          }

          .service-stat-chip {
            padding: 6px 4px;
          }

          .service-stat-num {
            font-size: 0.95rem;
          }

          .service-stat-lbl {
            font-size: 0.58rem;
          }
        }

        @media (max-width: 480px) {
          .services-section {
            padding: 36px 12px;
          }

          .services-filters-wrap {
            gap: 6px;
            margin-bottom: 24px;
          }

          .services-filter-btn {
            padding: 6px 12px;
            font-size: 0.72rem;
          }

          .service-card-body {
            padding: 14px;
          }

          .service-point-item {
            font-size: 0.76rem;
            gap: 7px;
          }

          .service-card-cta {
            padding: 10px 14px;
            font-size: 0.82rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .services-section {
          background: #ffffff;
        }

        [data-theme="light"] .services-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .services-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .services-title {
          color: #0f172a;
        }

        [data-theme="light"] .services-subtitle {
          color: #475569;
        }

        [data-theme="light"] .services-filter-btn {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.08);
          color: #334155;
        }

        [data-theme="light"] .services-filter-btn:hover {
          background: rgba(0, 0, 0, 0.08);
          color: #0f172a;
        }

        [data-theme="light"] .service-card-item {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .service-card-desc {
          color: #475569;
        }

        [data-theme="light"] .service-stat-chip {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .service-stat-lbl {
          color: #64748b;
        }

        [data-theme="light"] .service-point-item {
          color: #1e293b;
        }

        [data-theme="light"] .service-card-cta {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.12);
          color: #0f172a;
        }

        [data-theme="light"] .service-card-cta:hover {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.2);
        }

/* SOURCE: home.html */
/* ============================================================
           PROCESS COMPONENT STYLES
           ============================================================ */

        .process-section-root {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .process-bg-text {
          position: absolute;
          top: 18%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .process-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 600px);
          height: clamp(300px, 45vw, 600px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          top: -120px;
          right: 5%;
          pointer-events: none;
        }

        .process-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          left: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .process-header {
          text-align: center;
          margin-bottom: clamp(36px, 5vw, 64px);
          position: relative;
          z-index: 1;
        }

        .process-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.74rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 6px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }

        .process-title {
          font-size: clamp(1.85rem, 4.5vw, 3.4rem);
          font-weight: 900;
          line-height: 1.1;
          color: #ffffff;
          letter-spacing: -0.025em;
          margin-bottom: 12px;
        }

        .process-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .process-sub {
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          color: #94a3b8;
          line-height: 1.75;
          max-width: 560px;
          margin: 0 auto;
        }

        /* Grid */
        .process-grid-container {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(16px, 2vw, 24px);
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Card */
        .process-card-item {
          position: relative;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          padding: clamp(24px, 3vw, 32px) clamp(16px, 2.5vw, 22px);
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .process-card-item:hover {
          transform: translateY(-6px);
          border-color: var(--step-color);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--step-rgb), 0.2);
        }

        .process-step-indicator {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 0.64rem;
          font-weight: 800;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          color: var(--step-color);
          background: rgba(var(--step-rgb), 0.12);
          border: 1px solid rgba(var(--step-rgb), 0.25);
          padding: 4px 12px;
          border-radius: 50px;
          margin-bottom: 20px;
        }

        .process-icon-bubble {
          width: clamp(60px, 7vw, 72px);
          height: clamp(60px, 7vw, 72px);
          border-radius: 20px;
          background: linear-gradient(135deg, rgba(var(--step-rgb), 0.2) 0%, rgba(var(--step-rgb), 0.05) 100%);
          border: 1.5px solid rgba(var(--step-rgb), 0.35);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--step-color);
          margin-bottom: 20px;
          box-shadow: 0 8px 24px rgba(var(--step-rgb), 0.2);
          transition: transform 0.3s ease;
        }

        .process-card-item:hover .process-icon-bubble {
          transform: scale(1.1) rotate(5deg);
        }

        .process-card-title {
          font-size: clamp(1.1rem, 1.5vw, 1.25rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.01em;
          margin-bottom: 10px;
        }

        .process-card-desc {
          font-size: clamp(0.82rem, 1vw, 0.88rem);
          color: #94a3b8;
          line-height: 1.65;
          margin: 0;
        }

        /* Connector Arrow Between Cards (Desktop only) */
        .process-connector-arrow {
          position: absolute;
          right: -16px;
          top: 40%;
          transform: translateY(-50%);
          color: rgba(255, 255, 255, 0.2);
          z-index: 2;
          pointer-events: none;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .process-grid-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
          }

          .process-connector-arrow {
            display: none;
          }
        }

        @media (max-width: 680px) {
          .process-section-root {
            padding: 40px 14px;
          }

          .process-grid-container {
            grid-template-columns: 1fr;
            gap: 14px;
          }

          .process-card-item {
            border-radius: 20px;
            padding: 22px 16px;
          }

          .process-icon-bubble {
            width: 54px;
            height: 54px;
            margin-bottom: 14px;
          }

          .process-step-indicator {
            margin-bottom: 14px;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .process-section-root {
          background: #f8fafc;
        }

        [data-theme="light"] .process-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .process-bg-text {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .process-title {
          color: #0f172a;
        }

        [data-theme="light"] .process-sub {
          color: #475569;
        }

        [data-theme="light"] .process-card-item {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .process-card-title {
          color: #0f172a;
        }

        [data-theme="light"] .process-card-desc {
          color: #475569;
        }

        [data-theme="light"] .process-connector-arrow {
          color: rgba(0, 0, 0, 0.15);
        }

/* SOURCE: home.html */
/* ============================================================
           ABOUT COMPONENT STYLES
           ============================================================ */

        .about-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .about-watermark {
          position: absolute;
          top: 25%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .about-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.14), transparent 70%);
          filter: blur(90px);
          top: -120px;
          left: -100px;
          pointer-events: none;
        }

        .about-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.1), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          right: -100px;
          pointer-events: none;
        }

        /* 2-Column Grid Layout */
        .about-container {
          display: grid;
          grid-template-columns: 1.15fr 1fr;
          gap: clamp(32px, 5vw, 64px);
          align-items: center;
          max-width: 1300px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Left Column: Mission & Features */
        .about-left-col {
          display: flex;
          flex-direction: column;
        }

        .about-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
          width: fit-content;
        }

        .about-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 18px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .about-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .about-desc-p {
          font-size: clamp(0.88rem, 1.1vw, 0.98rem);
          color: #94a3b8;
          line-height: 1.75;
          margin-bottom: 14px;
        }

        .about-desc-p strong {
          color: #f1f5f9;
        }

        /* Value Checklist */
        .about-checklist {
          list-style: none;
          padding: 0;
          margin: 18px 0 28px;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .about-checklist-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 14px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 12px;
          font-size: clamp(0.82rem, 1vw, 0.9rem);
          font-weight: 500;
          color: #cbd5e1;
          transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
        }

        .about-checklist-item:hover {
          transform: translateX(4px);
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(249, 115, 22, 0.4);
          color: #ffffff;
        }

        .about-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 14px 30px;
          border-radius: 12px;
          font-size: 0.94rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 4px 18px rgba(24, 119, 242, 0.4);
          transition: all 0.25s ease;
          width: fit-content;
        }

        .about-cta-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 28px rgba(24, 119, 242, 0.6);
        }

        /* Right Column: Interactive Pillars Card Deck */
        .about-right-col {
          display: flex;
          flex-direction: column;
          gap: clamp(14px, 2vw, 18px);
        }

        /* Quick Stat Highlights Top Row */
        .about-stats-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: clamp(10px, 1.8vw, 14px);
        }

        .about-stat-mini-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          padding: clamp(14px, 2vw, 18px);
          display: flex;
          align-items: center;
          gap: 12px;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }

        .about-stat-icon-box {
          width: 42px;
          height: 42px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .about-stat-number {
          font-size: clamp(1.2rem, 1.8vw, 1.45rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.1;
        }

        .about-stat-label {
          font-size: 0.68rem;
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        /* Value Cards Deck */
        .about-values-deck {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .about-value-card {
          background: rgba(255, 255, 255, 0.02);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 20px);
          display: flex;
          align-items: flex-start;
          gap: 14px;
          cursor: pointer;
          transition: all 0.25s ease;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }

        .about-value-card:hover,
        .about-value-card.is-active {
          background: rgba(255, 255, 255, 0.06);
          border-color: var(--card-color);
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .about-value-icon {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          background: rgba(255, 255, 255, 0.04);
        }

        .about-value-content {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .about-value-title {
          font-size: clamp(0.92rem, 1.2vw, 1.05rem);
          font-weight: 800;
          color: #ffffff;
        }

        .about-value-desc {
          font-size: clamp(0.78rem, 1vw, 0.85rem);
          color: #94a3b8;
          line-height: 1.5;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .about-container {
            grid-template-columns: 1fr;
            gap: 40px;
          }

          .about-cta-btn {
            align-self: flex-start;
          }
        }

        @media (max-width: 640px) {
          .about-section {
            padding: 40px 14px;
          }

          .about-checklist-item {
            padding: 8px 10px;
            gap: 8px;
            font-size: 0.8rem;
          }

          .about-cta-btn {
            width: 100%;
            justify-content: center;
          }

          .about-stat-mini-card {
            padding: 10px;
            gap: 8px;
          }

          .about-stat-icon-box {
            width: 34px;
            height: 34px;
          }

          .about-value-card {
            padding: 12px 14px;
            gap: 10px;
          }

          .about-value-icon {
            width: 34px;
            height: 34px;
          }
        }

        @media (max-width: 400px) {
          .about-stats-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .about-section {
          background: #ffffff;
        }

        [data-theme="light"] .about-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .about-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .about-title {
          color: #0f172a;
        }

        [data-theme="light"] .about-desc-p {
          color: #475569;
        }

        [data-theme="light"] .about-desc-p strong {
          color: #0f172a;
        }

        [data-theme="light"] .about-checklist-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          color: #1e293b;
        }

        [data-theme="light"] .about-stat-mini-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .about-stat-number {
          color: #0f172a;
        }

        [data-theme="light"] .about-stat-label {
          color: #64748b;
        }

        [data-theme="light"] .about-value-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .about-value-card:hover,
        [data-theme="light"] .about-value-card.is-active {
          background: #ffffff;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .about-value-title {
          color: #0f172a;
        }

        [data-theme="light"] .about-value-desc {
          color: #475569;
        }

/* SOURCE: home.html */
/* ============================================================
           CTA BANNER COMPONENT STYLES
           ============================================================ */

        .cta-banner-wrapper {
          position: relative;
          max-width: 1280px;
          width: calc(100% - clamp(24px, 5vw, 64px));
          margin: clamp(40px, 7vw, 80px) auto;
          background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0a0d24 100%);
          border: 1px solid rgba(99, 102, 241, 0.35);
          border-radius: clamp(20px, 3.5vw, 32px);
          padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 60px);
          overflow: hidden;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(99, 102, 241, 0.15);
        }

        .cta-banner-orb-1 {
          position: absolute;
          width: clamp(260px, 40vw, 500px);
          height: clamp(260px, 40vw, 500px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%);
          filter: blur(80px);
          top: -120px;
          left: -80px;
          pointer-events: none;
        }

        .cta-banner-orb-2 {
          position: absolute;
          width: clamp(240px, 35vw, 450px);
          height: clamp(240px, 35vw, 450px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.22), transparent 70%);
          filter: blur(80px);
          bottom: -100px;
          right: -60px;
          pointer-events: none;
        }

        .cta-banner-inner {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: 1.3fr auto;
          gap: clamp(24px, 4vw, 48px);
          align-items: center;
        }

        .cta-banner-content {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .cta-banner-badge {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(249, 115, 22, 0.15);
          border: 1px solid rgba(249, 115, 22, 0.35);
          color: #fb923c;
          font-size: clamp(0.68rem, 1vw, 0.74rem);
          font-weight: 800;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          padding: 6px 14px;
          border-radius: 50px;
          width: fit-content;
        }

        .cta-banner-heading {
          font-size: clamp(1.6rem, 3.5vw, 2.9rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.15;
          letter-spacing: -0.025em;
          margin: 0;
        }

        .cta-banner-heading-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .cta-banner-desc {
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          color: #cbd5e1;
          line-height: 1.6;
          margin: 0;
          max-width: 580px;
        }

        .cta-banner-actions {
          display: flex;
          flex-direction: column;
          gap: 12px;
          min-width: 220px;
        }

        .cta-btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 15px 30px;
          border-radius: 14px;
          background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
          color: #1e1b4b;
          font-size: 0.95rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          white-space: nowrap;
        }

        .cta-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 40px rgba(255, 255, 255, 0.35);
        }

        .cta-btn-whatsapp {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 13px 26px;
          border-radius: 14px;
          background: rgba(37, 211, 102, 0.12);
          border: 1.5px solid rgba(37, 211, 102, 0.45);
          color: #4ade80;
          font-size: 0.92rem;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.2s ease;
          white-space: nowrap;
        }

        .cta-btn-whatsapp:hover {
          background: rgba(37, 211, 102, 0.22);
          border-color: #22c55e;
          color: #ffffff;
          transform: translateY(-2px);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 880px) {
          .cta-banner-inner {
            grid-template-columns: 1fr;
            gap: 28px;
            text-align: center;
          }

          .cta-banner-content {
            align-items: center;
          }

          .cta-banner-badge {
            align-self: center;
          }

          .cta-banner-actions {
            flex-direction: row;
            justify-content: center;
            width: 100%;
          }

          .cta-btn-primary,
          .cta-btn-whatsapp {
            flex: 1;
            padding: 13px 18px;
          }
        }

        @media (max-width: 540px) {
          .cta-banner-wrapper {
            padding: 28px 16px;
            width: calc(100% - 20px);
            margin: 32px auto;
          }

          .cta-banner-actions {
            flex-direction: column;
            width: 100%;
          }

          .cta-btn-primary,
          .cta-btn-whatsapp {
            width: 100%;
          }
        }

/* SOURCE: home.html */
/* ============================================================
           RESULTS COMPONENT STYLES
           ============================================================ */

        @keyframes resultsFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes resultsScaleIn {
          from {  transform: scale(0.94); }
          to { opacity: 1; transform: scale(1); }
        }

        .results-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .results-watermark {
          position: absolute;
          top: 22%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .results-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.16), transparent 70%);
          filter: blur(90px);
          top: -100px;
          right: 5%;
          pointer-events: none;
        }

        .results-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: 10%;
          left: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .results-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .results-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .results-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .results-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .results-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Stats Bar */
        .results-stats-bar {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: clamp(8px, 1.5vw, 14px);
          max-width: 1200px;
          margin: 0 auto clamp(36px, 5vw, 56px);
          position: relative;
          z-index: 1;
        }

        .results-stat-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: clamp(12px, 1.8vw, 18px) clamp(10px, 1.5vw, 16px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          text-align: center;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .results-stat-card:hover {
          transform: translateY(-3px);
          border-color: rgba(99, 102, 241, 0.35);
        }

        .results-stat-num {
          display: flex;
          align-items: center;
          gap: 3px;
          font-size: clamp(1.3rem, 2vw, 1.75rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1;
          margin-bottom: 4px;
        }

        .results-stat-lbl {
          font-size: clamp(0.6rem, 0.8vw, 0.72rem);
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        /* Case Studies Carousel */
        .results-cases-wrap {
          max-width: 1280px;
          margin: 0 auto clamp(40px, 6vw, 64px);
          position: relative;
          z-index: 1;
        }

        .results-cases-title {
          font-size: clamp(1.1rem, 2vw, 1.4rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .results-cases-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(12px, 2vw, 20px);
        }

        .results-case-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          padding: clamp(16px, 2.5vw, 20px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          position: relative;
          overflow: hidden;
          transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .results-case-card:hover {
          transform: translateY(-4px);
          border-color: var(--case-color);
        }

        .results-case-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 10px;
          margin-bottom: 12px;
        }

        .results-case-brand {
          font-size: 1.05rem;
          font-weight: 900;
          color: #ffffff;
        }

        .results-case-cat {
          font-size: 0.65rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          padding: 3px 8px;
          border-radius: 6px;
          white-space: nowrap;
        }

        .results-case-metric-box {
          display: flex;
          align-items: baseline;
          gap: 6px;
          margin-bottom: 10px;
        }

        .results-case-metric-val {
          font-size: 1.8rem;
          font-weight: 900;
          line-height: 1;
        }

        .results-case-metric-lbl {
          font-size: 0.72rem;
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
        }

        .results-case-desc {
          font-size: 0.8rem;
          color: #94a3b8;
          line-height: 1.5;
          margin-bottom: 14px;
        }

        .results-case-sub-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          margin-bottom: 12px;
        }

        .results-case-sub-item {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 10px;
          padding: 6px 8px;
          text-align: center;
        }

        .results-case-sub-val {
          font-size: 0.88rem;
          font-weight: 800;
          display: block;
        }

        .results-case-sub-lbl {
          font-size: 0.6rem;
          color: #64748b;
          font-weight: 700;
          text-transform: uppercase;
        }

        .results-case-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }

        .results-case-tag-pill {
          font-size: 0.65rem;
          font-weight: 600;
          padding: 3px 8px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.05);
          color: #cbd5e1;
        }

        /* Platform Filter Tabs */
        .results-filter-bar {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(24px, 4vw, 36px);
          position: relative;
          z-index: 1;
        }

        .results-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: clamp(0.76rem, 1vw, 0.85rem);
          font-weight: 600;
          padding: 8px 16px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          gap: 6px;
        }

        .results-filter-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
        }

        .results-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Platform Block */
        .platform-block {
          max-width: 1280px;
          margin: 0 auto clamp(32px, 5vw, 48px);
          position: relative;
          z-index: 1;
        }

        .platform-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: clamp(16px, 3vw, 24px) clamp(16px, 3vw, 28px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          margin-bottom: clamp(14px, 2vw, 20px);
          gap: 20px;
          flex-wrap: wrap;
        }

        .platform-header-left {
          display: flex;
          align-items: center;
          gap: 16px;
          flex: 1;
          min-width: 260px;
        }

        .platform-icon-wrap {
          width: clamp(44px, 5vw, 52px);
          height: clamp(44px, 5vw, 52px);
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }

        .platform-text-wrap {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .platform-title {
          font-size: clamp(1.15rem, 1.8vw, 1.35rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.01em;
        }

        .platform-desc {
          font-size: clamp(0.78rem, 1vw, 0.86rem);
          color: #94a3b8;
          line-height: 1.45;
        }

        .platform-stats-chips {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
        }

        .platform-chip {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 6px 14px;
          border-radius: 10px;
          border: 1px solid;
          text-align: center;
        }

        .platform-chip-val {
          font-size: 0.95rem;
          font-weight: 900;
          line-height: 1.1;
        }

        .platform-chip-lbl {
          font-size: 0.62rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          .85;
        }

        /* Proof Grid */
        .platform-images-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(10px, 1.8vw, 18px);
        }

        .platform-proof-card {
          position: relative;
          background: rgba(255, 255, 255, 0.02);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          overflow: hidden;
          cursor: pointer;
          transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
          display: flex;
          flex-direction: column;
        }

        .platform-proof-card:hover {
          transform: translateY(-4px);
          border-color: var(--platform-color);
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
        }

        .platform-proof-top-bar {
          height: 3px;
          width: 100%;
        }

        .platform-img-box {
          position: relative;
          width: 100%;
          height: clamp(140px, 18vw, 180px);
          overflow: hidden;
          background: #000;
        }

        .platform-proof-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          transition: transform 0.4s ease;
        }

        .platform-proof-card:hover .platform-proof-img {
          transform: scale(1.06);
        }

        .platform-proof-overlay {
          position: absolute;
          inset: 0;
          background: rgba(3, 7, 18, 0.5);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          display: flex;
          align-items: center;
          justify-content: center;
          
          transition: opacity 0.25s ease;
        }

        .platform-proof-card:hover .platform-proof-overlay {
          opacity: 1;
        }

        .platform-zoom-btn {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        }

        .platform-proof-footer {
          padding: 10px 12px;
          display: flex;
          align-items: center;
          gap: 8px;
          background: rgba(10, 15, 30, 0.5);
        }

        .platform-proof-tag {
          font-size: 0.62rem;
          font-weight: 700;
          padding: 2px 7px;
          border-radius: 5px;
          white-space: nowrap;
          flex-shrink: 0;
          text-transform: uppercase;
        }

        .platform-proof-label {
          font-size: 0.78rem;
          font-weight: 600;
          color: #e2e8f0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        /* Lightbox Modal */
        .results-lightbox-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 99999;
          padding: clamp(12px, 3vw, 24px);
          animation: resultsFadeIn 0.2s ease-out;
        }

        .results-lightbox-close {
          position: absolute;
          top: 16px;
          right: 16px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 100;
        }

        .results-lightbox-close:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .results-lightbox-container {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(8px, 2vw, 16px);
          width: 100%;
          max-width: 960px;
          animation: resultsScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .results-lightbox-nav {
          width: clamp(38px, 4.5vw, 48px);
          height: clamp(38px, 4.5vw, 48px);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .results-lightbox-nav:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .results-lightbox-frame {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: #000000;
          border: 2px solid;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
          max-width: 100%;
          display: flex;
          flex-direction: column;
        }

        .results-lightbox-img {
          width: 100%;
          max-height: 70vh;
          object-fit: contain;
          display: block;
        }

        .results-lightbox-caption {
          padding: 12px 18px;
          background: rgba(10, 15, 30, 0.95);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
        }

        .results-lightbox-badge {
          font-size: 0.72rem;
          font-weight: 700;
          padding: 3px 9px;
          border-radius: 5px;
          color: #ffffff;
        }

        .results-lightbox-title {
          font-size: 0.86rem;
          font-weight: 600;
          color: #f1f5f9;
          flex: 1;
        }

        .results-lightbox-counter {
          font-size: 0.75rem;
          color: #94a3b8;
          font-weight: 700;
        }

        /* Bottom CTA Banner */
        .results-cta-banner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 1200px;
          margin: clamp(36px, 5vw, 60px) auto 0;
          padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 40px);
          background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(249, 115, 22, 0.08) 100%);
          border: 1px solid rgba(99, 102, 241, 0.25);
          border-radius: 24px;
          position: relative;
          z-index: 1;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          gap: 24px;
          flex-wrap: wrap;
        }

        .results-cta-text h3 {
          font-size: clamp(1.2rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 6px;
        }

        .results-cta-text p {
          font-size: clamp(0.85rem, 1vw, 0.95rem);
          color: #cbd5e1;
        }

        .results-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 13px 28px;
          border-radius: 12px;
          font-size: 0.92rem;
          font-weight: 700;
          text-decoration: none;
          box-shadow: 0 4px 18px rgba(24, 119, 242, 0.4);
          transition: all 0.25s ease;
          white-space: nowrap;
        }

        .results-cta-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 26px rgba(24, 119, 242, 0.6);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .results-cases-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .platform-images-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 768px) {
          .results-stats-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          .results-cases-grid {
            grid-template-columns: 1fr;
          }

          .platform-images-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .platform-header {
            flex-direction: column;
            align-items: flex-start;
          }

          .platform-stats-chips {
            width: 100%;
          }

          .platform-chip {
            flex: 1 1 calc(33% - 6px);
          }

          .results-cta-banner {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
          }

          .results-cta-btn {
            justify-content: center;
          }
        }

        @media (max-width: 480px) {
          .results-section {
            padding: 40px 12px;
          }

          .results-stats-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .results-stat-card {
            padding: 10px 8px;
            border-radius: 12px;
          }

          .results-stat-num {
            font-size: 1.25rem;
          }

          .platform-images-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .platform-img-box {
            height: 125px;
          }

          .platform-proof-footer {
            padding: 8px 10px;
          }

          .platform-proof-label {
            font-size: 0.72rem;
          }

          .results-lightbox-container {
            flex-direction: column;
          }

          .results-lightbox-nav {
            display: none;
          }
        }

        @media (max-width: 360px) {
          .platform-images-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .results-section {
          background: #ffffff;
        }

        [data-theme="light"] .results-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .results-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .results-title {
          color: #0f172a;
        }

        [data-theme="light"] .results-subtitle {
          color: #475569;
        }

        [data-theme="light"] .results-stat-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .results-stat-num {
          color: #0f172a;
        }

        [data-theme="light"] .results-stat-lbl {
          color: #64748b;
        }

        /* Case Studies Cards in Results.jsx */
        [data-theme="light"] .results-cases-title {
          color: #0f172a;
        }

        [data-theme="light"] .results-case-card {
          background: #ffffff;
          border: 1.5px solid rgba(0, 0, 0, 0.09);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .results-case-card:hover {
          border-color: var(--case-color);
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .results-case-brand {
          color: #0f172a;
        }

        [data-theme="light"] .results-case-metric-lbl {
          color: #475569;
          font-weight: 800;
        }

        [data-theme="light"] .results-case-desc {
          color: #334155;
        }

        [data-theme="light"] .results-case-sub-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .results-case-sub-lbl {
          color: #64748b;
          font-weight: 700;
        }

        [data-theme="light"] .results-case-tag-pill {
          background: #f1f5f9;
          color: #334155;
          border: 1px solid rgba(0, 0, 0, 0.06);
          font-weight: 600;
        }

        /* Platform Headers & Proof Screenshots */
        [data-theme="light"] .platform-header {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .platform-title {
          color: #0f172a;
        }

        [data-theme="light"] .platform-desc {
          color: #475569;
        }

        [data-theme="light"] .platform-proof-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .platform-proof-footer {
          background: #f8fafc;
        }

        [data-theme="light"] .platform-proof-label {
          color: #1e293b;
        }

        [data-theme="light"] .results-cta-banner {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .results-cta-text h3 {
          color: #0f172a;
        }

        [data-theme="light"] .results-cta-text p {
          color: #475569;
        }

/* SOURCE: home.html */
/* ============================================================
           TEAM COMPONENT STYLES
           ============================================================ */

        @keyframes teamFadeIn {
          from {  transform: scale(0.96); }
          to { opacity: 1; transform: scale(1); }
        }

        @keyframes teamOverlayFade {
          from {  }
          to { opacity: 1; }
        }

        .team-section {
          position: relative;
          padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .team-watermark {
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 220px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .team-header {
          text-align: center;
          margin-bottom: clamp(32px, 5vw, 48px);
          position: relative;
          z-index: 1;
        }

        .team-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .team-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .team-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .team-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Filter Tabs */
        .team-filter-bar {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(28px, 4vw, 40px);
          position: relative;
          z-index: 1;
        }

        .team-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: clamp(0.76rem, 1vw, 0.85rem);
          font-weight: 600;
          padding: 8px 18px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.22s ease;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }

        .team-filter-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
          border-color: rgba(255, 255, 255, 0.25);
        }

        .team-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Unified Responsive Grid */
        .team-grid-wrap {
          position: relative;
          z-index: 1;
          max-width: 1360px;
          margin: 0 auto;
          width: 100%;
        }

        .team-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(14px, 2vw, 24px);
          width: 100%;
        }

        /* Team Card */
        .team-card {
          position: relative;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          padding: clamp(16px, 2.5vw, 24px) clamp(12px, 2vw, 18px);
          text-align: center;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow: hidden;
        }

        .team-card:hover {
          transform: translateY(-6px);
          border-color: var(--member-color);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(99, 102, 241, 0.15);
        }

        .team-card-top-accent {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, transparent, var(--member-color), transparent);
          .6;
          transition: opacity 0.25s;
        }

        .team-card:hover .team-card-top-accent {
          opacity: 1;
          height: 3px;
        }

        /* Avatar */
        .team-avatar-box {
          width: clamp(86px, 11vw, 120px);
          height: clamp(86px, 11vw, 120px);
          border-radius: 18px;
          overflow: hidden;
          margin-bottom: clamp(12px, 2vw, 16px);
          position: relative;
          background: rgba(255, 255, 255, 0.06);
          border: 2px solid rgba(255, 255, 255, 0.12);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
          transition: border-color 0.25s ease, transform 0.25s ease;
        }

        .team-card:hover .team-avatar-box {
          border-color: var(--member-color);
          transform: scale(1.03);
        }

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

        .team-card:hover .team-avatar-img {
          transform: scale(1.08);
        }

        .team-avatar-zoom-btn {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(3, 7, 18, 0.6);
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          
          transition: opacity 0.25s ease;
          color: #ffffff;
        }

        .team-card:hover .team-avatar-zoom-btn {
          opacity: 1;
        }

        .team-zoom-icon-pill {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: var(--member-color);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        /* Content */
        .team-member-name {
          font-size: clamp(0.95rem, 1.2vw, 1.15rem);
          font-weight: 800;
          color: #ffffff;
          margin-bottom: 4px;
          line-height: 1.2;
        }

        .team-member-role {
          font-size: clamp(0.68rem, 0.9vw, 0.78rem);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          color: var(--member-color);
          margin-bottom: 8px;
          line-height: 1.3;
        }

        .team-member-bio {
          font-size: clamp(0.75rem, 0.95vw, 0.82rem);
          color: #94a3b8;
          line-height: 1.5;
          margin-bottom: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .team-member-divider {
          width: 28px;
          height: 2px;
          border-radius: 2px;
          background: var(--member-color);
          .8;
          margin-top: auto;
        }

        /* Modal Styles */
        .team-modal-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.82);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 9999;
          padding: clamp(14px, 3vw, 24px);
          animation: teamOverlayFade 0.2s ease-out;
        }

        .team-modal-card {
          position: relative;
          background: #0d1322;
          border: 1px solid var(--modal-color);
          border-radius: 24px;
          overflow: hidden;
          width: 100%;
          max-width: 440px;
          max-height: 88vh;
          overflow-y: auto;
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(99, 102, 241, 0.2);
          animation: teamFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .team-modal-close {
          position: absolute;
          top: 14px;
          right: 14px;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: rgba(3, 7, 18, 0.75);
          border: 1px solid rgba(255, 255, 255, 0.15);
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          transition: all 0.2s ease;
        }

        .team-modal-close:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.08);
        }

        .team-modal-img-wrap {
          width: 100%;
          height: clamp(220px, 35vh, 290px);
          overflow: hidden;
          position: relative;
          background: #000000;
        }

        .team-modal-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .team-modal-img-gradient {
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, transparent 40%, #0d1322 100%);
        }

        .team-modal-info {
          padding: clamp(18px, 4vw, 24px);
        }

        .team-modal-name {
          font-size: clamp(1.3rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 4px;
          line-height: 1.15;
        }

        .team-modal-role {
          font-size: 0.85rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          color: var(--modal-color);
          display: flex;
          align-items: center;
          gap: 6px;
          margin-bottom: 14px;
        }

        .team-modal-bio {
          font-size: 0.9rem;
          color: #cbd5e1;
          line-height: 1.65;
          margin-bottom: 20px;
        }

        .team-modal-skills-title {
          font-size: 0.74rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #94a3b8;
          margin-bottom: 10px;
        }

        .team-modal-skills-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 22px;
        }

        .team-modal-skill-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #f1f5f9;
          font-size: 0.78rem;
          font-weight: 600;
          padding: 5px 12px;
          border-radius: 50px;
        }

        .team-modal-cta {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          width: 100%;
          padding: 12px 20px;
          border-radius: 12px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          text-decoration: none;
          font-size: 0.92rem;
          font-weight: 700;
          border: none;
          cursor: pointer;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.35);
          transition: all 0.2s ease;
        }

        .team-modal-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(24, 119, 242, 0.5);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .team-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
          }
        }

        @media (max-width: 768px) {
          .team-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
          }

          .team-filter-bar {
            gap: 6px;
          }

          .team-filter-btn {
            padding: 6px 14px;
            font-size: 0.76rem;
          }
        }

        @media (max-width: 480px) {
          .team-section {
            padding: 40px 12px;
          }

          .team-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          .team-card {
            padding: 14px 10px;
            border-radius: 16px;
          }

          .team-avatar-box {
            width: 76px;
            height: 76px;
            border-radius: 14px;
            margin-bottom: 10px;
          }

          .team-member-name {
            font-size: 0.88rem;
          }

          .team-member-role {
            font-size: 0.65rem;
            margin-bottom: 6px;
          }

          .team-member-bio {
            font-size: 0.72rem;
            line-height: 1.4;
            margin-bottom: 8px;
          }

          .team-modal-card {
            border-radius: 20px;
          }
        }

        @media (max-width: 360px) {
          .team-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .team-section {
          background: #f8fafc;
        }

        [data-theme="light"] .team-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .team-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .team-title {
          color: #0f172a;
        }

        [data-theme="light"] .team-subtitle {
          color: #475569;
        }

        [data-theme="light"] .team-filter-btn {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.08);
          color: #334155;
        }

        [data-theme="light"] .team-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .team-member-name {
          color: #0f172a;
        }

        [data-theme="light"] .team-member-bio {
          color: #64748b;
        }

        [data-theme="light"] .team-modal-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.1);
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
        }

        [data-theme="light"] .team-modal-name {
          color: #0f172a;
        }

        [data-theme="light"] .team-modal-bio {
          color: #475569;
        }

        [data-theme="light"] .team-modal-skill-pill {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #1e293b;
        }

/* SOURCE: home.html */
/* ============================================================
           REVIEWS COMPONENT STYLES
           ============================================================ */

        @keyframes reviewsFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes reviewsScaleIn {
          from {  transform: scale(0.92); }
          to { opacity: 1; transform: scale(1); }
        }

        .reviews-section {
          position: relative;
          padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .reviews-watermark {
          position: absolute;
          top: 25%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        /* Section Header */
        .reviews-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .reviews-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .reviews-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .reviews-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .reviews-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Trust Summary Bar */
        .reviews-trust-bar {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(8px, 1.5vw, 16px);
          max-width: 1000px;
          margin: 0 auto clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .reviews-trust-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          padding: clamp(12px, 2vw, 16px) clamp(10px, 1.5vw, 14px);
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .reviews-trust-card:hover {
          transform: translateY(-2px);
          border-color: rgba(99, 102, 241, 0.35);
        }

        .reviews-trust-num {
          font-size: clamp(1.2rem, 2vw, 1.6rem);
          font-weight: 900;
          color: #ffffff;
          display: flex;
          align-items: center;
          gap: 4px;
          line-height: 1;
          margin-bottom: 4px;
        }

        .reviews-trust-lbl {
          font-size: clamp(0.6rem, 0.8vw, 0.72rem);
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 0.6px;
        }

        /* Mobile View Mode Switcher */
        .reviews-view-toggle {
          display: none;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin-bottom: 20px;
          position: relative;
          z-index: 1;
        }

        .reviews-toggle-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #94a3b8;
          padding: 6px 14px;
          border-radius: 50px;
          font-size: 0.76rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .reviews-toggle-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
        }

        /* Reviews Grid */
        .reviews-grid-wrap {
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        .reviews-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: clamp(10px, 1.8vw, 20px);
        }

        .reviews-card {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.09);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
          cursor: pointer;
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
          display: flex;
          flex-direction: column;
        }

        .reviews-card:hover {
          transform: translateY(-5px) scale(1.02);
          border-color: rgba(99, 102, 241, 0.5);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(99, 102, 241, 0.2);
        }

        .reviews-img-container {
          position: relative;
          width: 100%;
          aspect-ratio: 3 / 4;
          overflow: hidden;
          background: #0d1322;
        }

        .reviews-card-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          transition: transform 0.4s ease;
        }

        .reviews-card:hover .reviews-card-img {
          transform: scale(1.06);
        }

        .reviews-overlay {
          position: absolute;
          inset: 0;
          background: rgba(3, 7, 18, 0.55);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          display: flex;
          align-items: center;
          justify-content: center;
          
          transition: opacity 0.25s ease;
        }

        .reviews-card:hover .reviews-overlay {
          opacity: 1;
        }

        .reviews-zoom-pill {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #1877f2;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
        }

        .reviews-card-footer {
          padding: 10px 12px;
          background: rgba(10, 15, 30, 0.7);
          border-top: 1px solid rgba(255, 255, 255, 0.06);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 6px;
        }

        .reviews-card-tag {
          font-size: 0.65rem;
          font-weight: 700;
          color: #818cf8;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .reviews-card-verified {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 0.62rem;
          font-weight: 700;
          color: #10b981;
        }

        /* Mobile Snap Slider */
        .reviews-mobile-slider {
          display: none;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
          gap: 12px;
          padding: 6px 0 16px;
          scrollbar-width: none;
        }

        .reviews-mobile-slider::-webkit-scrollbar {
          display: none;
        }

        .reviews-mobile-slide {
          flex: 0 0 calc(85vw - 20px);
          max-width: 320px;
          scroll-snap-align: center;
          border-radius: 18px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.1);
          cursor: pointer;
        }

        .reviews-mobile-slide-img {
          width: 100%;
          aspect-ratio: 3 / 4;
          object-fit: cover;
          object-position: center top;
          display: block;
        }

        .reviews-dots {
          display: none;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin-top: 14px;
        }

        .reviews-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2);
          border: none;
          padding: 0;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .reviews-dot.is-active {
          width: 22px;
          border-radius: 10px;
          background: #6366f1;
        }

        /* Lightbox Modal */
        .reviews-lightbox-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 99999;
          padding: clamp(12px, 3vw, 24px);
          animation: reviewsFadeIn 0.2s ease-out;
        }

        .reviews-lightbox-close {
          position: absolute;
          top: 16px;
          right: 16px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 100;
        }

        .reviews-lightbox-close:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .reviews-lightbox-content {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(8px, 2vw, 16px);
          width: 100%;
          max-width: 680px;
          animation: reviewsScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reviews-lightbox-nav {
          width: clamp(38px, 4.5vw, 48px);
          height: clamp(38px, 4.5vw, 48px);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .reviews-lightbox-nav:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .reviews-lightbox-frame {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: #000000;
          border: 2px solid rgba(99, 102, 241, 0.4);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
          max-width: 100%;
          display: flex;
          flex-direction: column;
        }

        .reviews-lightbox-img {
          width: 100%;
          max-height: 72vh;
          object-fit: contain;
          display: block;
        }

        .reviews-lightbox-caption {
          padding: 12px 18px;
          background: rgba(10, 15, 30, 0.95);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
        }

        .reviews-lightbox-info {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
        }

        .reviews-lightbox-badge {
          font-size: 0.7rem;
          font-weight: 700;
          padding: 3px 8px;
          border-radius: 5px;
          background: #1877f2;
          color: #ffffff;
        }

        .reviews-lightbox-title {
          font-size: 0.84rem;
          font-weight: 600;
          color: #f1f5f9;
        }

        .reviews-lightbox-counter {
          font-size: 0.75rem;
          color: #94a3b8;
          font-weight: 700;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1200px) {
          .reviews-grid {
            grid-template-columns: repeat(4, 1fr);
          }
        }

        @media (max-width: 900px) {
          .reviews-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 640px) {
          .reviews-trust-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .reviews-view-toggle {
            display: flex;
          }

          /* Grid View on Mobile */
          .reviews-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          /* If in carousel mode on mobile */
          .reviews-grid.mode-carousel {
            display: none;
          }

          .reviews-mobile-slider.mode-carousel {
            display: flex;
          }

          .reviews-dots.mode-carousel {
            display: flex;
          }
        }

        @media (max-width: 480px) {
          .reviews-section {
            padding: 40px 12px;
          }

          .reviews-grid {
            gap: 8px;
          }

          .reviews-card {
            border-radius: 14px;
          }

          .reviews-card-footer {
            padding: 6px 8px;
          }

          .reviews-card-tag {
            font-size: 0.58rem;
          }

          .reviews-card-verified {
            font-size: 0.56rem;
          }

          .reviews-lightbox-nav {
            display: none;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .reviews-section {
          background: #f8fafc;
        }

        [data-theme="light"] .reviews-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .reviews-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .reviews-title {
          color: #0f172a;
        }

        [data-theme="light"] .reviews-subtitle {
          color: #475569;
        }

        [data-theme="light"] .reviews-trust-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .reviews-trust-val {
          color: #0f172a;
        }

        [data-theme="light"] .reviews-trust-lbl {
          color: #64748b;
        }

        [data-theme="light"] .reviews-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .reviews-card-footer {
          background: #f8fafc;
        }

        [data-theme="light"] .reviews-card-name {
          color: #0f172a;
        }

/* SOURCE: home.html */
/* ============================================================
           CONTACT COMPONENT STYLES
           ============================================================ */

        @keyframes contactPulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.04); }
        }

        @keyframes contactCheckAnim {
          0% { transform: scale(0);  }
          60% { transform: scale(1.15); opacity: 1; }
          100% { transform: scale(1); opacity: 1; }
        }

        .contact-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .contact-watermark {
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .contact-orb-1 {
          position: absolute;
          width: clamp(300px, 40vw, 600px);
          height: clamp(300px, 40vw, 600px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
          filter: blur(90px);
          top: -100px;
          left: 5%;
          pointer-events: none;
        }

        .contact-orb-2 {
          position: absolute;
          width: clamp(280px, 35vw, 500px);
          height: clamp(280px, 35vw, 500px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: 5%;
          right: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .contact-header {
          text-align: center;
          margin-bottom: clamp(32px, 5vw, 56px);
          position: relative;
          z-index: 1;
        }

        .contact-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .contact-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .contact-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .contact-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* 2-Column Grid Layout */
        .contact-grid-wrap {
          display: grid;
          grid-template-columns: 1.1fr 1.3fr;
          gap: clamp(24px, 4vw, 44px);
          max-width: 1300px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Left Column: Direct Info */
        .contact-info-col {
          display: flex;
          flex-direction: column;
          gap: clamp(14px, 2vw, 20px);
        }

        .contact-info-card {
          display: flex;
          align-items: flex-start;
          gap: 16px;
          padding: clamp(16px, 2.5vw, 22px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          text-decoration: none;
          color: inherit;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
        }

        .contact-info-card:hover {
          transform: translateY(-3px);
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.4);
        }

        .contact-info-icon-box {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          background: rgba(99, 102, 241, 0.15);
          border: 1px solid rgba(99, 102, 241, 0.25);
          color: #a5b4fc;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .contact-info-text {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .contact-info-label {
          font-size: 0.72rem;
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
        }

        .contact-info-val {
          font-size: 0.94rem;
          color: #f1f5f9;
          font-weight: 600;
          line-height: 1.45;
        }

        /* WhatsApp Direct CTA Button */
        .contact-wa-banner {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          padding: clamp(14px, 2vw, 18px) 24px;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          color: #ffffff;
          border-radius: 16px;
          text-decoration: none;
          font-size: clamp(0.9rem, 1.2vw, 1rem);
          font-weight: 800;
          box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .contact-wa-banner:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55);
        }

        /* Interactive Map Frame with Location Pin Marker */
        .contact-map-frame {
          position: relative;
          width: 100%;
          height: clamp(230px, 26vw, 290px);
          border-radius: 18px;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.1);
          background: #090e1a;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .contact-map-iframe {
          width: 100%;
          height: 100%;
          border: none;
        }

        .contact-map-overlay-badge {
          position: absolute;
          bottom: 12px;
          left: 12px;
          right: 12px;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 12px;
          padding: 8px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
          z-index: 2;
        }

        .contact-map-badge-icon {
          width: 28px;
          height: 28px;
          border-radius: 8px;
          background: rgba(239, 68, 68, 0.2);
          color: #ef4444;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .contact-map-badge-text {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-width: 0;
        }

        .contact-map-badge-title {
          font-size: 0.82rem;
          font-weight: 800;
          color: #ffffff;
          line-height: 1.2;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .contact-map-badge-sub {
          font-size: 0.7rem;
          color: #94a3b8;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .contact-map-badge-link {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          background: rgba(99, 102, 241, 0.2);
          border: 1px solid rgba(99, 102, 241, 0.35);
          color: #818cf8;
          font-size: 0.72rem;
          font-weight: 700;
          padding: 5px 10px;
          border-radius: 8px;
          text-decoration: none;
          white-space: nowrap;
          flex-shrink: 0;
          transition: all 0.2s ease;
        }

        .contact-map-badge-link:hover {
          background: #6366f1;
          color: #ffffff;
          border-color: #6366f1;
        }

        /* Light Theme Map Badge Adaptations */
        [data-theme="light"] .contact-map-overlay-badge {
          background: rgba(255, 255, 255, 0.94);
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .contact-map-badge-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-map-badge-sub {
          color: #64748b;
        }

        [data-theme="light"] .contact-map-badge-link {
          background: #eef2ff;
          border-color: rgba(79, 70, 229, 0.25);
          color: #4f46e5;
        }

        [data-theme="light"] .contact-map-badge-link:hover {
          background: #4f46e5;
          color: #ffffff;
        }

        /* Right Column: Growth Consultation Form */
        .contact-form-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 24px;
          padding: clamp(24px, 4vw, 40px);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
          position: relative;
        }

        .contact-form-title {
          font-size: clamp(1.25rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 6px;
          letter-spacing: -0.02em;
        }

        .contact-form-sub {
          font-size: 0.86rem;
          color: #94a3b8;
          margin-bottom: 24px;
          line-height: 1.5;
        }

        /* Form Row & Groups */
        .contact-form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(12px, 2vw, 16px);
          margin-bottom: 16px;
        }

        .contact-form-group {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-bottom: 16px;
        }

        .contact-label {
          font-size: 0.78rem;
          font-weight: 700;
          color: #cbd5e1;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .contact-input,
        .contact-select,
        .contact-textarea {
          width: 100%;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 12px;
          padding: 12px 16px;
          color: #ffffff;
          font-size: 0.92rem;
          font-family: inherit;
          transition: all 0.2s ease;
          box-sizing: border-box;
        }

        .contact-input:focus,
        .contact-select:focus,
        .contact-textarea:focus {
          outline: none;
          background: rgba(255, 255, 255, 0.08);
          border-color: #6366f1;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
        }

        .contact-select {
          cursor: pointer;
        }

        .contact-select option {
          background: #0d1322;
          color: #ffffff;
        }

        .contact-textarea {
          resize: vertical;
          min-height: 95px;
        }

        /* Submit Button */
        .contact-submit-btn {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 14px 28px;
          border-radius: 12px;
          border: none;
          font-size: 0.95rem;
          font-weight: 800;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
          margin-top: 8px;
        }

        .contact-submit-btn:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 10px 28px rgba(24, 119, 242, 0.6);
        }

        .contact-submit-btn:disabled {
          .6;
          cursor: not-allowed;
        }

        .contact-privacy-note {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          font-size: 0.76rem;
          color: #64748b;
          margin-top: 14px;
          text-align: center;
        }

        .contact-error-msg {
          color: #f87171;
          font-size: 0.84rem;
          font-weight: 600;
          margin-bottom: 12px;
          text-align: center;
        }

        /* Success Card View */
        .contact-success-wrap {
          text-align: center;
          padding: clamp(16px, 3vw, 24px) 0;
        }

        .contact-success-icon-box {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          background: rgba(16, 185, 129, 0.15);
          border: 2px solid #10b981;
          color: #10b981;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20px;
          animation: contactCheckAnim 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .contact-success-h3 {
          font-size: clamp(1.3rem, 2.5vw, 1.7rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 10px;
        }

        .contact-success-desc {
          font-size: 0.92rem;
          color: #cbd5e1;
          line-height: 1.6;
          margin-bottom: 24px;
        }

        .contact-steps-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 24px;
          text-align: left;
        }

        .contact-step-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 14px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 12px;
          font-size: 0.86rem;
          color: #e2e8f0;
        }

        .contact-step-badge {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #1877f2;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
          font-size: 0.75rem;
          flex-shrink: 0;
        }

        .contact-success-wa-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          color: #ffffff;
          padding: 12px 24px;
          border-radius: 12px;
          text-decoration: none;
          font-weight: 700;
          font-size: 0.9rem;
          box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .contact-grid-wrap {
            grid-template-columns: 1fr;
            gap: 32px;
          }

          .contact-info-col {
            order: 2;
          }

          .contact-form-card {
            order: 1;
          }
        }

        @media (max-width: 640px) {
          .contact-section {
            padding: 40px 14px;
          }

          .contact-form-card {
            padding: 20px 16px;
            border-radius: 18px;
          }

          .contact-form-row {
            grid-template-columns: 1fr;
            gap: 0;
            margin-bottom: 0;
          }

          .contact-info-card {
            padding: 14px;
            gap: 12px;
          }

          .contact-info-icon-box {
            width: 38px;
            height: 38px;
          }

          .contact-info-val {
            font-size: 0.88rem;
          }

          .contact-map-frame {
            height: 220px;
          }
        }

        @media (max-width: 400px) {
          .contact-form-card {
            padding: 18px 12px;
          }

          .contact-input,
          .contact-select,
          .contact-textarea {
            padding: 10px 12px;
            font-size: 0.88rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .contact-section {
          background: #ffffff;
        }

        [data-theme="light"] .contact-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .contact-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .contact-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-subtitle {
          color: #475569;
        }

        [data-theme="light"] .contact-info-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .contact-info-label {
          color: #64748b;
        }

        [data-theme="light"] .contact-info-val {
          color: #0f172a;
        }

        [data-theme="light"] .contact-map-frame {
          border-color: rgba(0, 0, 0, 0.08);
          background: #f8fafc;
        }

        [data-theme="light"] .contact-form-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .contact-form-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-form-sub {
          color: #475569;
        }

        [data-theme="light"] .contact-label {
          color: #0f172a;
          font-weight: 700;
        }

        [data-theme="light"] .contact-input,
        [data-theme="light"] .contact-select,
        [data-theme="light"] .contact-textarea {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.16);
          color: #0f172a;
        }

        [data-theme="light"] .contact-input::placeholder,
        [data-theme="light"] .contact-textarea::placeholder {
          color: #94a3b8;
        }

        [data-theme="light"] .contact-select option {
          background: #ffffff;
          color: #0f172a;
        }

        [data-theme="light"] .contact-input:focus,
        [data-theme="light"] .contact-select:focus,
        [data-theme="light"] .contact-textarea:focus {
          border-color: #6366f1;
          background: #ffffff;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
        }

/* SOURCE: home.html */
/* ============================================================
           MODERN ULTRA-PREMIUM FOOTER STYLING
           ============================================================ */

        @keyframes waFloatPulse {
          0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
          50% { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 36px rgba(37, 211, 102, 0.65); }
        }

        @keyframes statusGlow {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { .5; transform: scale(1.25); }
        }

        @keyframes beamGlow {
          0%, 100% { .6; }
          50% { opacity: 1; }
        }

        .footer-root {
          position: relative;
          background: #030712;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          color: #f8fafc;
          width: 100%;
          overflow: hidden;
          font-family: inherit;
        }

        /* Top Ambient Glow Mesh */
        .footer-ambient-mesh {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          max-width: 1200px;
          height: 240px;
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.15) 0%, rgba(249, 115, 22, 0.06) 60%, transparent 100%);
          pointer-events: none;
          z-index: 0;
        }

        .footer-top-accent-line {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.6) 30%, rgba(249, 115, 22, 0.6) 70%, transparent 100%);
          animation: beamGlow 4s ease-in-out infinite;
        }

        .footer-main-wrap {
          position: relative;
          z-index: 1;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(48px, 6vw, 76px) clamp(16px, 4vw, 48px) clamp(24px, 3.5vw, 40px);
        }

        /* ── Main Footer Columns Grid ── */
        .footer-grid {
          display: grid;
          grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
          gap: clamp(28px, 4vw, 56px);
        }

        /* Column 1: Brand */
        .footer-brand-col {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .footer-brand-link {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          color: #ffffff;
          width: fit-content;
        }

        .footer-logo-box {
          width: 48px;
          height: 48px;
          border-radius: 14px;
          overflow: hidden;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
          border: 1.5px solid rgba(255, 255, 255, 0.15);
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .footer-brand-link:hover .footer-logo-box {
          transform: scale(1.08) rotate(3deg);
        }

        .footer-logo-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          padding: 3px;
        }

        .footer-brand-title {
          display: flex;
          flex-direction: column;
        }

        .footer-brand-name {
          font-size: 1.3rem;
          font-weight: 900;
          letter-spacing: -0.02em;
          background: linear-gradient(135deg, #ffffff 40%, #c7d2fe 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1.1;
        }

        .footer-brand-badge {
          font-size: 0.62rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1.2px;
          color: #818cf8;
        }

        .footer-tagline {
          font-size: clamp(0.88rem, 1.05vw, 0.94rem);
          font-weight: 500;
          line-height: 1.6;
          color: #94a3b8;
          margin: 0;
        }

        .footer-tagline-highlight {
          color: #f1f5f9;
          font-weight: 700;
        }

        /* Live Status Pill */
        .footer-status-pill {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 14px;
          background: rgba(16, 185, 129, 0.08);
          border: 1px solid rgba(16, 185, 129, 0.25);
          border-radius: 9999px;
          font-size: 0.76rem;
          font-weight: 700;
          color: #34d399;
          width: fit-content;
        }

        .footer-status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 10px #10b981;
          animation: statusGlow 2s infinite ease-in-out;
        }

        /* Social Icons */
        .footer-socials {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
          margin-top: 2px;
        }

        .footer-social-icon {
          width: 38px;
          height: 38px;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.09);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #cbd5e1;
          text-decoration: none;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer-social-icon:hover {
          transform: translateY(-3px) scale(1.08);
          background: var(--social-bg, rgba(99, 102, 241, 0.2));
          border-color: var(--social-color, #6366f1);
          color: var(--social-color, #ffffff);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
        }

        /* Nav Columns */
        .footer-nav-col {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .footer-col-title {
          font-size: 0.88rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #ffffff;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .footer-col-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #6366f1;
        }

        .footer-nav-link {
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          width: fit-content;
          gap: 8px;
          padding: 3px 0;
        }

        .footer-nav-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-service-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          padding: 3px 0;
        }

        .footer-service-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-nav-tag {
          font-size: 0.62rem;
          font-weight: 800;
          padding: 2px 7px;
          border-radius: 50px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .footer-nav-tag.hot {
          background: rgba(249, 115, 22, 0.15);
          color: #fb923c;
          border: 1px solid rgba(249, 115, 22, 0.3);
        }

        .footer-nav-tag.pro {
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .footer-nav-tag.lead {
          background: rgba(16, 185, 129, 0.15);
          color: #34d399;
          border: 1px solid rgba(16, 185, 129, 0.3);
        }

        /* Contact Items */
        .footer-contact-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .footer-contact-card {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 10px 12px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 12px;
          text-decoration: none;
          color: #cbd5e1;
          transition: all 0.2s ease;
        }

        .footer-contact-card:hover {
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.35);
          color: #ffffff;
          transform: translateY(-2px);
        }

        .footer-contact-icon-box {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-top: 1px;
        }

        .footer-contact-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .footer-contact-label {
          font-size: 0.68rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: #64748b;
        }

        .footer-contact-val {
          font-size: 0.84rem;
          font-weight: 600;
          line-height: 1.4;
          color: #f1f5f9;
        }

        /* ── Divider ── */
        .footer-divider {
          height: 1px;
          width: 100%;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.3) 50%, transparent 100%);
          margin: clamp(36px, 4vw, 48px) 0 clamp(20px, 3vw, 28px);
        }

        /* ── Bottom Bar ── */
        .footer-bottom-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          flex-wrap: wrap;
        }

        .footer-copy-text {
          font-size: 0.82rem;
          color: #64748b;
          margin: 0;
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .footer-legal-links {
          display: flex;
          align-items: center;
          gap: clamp(14px, 2vw, 24px);
          flex-wrap: wrap;
        }

        .footer-legal-btn {
          background: none;
          border: none;
          color: #64748b;
          font-size: 0.8rem;
          cursor: pointer;
          transition: color 0.2s ease;
          padding: 2px 0;
          font-family: inherit;
          position: relative;
        }

        .footer-legal-btn:hover {
          color: #cbd5e1;
        }

        .footer-back-to-top {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          position: relative;
          z-index: 10;
          transition: all 0.2s ease;
          font-family: inherit;
          outline: none;
          user-select: none;
        }

        .footer-back-to-top:hover {
          background: rgba(99, 102, 241, 0.2);
          border-color: rgba(99, 102, 241, 0.4);
          color: #ffffff;
          transform: translateY(-2px);
        }

        /* ── Floating WhatsApp Widget ── */
        .footer-wa-float {
          position: fixed;
          bottom: calc(20px + env(safe-area-inset-bottom, 0px));
          right: 20px;
          width: 54px;
          height: 54px;
          border-radius: 50%;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          z-index: 999;
          cursor: pointer;
          text-decoration: none;
          box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
          animation: waFloatPulse 2.5s ease-in-out infinite;
          transition: transform 0.25s ease;
        }

        .footer-wa-float:hover {
          transform: scale(1.12) !important;
        }

        /* ============================================================
           LIGHT THEME ADAPTATIONS
           ============================================================ */
        [data-theme="light"] .footer-root {
          background: #ffffff;
          border-top-color: rgba(0, 0, 0, 0.08);
          color: #0f172a;
        }

        [data-theme="light"] .footer-ambient-mesh {
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.1) 0%, rgba(249, 115, 22, 0.04) 60%, transparent 100%);
        }

        [data-theme="light"] .footer-brand-name {
          background: linear-gradient(135deg, #0f172a 40%, #4338ca 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        [data-theme="light"] .footer-tagline {
          color: #64748b;
        }

        [data-theme="light"] .footer-tagline-highlight {
          color: #0f172a;
        }

        [data-theme="light"] .footer-social-icon {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-social-icon:hover {
          background: var(--social-bg, #eef2ff);
          border-color: var(--social-color, #4f46e5);
          color: var(--social-color, #4f46e5);
        }

        [data-theme="light"] .footer-col-title {
          color: #0f172a;
        }

        [data-theme="light"] .footer-nav-link,
        [data-theme="light"] .footer-service-link {
          color: #64748b;
        }

        [data-theme="light"] .footer-nav-link:hover,
        [data-theme="light"] .footer-service-link:hover {
          color: #4f46e5;
        }

        [data-theme="light"] .footer-contact-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
          color: #334155;
        }

        [data-theme="light"] .footer-contact-card:hover {
          background: #f1f5f9;
          border-color: rgba(79, 70, 229, 0.3);
          color: #0f172a;
        }

        [data-theme="light"] .footer-contact-val {
          color: #0f172a;
        }

        [data-theme="light"] .footer-divider {
          background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, 0.2) 50%, transparent 100%);
        }

        [data-theme="light"] .footer-copy-text,
        [data-theme="light"] .footer-legal-btn {
          color: #64748b;
        }

        [data-theme="light"] .footer-legal-btn:hover {
          color: #0f172a;
        }

        [data-theme="light"] .footer-back-to-top {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-back-to-top:hover {
          background: #eef2ff;
          border-color: rgba(79, 70, 229, 0.3);
          color: #4f46e5;
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS
           ============================================================ */
        @media (max-width: 1100px) {
          .footer-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
          }
        }

        @media (max-width: 600px) {
          .footer-grid {
            grid-template-columns: 1fr;
            gap: 32px;
          }

          .footer-bottom-bar {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 16px;
          }

          .footer-legal-links {
            justify-content: center;
            gap: 14px;
          }

          .footer-wa-float {
            width: 48px;
            height: 48px;
            bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            right: 16px;
          }
        }

/* SOURCE: reviews.html */
/* ============================================================
           HERO SECTION COMPONENT STYLES
           ============================================================ */

        @keyframes hoSpin {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes hoCounter {
          from { transform: rotate(0deg); }
          to { transform: rotate(-360deg); }
        }

        @keyframes hoSpinRev {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }

        @keyframes centerPulseRing {
          0%, 100% { transform: translate(-50%, -50%) scale(1); .25; }
          50% { transform: translate(-50%, -50%) scale(1.15); .7; }
        }

        @keyframes photonOrbit {
          from { transform: rotate(0deg); }
          to { transform: rotate(360deg); }
        }

        @keyframes photonOrbitRev {
          from { transform: rotate(360deg); }
          to { transform: rotate(0deg); }
        }

        @keyframes iconPing {
          0% { transform: scale(1); .8; }
          100% { transform: scale(1.6);  }
        }

        @keyframes clientsScroll {
          0% { transform: translate3d(0, 0, 0); }
          100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes clientsScrollRev {
          0% { transform: translate3d(-50%, 0, 0); }
          100% { transform: translate3d(0, 0, 0); }
        }

        @keyframes cursorBlink {
          0%, 100% { opacity: 1; }
          50% {  }
        }

        @keyframes floatAmbient {
          0%, 100% { transform: translate(0, 0); }
          50% { transform: translate(15px, -20px); }
        }

        .hero-section {
          position: relative;
          min-height: 100vh;
          width: 100%;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          justify-content: center;
          background: linear-gradient(135deg, #030712 0%, #0a0f1e 50%, #0f1629 100%);
          isolation: isolate;
          contain: paint;
        }

        /* Ambient Glow & Grid Layer */
        .hero-bg-layer {
          position: absolute;
          inset: 0;
          overflow: hidden;
          pointer-events: none;
          z-index: 0;
        }

        .hero-grid-overlay {
          position: absolute;
          inset: 0;
          background-image: 
            linear-gradient(rgba(99,102,241,0.06) 1px, transparent 1px),
            linear-gradient(90deg, rgba(99,102,241,0.06) 1px, transparent 1px);
          background-size: clamp(40px, 6vw, 64px) clamp(40px, 6vw, 64px);
          mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
          -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black 40%, transparent 100%);
        }

        .hero-glow-blob-1 {
          position: absolute;
          width: clamp(300px, 50vw, 750px);
          height: clamp(300px, 50vw, 750px);
          background: radial-gradient(circle, rgba(99,102,241,0.22), transparent 68%);
          border-radius: 50%;
          filter: blur(80px);
          top: -150px;
          left: -100px;
          animation: floatAmbient 12s ease-in-out infinite;
        }

        .hero-glow-blob-2 {
          position: absolute;
          width: clamp(280px, 45vw, 650px);
          height: clamp(280px, 45vw, 650px);
          background: radial-gradient(circle, rgba(249,115,22,0.16), transparent 68%);
          border-radius: 50%;
          filter: blur(80px);
          bottom: -150px;
          right: -80px;
          animation: floatAmbient 14s ease-in-out infinite reverse;
        }

        .hero-watermark {
          position: absolute;
          top: 40%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-size: clamp(64px, 16vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(99,102,241,0.04);
          letter-spacing: clamp(8px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        /* Hero Main Layout */
        .hero-main-wrapper {
          position: relative;
          z-index: 2;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(36px, 6vw, 64px) clamp(16px, 4vw, 48px) clamp(40px, 6vw, 60px);
        }

        .hero-grid {
          display: grid;
          grid-template-columns: 1.15fr 0.95fr;
          align-items: center;
          gap: clamp(32px, 5vw, 64px);
          width: 100%;
        }

        .hero-text-col {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          text-align: left;
          width: 100%;
          max-width: 620px;
        }

        /* Top Announcement Badge */
        .hero-badge {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: rgba(99,102,241,0.12);
          border: 1px solid rgba(99,102,241,0.3);
          color: #c7d2fe;
          font-size: clamp(0.7rem, 1vw, 0.78rem);
          font-weight: 700;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          padding: clamp(6px, 1.2vw, 9px) clamp(14px, 2vw, 20px);
          border-radius: 50px;
          margin-bottom: clamp(18px, 3vw, 26px);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 4px 20px rgba(99,102,241,0.18);
          max-width: 100%;
          word-break: break-word;
        }

        .hero-badge-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 10px #10b981;
          flex-shrink: 0;
        }

        /* Hero Headline */
        .hero-headline {
          font-size: clamp(2.35rem, 5.2vw + 0.5rem, 5.4rem);
          font-weight: 900;
          line-height: 1.05;
          color: #ffffff;
          margin-bottom: clamp(14px, 2.5vw, 20px);
          letter-spacing: -0.035em;
          text-shadow: 0 4px 30px rgba(0,0,0,0.5);
          word-break: break-word;
        }

        .hero-headline-accent {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          display: inline-block;
        }

        .hero-cursor {
          color: #ff6b00;
          font-weight: 300;
          display: inline-block;
          margin-left: 2px;
          animation: cursorBlink 0.9s infinite;
        }

        .hero-headline-bar {
          width: clamp(70px, 12vw, 110px);
          height: 4px;
          background: linear-gradient(90deg, #ff6b00, rgba(255,107,0,0.1));
          border-radius: 4px;
          margin-bottom: clamp(16px, 2.5vw, 24px);
        }

        /* Hero Description */
        .hero-desc {
          color: #cbd5e1;
          font-size: clamp(0.95rem, 1.1vw + 0.4rem, 1.1rem);
          line-height: 1.8;
          max-width: 520px;
          margin-bottom: clamp(24px, 3.5vw, 32px);
          font-weight: 400;
        }

        .hero-desc strong {
          color: #ffffff;
          font-weight: 700;
        }

        /* CTA Buttons */
        .hero-cta-group {
          display: flex;
          align-items: center;
          gap: 14px;
          flex-wrap: wrap;
          width: 100%;
          margin-bottom: clamp(24px, 4vw, 34px);
        }

        .hero-btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border: none;
          padding: 13px 28px;
          border-radius: 12px;
          font-size: clamp(0.9rem, 1vw, 1rem);
          font-weight: 700;
          cursor: pointer;
          box-shadow: 0 4px 20px rgba(24,119,242,0.4), inset 0 1px 0 rgba(255,255,255,0.25);
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
          text-decoration: none;
        }

        .hero-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 10px 30px rgba(24,119,242,0.6);
        }

        .hero-btn-primary:active {
          transform: translateY(0);
        }

        .hero-btn-secondary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: rgba(255,255,255,0.06);
          color: #f8fafc;
          border: 1.5px solid rgba(255,255,255,0.22);
          padding: 13px 26px;
          border-radius: 12px;
          font-size: clamp(0.9rem, 1vw, 1rem);
          font-weight: 600;
          cursor: pointer;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .hero-btn-secondary:hover {
          background: rgba(255,255,255,0.12);
          border-color: rgba(255,255,255,0.45);
          color: #ffffff;
          transform: translateY(-2px);
          box-shadow: 0 6px 20px rgba(0,0,0,0.3);
        }

        /* Stats Grid */
        .hero-stats-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(8px, 1.5vw, 12px);
          width: 100%;
        }

        .hero-stat-card {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          padding: clamp(10px, 1.5vw, 14px) clamp(10px, 1.5vw, 16px);
          border-radius: 14px;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          transition: all 0.25s ease;
          position: relative;
          overflow: hidden;
        }

        .hero-stat-card:hover {
          transform: translateY(-3px);
          box-shadow: 0 10px 24px rgba(0,0,0,0.35);
        }

        .hero-stat-num {
          font-size: clamp(1.25rem, 2vw + 0.3rem, 1.7rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1.1;
          margin-bottom: 4px;
        }

        .hero-stat-label {
          font-size: clamp(0.58rem, 0.7vw + 0.2rem, 0.68rem);
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          line-height: 1.25;
        }

        /* Hero Orbit Showcase */
        .hero-orbit-col {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 100%;
          position: relative;
        }

        .hero-orbit-container {
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          width: 100%;
          position: relative;
        }

        .hero-orbit-box {
          position: relative;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto;
          user-select: none;
          flex-shrink: 0;
        }

        /* Ambient background glow */
        .hero-orbit-ambient-aura {
          position: absolute;
          inset: 6%;
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.18) 0%, rgba(249, 115, 22, 0.08) 45%, transparent 72%);
          filter: blur(40px);
          pointer-events: none;
          z-index: 0;
        }

        /* Concentric Track Rings */
        .hero-orbit-track {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          pointer-events: none;
          z-index: 1;
        }

        /* Outer Celestial Ring */
        .hero-orbit-track-outer {
          border: 1px dashed rgba(99, 102, 241, 0.22);
          box-shadow: inset 0 0 20px rgba(99, 102, 241, 0.05);
        }

        /* Middle Primary Track - where the 6 planets travel */
        .hero-orbit-track-main {
          border: 1.5px solid rgba(255, 255, 255, 0.12);
          box-shadow: 
            0 0 16px rgba(99, 102, 241, 0.15),
            inset 0 0 16px rgba(99, 102, 241, 0.1);
        }

        .hero-orbit-track-glow {
          position: absolute;
          inset: -1px;
          border-radius: 50%;
          border: 1.5px solid transparent;
          background: linear-gradient(135deg, rgba(99,102,241,0.25), rgba(249,115,22,0.25)) border-box;
          -webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0);
          -webkit-mask-composite: xor;
          mask-composite: exclude;
          .6;
        }

        /* Inner Celestial Ring */
        .hero-orbit-track-inner {
          border: 1px dashed rgba(249, 115, 22, 0.22);
          animation: hoSpinRev 38s linear infinite;
        }

        /* Orbiting Photons / Particles */
        .hero-orbit-photon-wrap {
          position: absolute;
          inset: 0;
          border-radius: 50%;
        }

        .outer-photon-wrap {
          animation: photonOrbit 32s linear infinite;
        }

        .inner-photon-wrap-1 {
          animation: photonOrbitRev 24s linear infinite;
        }

        .inner-photon-wrap-2 {
          animation: photonOrbit 18s linear infinite;
        }

        .hero-orbit-photon {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translate(-50%, -50%);
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: #60a5fa;
          box-shadow: 0 0 12px 3px #60a5fa, 0 0 20px #3b82f6;
        }

        .hero-orbit-photon.inner-photon {
          background: #fb923c;
          box-shadow: 0 0 10px 2px #fb923c, 0 0 18px #ea580c;
          width: 6px;
          height: 6px;
        }

        .hero-orbit-photon.inner-photon.alt {
          top: auto;
          bottom: 0;
          background: #a855f7;
          box-shadow: 0 0 10px 2px #a855f7;
          width: 5px;
          height: 5px;
        }

        /* Rotator */
        .hero-orbit-rotator {
          position: absolute;
          inset: 0;
          animation: hoSpin 28s linear infinite;
          z-index: 5;
        }

        .hero-orbit-rotator.is-paused {
          animation-play-state: paused;
        }

        /* Orbit Node (Planet) Anchor */
        .hero-orbit-node {
          position: absolute;
          transform: translate(-50%, -50%);
          cursor: pointer;
          outline: none;
          z-index: 10;
          transition: z-index 0.2s ease;
        }

        .hero-orbit-node.is-node-hovered {
          z-index: 30;
        }

        /* Counter-rotating container keeps content upright around exact anchor */
        .hero-orbit-node-inner {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          animation: hoCounter 28s linear infinite;
          transform-origin: center center;
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .hero-orbit-node-inner.is-paused {
          animation-play-state: paused;
        }

        .hero-orbit-node:hover .hero-orbit-node-inner,
        .hero-orbit-node:focus-visible .hero-orbit-node-inner {
          transform: scale(1.18);
        }

        /* Icon Sphere */
        .hero-orbit-icon {
          position: relative;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          background: linear-gradient(135deg, rgba(15, 23, 42, 0.95) 0%, rgba(3, 7, 18, 0.98) 100%);
          border: 2px solid var(--service-color);
          box-shadow: 
            0 0 18px rgba(0, 0, 0, 0.8),
            0 0 16px var(--service-color),
            inset 0 1px 2px rgba(255, 255, 255, 0.3);
          transition: all 0.3s ease;
          overflow: visible;
        }

        .hero-orbit-node:hover .hero-orbit-icon {
          box-shadow: 
            0 0 30px var(--service-color),
            0 8px 24px rgba(0, 0, 0, 0.9),
            inset 0 1px 4px rgba(255, 255, 255, 0.5);
          border-color: #ffffff;
        }

        .hero-orbit-icon-img {
          object-fit: contain;
          border-radius: 8px;
          z-index: 2;
          transition: transform 0.3s ease;
        }

        .hero-orbit-node:hover .hero-orbit-icon-img {
          transform: scale(1.08);
        }

        .hero-orbit-icon-glow {
          position: absolute;
          inset: -4px;
          border-radius: 50%;
          .3;
          filter: blur(8px);
          transition: opacity 0.3s ease;
          z-index: 1;
        }

        .hero-orbit-node:hover .hero-orbit-icon-glow {
          .85;
          filter: blur(12px);
        }

        .hero-orbit-icon-ping {
          position: absolute;
          inset: -2px;
          border-radius: 50%;
          border: 1.5px solid var(--service-color);
          animation: iconPing 2.8s cubic-bezier(0, 0, 0.2, 1) infinite;
          pointer-events: none;
          
        }

        .hero-orbit-node:hover .hero-orbit-icon-ping {
          opacity: 1;
        }

        /* Label Pill */
        .hero-orbit-node-label {
          font-size: clamp(0.58rem, 0.8vw, 0.72rem);
          font-weight: 800;
          text-align: center;
          white-space: nowrap;
          background: rgba(3, 7, 18, 0.92);
          padding: 3px 9px;
          border-radius: 20px;
          color: #f1f5f9;
          border: 1px solid rgba(255, 255, 255, 0.16);
          border-left: 2.5px solid var(--service-color);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.6);
          pointer-events: none;
          transition: all 0.25s ease;
        }

        .hero-orbit-node:hover .hero-orbit-node-label {
          background: rgba(15, 23, 42, 0.98);
          color: #ffffff;
          border-color: var(--service-color);
          box-shadow: 0 4px 18px rgba(0, 0, 0, 0.8), 0 0 10px var(--service-color);
        }

        /* Center Hub (Sun Core) */
        .hero-orbit-center {
          position: absolute;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 8;
        }

        .hero-orbit-center-core {
          position: relative;
          width: 100%;
          height: 100%;
          border-radius: 50%;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 
            0 0 0 3px rgba(255, 255, 255, 0.85),
            0 0 30px rgba(99, 102, 241, 0.5),
            0 0 60px rgba(249, 115, 22, 0.25),
            0 14px 40px rgba(0, 0, 0, 0.5);
          overflow: hidden;
          z-index: 2;
        }

        .hero-orbit-center-img {
          width: 86%;
          height: 86%;
          object-fit: contain;
          border-radius: 50%;
        }

        .hero-orbit-center-overlay {
          position: absolute;
          bottom: 4px;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .hero-orbit-center-badge {
          font-size: 0.52rem;
          font-weight: 900;
          letter-spacing: 0.8px;
          text-transform: uppercase;
          background: linear-gradient(135deg, #6366f1, #f97316);
          color: #ffffff;
          padding: 1px 6px;
          border-radius: 10px;
          box-shadow: 0 2px 8px rgba(0,0,0,0.4);
        }

        /* Pulse Rings */
        .hero-orbit-pulse-ring {
          position: absolute;
          top: 50%;
          left: 50%;
          border-radius: 50%;
          pointer-events: none;
        }

        .hero-orbit-pulse-ring.ring-1 {
          width: 125%;
          height: 125%;
          border: 1.5px solid rgba(99, 102, 241, 0.35);
          animation: centerPulseRing 3.2s ease-in-out infinite;
        }

        .hero-orbit-pulse-ring.ring-2 {
          width: 155%;
          height: 155%;
          border: 1px dashed rgba(249, 115, 22, 0.3);
          animation: centerPulseRing 3.2s ease-in-out infinite 1.1s;
        }

        .hero-orbit-pulse-ring.ring-3 {
          width: 190%;
          height: 190%;
          border: 1px solid rgba(99, 102, 241, 0.15);
          animation: centerPulseRing 3.2s ease-in-out infinite 2.2s;
        }



        /* Quick Service Chips for Small Devices */
        .hero-orbit-chips {
          display: none;
          flex-direction: column;
          align-items: center;
          width: 100%;
          margin-top: 20px;
        }

        .hero-orbit-chips-title {
          font-size: 0.72rem;
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 1.5px;
          margin-bottom: 10px;
        }

        .hero-orbit-chips-list {
          display: flex;
          flex-wrap: wrap;
          justify-content: center;
          gap: 8px;
          width: 100%;
        }

        .hero-orbit-chip {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(255,255,255,0.05);
          border: 1px solid rgba(255,255,255,0.12);
          border-left: 3px solid var(--chip-color);
          border-radius: 20px;
          padding: 6px 14px;
          color: #f1f5f9;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          transition: all 0.2s ease;
        }

        .hero-orbit-chip:hover,
        .hero-orbit-chip:active {
          background: rgba(255,255,255,0.12);
          transform: translateY(-1px);
        }

        .hero-orbit-chip-icon {
          width: 18px;
          height: 18px;
          object-fit: contain;
          border-radius: 4px;
        }

        .hero-orbit-chip-arrow {
          color: #94a3b8;
        }





        /* Modal Styles */
        .service-modal-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.78);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          z-index: 9999;
          display: flex;
          align-items: center;
          justify-content: center;
          padding: clamp(12px, 3vw, 24px);
          animation: fadeIn 0.2s ease-out;
        }

        @keyframes fadeIn {
          from {  }
          to { opacity: 1; }
        }

        .service-modal-card {
          width: 100%;
          max-width: 500px;
          max-height: 88vh;
          border-radius: 24px;
          overflow-y: auto;
          box-shadow: 0 24px 70px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
          background: #ffffff;
          position: relative;
        }

        .service-modal-close {
          position: absolute;
          top: 14px;
          right: 14px;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.3);
          border: none;
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          transition: background 0.2s, transform 0.2s;
        }

        .service-modal-close:hover {
          background: rgba(0, 0, 0, 0.55);
          transform: scale(1.08);
        }

        .service-modal-header {
          padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 28px);
          display: flex;
          align-items: center;
          gap: 16px;
          position: relative;
        }

        .service-modal-icon-wrap {
          width: 54px;
          height: 54px;
          border-radius: 16px;
          background: rgba(255,255,255,0.22);
          backdrop-filter: blur(8px);
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 4px 16px rgba(0,0,0,0.15);
        }

        .service-modal-icon-wrap img {
          width: 38px;
          height: 38px;
          object-fit: contain;
          border-radius: 8px;
        }

        .service-modal-title-wrap {
          flex: 1;
          min-width: 0;
          padding-right: 28px;
        }

        .service-modal-title {
          font-size: clamp(1.25rem, 2vw, 1.45rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.02em;
          line-height: 1.2;
        }

        .service-modal-tagline {
          font-size: 0.82rem;
          color: rgba(255,255,255,0.88);
          margin-top: 3px;
          line-height: 1.35;
        }

        .service-modal-badge {
          position: absolute;
          top: 14px;
          right: 54px;
          background: rgba(255,255,255,0.25);
          border: 1px solid rgba(255,255,255,0.4);
          color: #ffffff;
          font-size: 0.65rem;
          font-weight: 800;
          padding: 3px 10px;
          border-radius: 50px;
          letter-spacing: 0.4px;
        }

        .service-modal-body {
          padding: clamp(20px, 4vw, 28px);
          background: #ffffff;
        }

        .service-modal-desc {
          color: #4b5563;
          font-size: 0.88rem;
          line-height: 1.7;
          margin-bottom: 20px;
        }

        .service-modal-features-title {
          font-size: 0.78rem;
          font-weight: 800;
          color: #111827;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-bottom: 12px;
        }

        .service-modal-features-list {
          list-style: none;
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: 10px 12px;
          margin-bottom: 24px;
          padding: 0;
        }

        .service-modal-features-list li {
          display: flex;
          align-items: center;
          gap: 8px;
          font-size: 0.82rem;
          color: #374151;
          font-weight: 500;
        }

        .service-modal-footer {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 20px;
          background: #f8fafc;
          border-radius: 16px;
          border: 1px solid #e2e8f0;
          gap: 14px;
          flex-wrap: wrap;
        }

        .service-modal-price-label {
          font-size: 0.68rem;
          color: #64748b;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        .service-modal-price-val {
          font-size: 1.65rem;
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1;
        }

        .service-modal-period {
          font-size: 0.78rem;
          font-weight: 600;
          color: #64748b;
          margin-left: 3px;
        }

        .service-modal-cta {
          color: #ffffff;
          border: none;
          padding: 11px 22px;
          border-radius: 50px;
          cursor: pointer;
          display: inline-flex;
          align-items: center;
          gap: 8px;
          font-size: 0.88rem;
          font-weight: 700;
          box-shadow: 0 4px 14px rgba(0,0,0,0.18);
          transition: transform 0.2s, box-shadow 0.2s;
        }

        .service-modal-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 22px rgba(0,0,0,0.25);
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS (Desktop, Tablet, Mobile)
           ============================================================ */

        /* Tablets & Medium Screens (<= 1024px) */
        @media (max-width: 1024px) {
          .hero-grid {
            grid-template-columns: 1fr;
            gap: 48px;
          }

          .hero-text-col {
            max-width: 100%;
            align-items: center;
            text-align: center;
          }

          .hero-headline {
            text-align: center;
          }

          .hero-headline-bar {
            margin-left: auto;
            margin-right: auto;
          }

          .hero-desc {
            text-align: center;
            max-width: 600px;
          }

          .hero-cta-group {
            justify-content: center;
          }

          .hero-stats-grid {
            max-width: 600px;
            margin: 0 auto;
          }
        }

        /* Portrait Tablets & Large Phones (<= 768px) */
        @media (max-width: 768px) {
          .hero-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
            max-width: 100%;
          }

          .hero-orbit-chips {
            display: flex;
          }

          .service-modal-features-list {
            grid-template-columns: 1fr;
          }
        }

        /* Mobile Phones (<= 540px) */
        @media (max-width: 540px) {
          .hero-main-wrapper {
            padding: 28px 14px 36px;
          }

          .hero-badge {
            font-size: 0.68rem;
            padding: 6px 14px;
            letter-spacing: 0.8px;
            margin-bottom: 16px;
          }

          .hero-headline {
            font-size: clamp(2.1rem, 9.5vw, 2.7rem);
            line-height: 1.1;
            margin-bottom: 14px;
          }

          .hero-desc {
            font-size: 0.92rem;
            line-height: 1.7;
            margin-bottom: 22px;
          }

          .hero-cta-group {
            flex-direction: column;
            width: 100%;
            gap: 10px;
            margin-bottom: 24px;
          }

          .hero-btn-primary,
          .hero-btn-secondary {
            width: 100%;
            padding: 13px 20px;
            font-size: 0.94rem;
          }

          .hero-stats-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .hero-stat-card {
            padding: 10px 12px;
            border-radius: 12px;
          }

          .hero-stat-num {
            font-size: 1.35rem;
          }

          .hero-stat-label {
            font-size: 0.62rem;
            letter-spacing: 0.5px;
          }

          .service-modal-card {
            max-height: 92vh;
            border-radius: 20px;
          }

          .service-modal-footer {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
          }

          .service-modal-cta {
            width: 100%;
            justify-content: center;
          }

          .clients-strip-wrapper {
            padding: 36px 0 28px;
          }

          .clients-strip-header {
            padding: 0 16px;
            margin-bottom: 20px;
          }
        }

        /* Extra Small Phones (<= 380px) */
        @media (max-width: 380px) {
          .hero-headline {
            font-size: 1.95rem;
          }

          .hero-badge {
            font-size: 0.64rem;
          }

          .hero-stat-num {
            font-size: 1.25rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .hero-section {
          background: linear-gradient(135deg, #f8fafc 0%, #eef2ff 50%, #fef3c7 100%);
        }

        [data-theme="light"] .hero-badge {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .hero-headline {
          color: #0f172a;
          text-shadow: none;
        }

        [data-theme="light"] .hero-desc {
          color: #475569;
        }

        [data-theme="light"] .hero-desc strong {
          color: #0f172a;
        }

        [data-theme="light"] .hero-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .hero-stat-card {
          background: rgba(255, 255, 255, 0.85) !important;
          border-color: rgba(0, 0, 0, 0.08) !important;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .hero-stat-num {
          color: #0f172a;
        }

        [data-theme="light"] .hero-stat-label {
          color: #64748b;
        }

        [data-theme="light"] .hero-orbit-chip {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          color: #0f172a;
          box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .hero-orbit-ambient-aura {
          background: radial-gradient(circle, rgba(99, 102, 241, 0.12) 0%, rgba(249, 115, 22, 0.06) 45%, transparent 72%);
        }

        [data-theme="light"] .hero-orbit-track-outer {
          border-color: rgba(99, 102, 241, 0.25);
        }

        [data-theme="light"] .hero-orbit-track-main {
          border-color: rgba(0, 0, 0, 0.12);
          box-shadow: 0 0 16px rgba(99, 102, 241, 0.08);
        }

        [data-theme="light"] .hero-orbit-track-inner {
          border-color: rgba(249, 115, 22, 0.28);
        }

        [data-theme="light"] .hero-orbit-icon {
          background: #ffffff;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12), 0 0 12px var(--service-color);
        }

        [data-theme="light"] .hero-orbit-node-label {
          background: #ffffff;
          color: #0f172a;
          border-color: rgba(0, 0, 0, 0.12);
          border-left: 2.5px solid var(--service-color);
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        }



        [data-theme="light"] .hero-btn-secondary {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.12);
          color: #0f172a;
        }

        [data-theme="light"] .hero-btn-secondary:hover {
          background: rgba(0, 0, 0, 0.08);
        }

/* SOURCE: reviews.html */
/* ============================================================
           STANDALONE CLIENTS MARQUEE SECTION STYLES
           ============================================================ */

        @keyframes clientsScrollNormal {
          0% { transform: translate3d(0, 0, 0); }
          100% { transform: translate3d(-50%, 0, 0); }
        }

        @keyframes clientsScrollReverse {
          0% { transform: translate3d(-50%, 0, 0); }
          100% { transform: translate3d(0, 0, 0); }
        }

        .clients-strip-section {
          position: relative;
          z-index: 10;
          width: 100%;
          padding: clamp(36px, 5vw, 64px) 0 clamp(32px, 5vw, 56px);
          background: #030712;
          overflow: hidden;
          border-top: 1px solid rgba(255, 255, 255, 0.05);
          border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }

        .clients-strip-header {
          display: flex;
          align-items: center;
          gap: 20px;
          padding: 0 clamp(16px, 4vw, 60px);
          margin-bottom: clamp(20px, 3.5vw, 32px);
          position: relative;
        }

        .clients-strip-line {
          flex: 1;
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.25), transparent);
        }

        .clients-strip-center {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 6px;
          flex-shrink: 0;
          text-align: center;
        }

        .clients-strip-tag {
          font-size: clamp(0.6rem, 0.9vw, 0.7rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          color: #818cf8;
          background: rgba(99, 102, 241, 0.1);
          border: 1px solid rgba(99, 102, 241, 0.25);
          padding: 4px 14px;
          border-radius: 50px;
        }

        .clients-strip-title {
          font-size: clamp(1.25rem, 2.5vw, 1.65rem);
          font-weight: 900;
          background: linear-gradient(135deg, #ffffff 30%, #c7d2fe);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          letter-spacing: -0.02em;
          margin: 0;
        }

        .clients-marquee-container {
          overflow: hidden;
          width: 100%;
          -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        }

        .clients-marquee-container.row-2 {
          margin-top: 14px;
        }

        .clients-marquee-track {
          display: flex;
          gap: 16px;
          width: max-content;
          will-change: transform;
          transform: translateZ(0);
          backface-visibility: hidden;
          -webkit-backface-visibility: hidden;
          padding: 6px 0;
        }

        .clients-marquee-track.anim-normal {
          animation: clientsScrollNormal 75s linear infinite;
        }

        .clients-marquee-track.anim-reverse {
          animation: clientsScrollReverse 70s linear infinite;
        }

        .clients-marquee-track:hover {
          animation-play-state: paused;
        }

        /* Client Card */
        .client-card {
          flex-shrink: 0;
          display: flex;
          align-items: center;
          gap: 12px;
          background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 18px;
          padding: 10px 14px;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.06);
          position: relative;
          overflow: hidden;
          min-width: clamp(175px, 20vw, 215px);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          text-decoration: none;
          color: inherit;
          transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .client-card.is-clickable {
          cursor: pointer;
        }

        .client-card:hover {
          transform: translateY(-4px) scale(1.02);
          box-shadow: 0 16px 36px rgba(0, 0, 0, 0.45);
          border-color: var(--card-color);
        }

        .client-card-top-bar {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, var(--card-color), transparent 80%);
          
          transition: opacity 0.25s;
        }

        .client-card:hover .client-card-top-bar {
          opacity: 1;
        }

        .client-card-logo-box {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          flex-shrink: 0;
          border: 1px solid rgba(255, 255, 255, 0.12);
          display: flex;
          align-items: center;
          justify-content: center;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.92);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }

        .client-card-logo-img {
          width: 82%;
          height: 82%;
          object-fit: contain;
        }

        .client-card-fallback-letter {
          font-size: 1.1rem;
          font-weight: 900;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .client-card-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
          min-width: 0;
        }

        .client-card-name {
          font-size: 0.88rem;
          font-weight: 800;
          color: #ffffff;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .client-card-industry {
          font-size: 0.65rem;
          color: #94a3b8;
          font-weight: 600;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        @media (max-width: 640px) {
          .clients-strip-section {
            padding: 28px 0;
          }

          .client-card {
            min-width: 160px;
            padding: 8px 12px;
          }

          .client-card-logo-box {
            width: 38px;
            height: 38px;
          }

          .client-card-name {
            font-size: 0.82rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .clients-strip-section {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .clients-strip-title {
          background: linear-gradient(135deg, #0f172a 30%, #4338ca);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        [data-theme="light"] .client-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .client-card-name {
          color: #0f172a;
        }

/* SOURCE: reviews.html */
/* ============================================================
           SERVICES COMPONENT STYLES
           ============================================================ */

        @keyframes serviceFloat {
          0%, 100% { transform: translateY(0) rotate(4deg); }
          50% { transform: translateY(-6px) rotate(4deg); }
        }

        .services-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .services-watermark {
          position: absolute;
          top: 18%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .services-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
          filter: blur(90px);
          top: -100px;
          left: -100px;
          pointer-events: none;
        }

        .services-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          right: -100px;
          pointer-events: none;
        }

        /* Section Header */
        .services-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .services-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .services-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .services-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .services-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Category Filter Tabs */
        .services-filters-wrap {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .services-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.09);
          color: #94a3b8;
          font-size: clamp(0.76rem, 1vw, 0.84rem);
          font-weight: 600;
          padding: 7px 16px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .services-filter-btn:hover {
          background: rgba(255, 255, 255, 0.08);
          color: #ffffff;
        }

        .services-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Responsive Services Grid */
        .services-grid-container {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: clamp(16px, 2.5vw, 28px);
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Service Card */
        .service-card-item {
          position: relative;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          overflow: hidden;
          backdrop-filter: blur(18px);
          -webkit-backdrop-filter: blur(18px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .service-card-item:hover {
          transform: translateY(-6px);
          border-color: var(--service-color);
          box-shadow: 0 18px 45px rgba(0, 0, 0, 0.5), 0 0 24px rgba(var(--service-rgb), 0.2);
        }

        /* Card Header */
        .service-card-header {
          position: relative;
          padding: clamp(24px, 3.5vw, 32px) clamp(18px, 3vw, 24px) clamp(18px, 3vw, 22px);
          background: linear-gradient(135deg, var(--service-color) 0%, var(--service-dark) 100%);
          overflow: hidden;
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
        }

        .service-header-circle-1 {
          position: absolute;
          width: 220px;
          height: 220px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
          top: -60px;
          right: -60px;
          pointer-events: none;
        }

        .service-header-circle-2 {
          position: absolute;
          width: 160px;
          height: 160px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.05);
          bottom: -50px;
          left: -40px;
          pointer-events: none;
        }

        .service-badge {
          position: absolute;
          top: 14px;
          right: 14px;
          background: rgba(0, 0, 0, 0.3);
          border: 1px solid rgba(255, 255, 255, 0.25);
          color: #ffffff;
          font-size: 0.65rem;
          font-weight: 700;
          padding: 4px 10px;
          border-radius: 50px;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          z-index: 2;
        }

        .service-icon-box {
          position: relative;
          width: clamp(68px, 8vw, 84px);
          height: clamp(68px, 8vw, 84px);
          margin-bottom: 14px;
          z-index: 1;
          animation: serviceFloat 3.6s ease-in-out infinite;
        }

        .service-icon-glow {
          position: absolute;
          inset: 0;
          border-radius: 20px;
          background: radial-gradient(circle, rgba(255, 255, 255, 0.4), transparent 70%);
          filter: blur(4px);
        }

        .service-icon-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          border-radius: 18px;
          position: relative;
          z-index: 1;
        }

        .service-category-pill {
          display: inline-block;
          font-size: 0.64rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          background: rgba(255, 255, 255, 0.15);
          color: #ffffff;
          padding: 3px 10px;
          border-radius: 50px;
          margin-bottom: 6px;
        }

        .service-card-title {
          font-size: clamp(1.2rem, 1.8vw, 1.4rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.2;
          margin-bottom: 4px;
          letter-spacing: -0.01em;
        }

        .service-card-subtitle {
          font-size: clamp(0.76rem, 1vw, 0.84rem);
          color: rgba(255, 255, 255, 0.8);
          font-weight: 500;
        }

        /* Card Body */
        .service-card-body {
          padding: clamp(18px, 2.5vw, 24px);
          display: flex;
          flex-direction: column;
          flex: 1;
          justify-content: space-between;
        }

        .service-card-desc {
          font-size: clamp(0.84rem, 1.1vw, 0.92rem);
          color: #94a3b8;
          line-height: 1.65;
          margin-bottom: 18px;
        }

        /* Stats Grid Inside Card */
        .service-stats-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 8px;
          margin-bottom: 18px;
        }

        .service-stat-chip {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.07);
          border-radius: 12px;
          padding: 8px 6px;
          text-align: center;
        }

        .service-stat-num {
          font-size: clamp(0.95rem, 1.2vw, 1.15rem);
          font-weight: 900;
          line-height: 1.1;
          display: block;
        }

        .service-stat-lbl {
          font-size: 0.62rem;
          font-weight: 700;
          color: #64748b;
          text-transform: uppercase;
          letter-spacing: 0.4px;
          margin-top: 2px;
          display: block;
        }

        /* Checklist */
        .service-points-list {
          list-style: none;
          padding: 0;
          margin: 0 0 20px;
          display: flex;
          flex-direction: column;
          gap: 8px;
        }

        .service-point-item {
          display: flex;
          align-items: center;
          gap: 9px;
          font-size: clamp(0.78rem, 1vw, 0.84rem);
          color: #cbd5e1;
          font-weight: 500;
        }

        .service-point-check {
          width: 18px;
          height: 18px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        /* CTA Button */
        .service-card-cta {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 18px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 12px;
          color: #ffffff;
          font-size: 0.88rem;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.25s ease;
          margin-top: auto;
        }

        .service-card-cta:hover {
          background: rgba(255, 255, 255, 0.1);
          border-color: rgba(255, 255, 255, 0.25);
          transform: translateY(-2px);
        }

        .service-cta-arrow {
          width: 28px;
          height: 28px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          transition: transform 0.2s ease;
        }

        .service-card-cta:hover .service-cta-arrow {
          transform: translateX(4px);
        }

        /* Bottom Glow Line */
        .service-bottom-bar {
          height: 3px;
          width: 100%;
          background: linear-gradient(90deg, var(--service-color), var(--service-dark));
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .services-grid-container {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (max-width: 768px) {
          .services-section {
            padding: 48px 16px;
          }

          .services-grid-container {
            grid-template-columns: 1fr;
            gap: 18px;
          }

          .service-card-item {
            border-radius: 20px;
          }

          .service-card-header {
            padding: 22px 16px 18px;
          }

          .service-icon-box {
            width: 64px;
            height: 64px;
            margin-bottom: 12px;
          }

          .service-card-body {
            padding: 18px;
          }

          .service-stats-grid {
            gap: 6px;
            margin-bottom: 14px;
          }

          .service-stat-chip {
            padding: 6px 4px;
          }

          .service-stat-num {
            font-size: 0.95rem;
          }

          .service-stat-lbl {
            font-size: 0.58rem;
          }
        }

        @media (max-width: 480px) {
          .services-section {
            padding: 36px 12px;
          }

          .services-filters-wrap {
            gap: 6px;
            margin-bottom: 24px;
          }

          .services-filter-btn {
            padding: 6px 12px;
            font-size: 0.72rem;
          }

          .service-card-body {
            padding: 14px;
          }

          .service-point-item {
            font-size: 0.76rem;
            gap: 7px;
          }

          .service-card-cta {
            padding: 10px 14px;
            font-size: 0.82rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .services-section {
          background: #ffffff;
        }

        [data-theme="light"] .services-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .services-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .services-title {
          color: #0f172a;
        }

        [data-theme="light"] .services-subtitle {
          color: #475569;
        }

        [data-theme="light"] .services-filter-btn {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.08);
          color: #334155;
        }

        [data-theme="light"] .services-filter-btn:hover {
          background: rgba(0, 0, 0, 0.08);
          color: #0f172a;
        }

        [data-theme="light"] .service-card-item {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .service-card-desc {
          color: #475569;
        }

        [data-theme="light"] .service-stat-chip {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .service-stat-lbl {
          color: #64748b;
        }

        [data-theme="light"] .service-point-item {
          color: #1e293b;
        }

        [data-theme="light"] .service-card-cta {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.12);
          color: #0f172a;
        }

        [data-theme="light"] .service-card-cta:hover {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.2);
        }

/* SOURCE: reviews.html */
/* ============================================================
           PROCESS COMPONENT STYLES
           ============================================================ */

        .process-section-root {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .process-bg-text {
          position: absolute;
          top: 18%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .process-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 600px);
          height: clamp(300px, 45vw, 600px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          top: -120px;
          right: 5%;
          pointer-events: none;
        }

        .process-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.1), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          left: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .process-header {
          text-align: center;
          margin-bottom: clamp(36px, 5vw, 64px);
          position: relative;
          z-index: 1;
        }

        .process-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.74rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 6px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }

        .process-title {
          font-size: clamp(1.85rem, 4.5vw, 3.4rem);
          font-weight: 900;
          line-height: 1.1;
          color: #ffffff;
          letter-spacing: -0.025em;
          margin-bottom: 12px;
        }

        .process-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .process-sub {
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          color: #94a3b8;
          line-height: 1.75;
          max-width: 560px;
          margin: 0 auto;
        }

        /* Grid */
        .process-grid-container {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(16px, 2vw, 24px);
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Card */
        .process-card-item {
          position: relative;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          padding: clamp(24px, 3vw, 32px) clamp(16px, 2.5vw, 22px);
          text-align: center;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: flex-start;
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .process-card-item:hover {
          transform: translateY(-6px);
          border-color: var(--step-color);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 20px rgba(var(--step-rgb), 0.2);
        }

        .process-step-indicator {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 0.64rem;
          font-weight: 800;
          letter-spacing: 1.2px;
          text-transform: uppercase;
          color: var(--step-color);
          background: rgba(var(--step-rgb), 0.12);
          border: 1px solid rgba(var(--step-rgb), 0.25);
          padding: 4px 12px;
          border-radius: 50px;
          margin-bottom: 20px;
        }

        .process-icon-bubble {
          width: clamp(60px, 7vw, 72px);
          height: clamp(60px, 7vw, 72px);
          border-radius: 20px;
          background: linear-gradient(135deg, rgba(var(--step-rgb), 0.2) 0%, rgba(var(--step-rgb), 0.05) 100%);
          border: 1.5px solid rgba(var(--step-rgb), 0.35);
          display: flex;
          align-items: center;
          justify-content: center;
          color: var(--step-color);
          margin-bottom: 20px;
          box-shadow: 0 8px 24px rgba(var(--step-rgb), 0.2);
          transition: transform 0.3s ease;
        }

        .process-card-item:hover .process-icon-bubble {
          transform: scale(1.1) rotate(5deg);
        }

        .process-card-title {
          font-size: clamp(1.1rem, 1.5vw, 1.25rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.01em;
          margin-bottom: 10px;
        }

        .process-card-desc {
          font-size: clamp(0.82rem, 1vw, 0.88rem);
          color: #94a3b8;
          line-height: 1.65;
          margin: 0;
        }

        /* Connector Arrow Between Cards (Desktop only) */
        .process-connector-arrow {
          position: absolute;
          right: -16px;
          top: 40%;
          transform: translateY(-50%);
          color: rgba(255, 255, 255, 0.2);
          z-index: 2;
          pointer-events: none;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .process-grid-container {
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
          }

          .process-connector-arrow {
            display: none;
          }
        }

        @media (max-width: 680px) {
          .process-section-root {
            padding: 40px 14px;
          }

          .process-grid-container {
            grid-template-columns: 1fr;
            gap: 14px;
          }

          .process-card-item {
            border-radius: 20px;
            padding: 22px 16px;
          }

          .process-icon-bubble {
            width: 54px;
            height: 54px;
            margin-bottom: 14px;
          }

          .process-step-indicator {
            margin-bottom: 14px;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .process-section-root {
          background: #f8fafc;
        }

        [data-theme="light"] .process-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .process-bg-text {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .process-title {
          color: #0f172a;
        }

        [data-theme="light"] .process-sub {
          color: #475569;
        }

        [data-theme="light"] .process-card-item {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.09);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .process-card-title {
          color: #0f172a;
        }

        [data-theme="light"] .process-card-desc {
          color: #475569;
        }

        [data-theme="light"] .process-connector-arrow {
          color: rgba(0, 0, 0, 0.15);
        }

/* SOURCE: reviews.html */
/* ============================================================
           ABOUT COMPONENT STYLES
           ============================================================ */

        .about-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .about-watermark {
          position: absolute;
          top: 25%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .about-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.14), transparent 70%);
          filter: blur(90px);
          top: -120px;
          left: -100px;
          pointer-events: none;
        }

        .about-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.1), transparent 70%);
          filter: blur(90px);
          bottom: -100px;
          right: -100px;
          pointer-events: none;
        }

        /* 2-Column Grid Layout */
        .about-container {
          display: grid;
          grid-template-columns: 1.15fr 1fr;
          gap: clamp(32px, 5vw, 64px);
          align-items: center;
          max-width: 1300px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Left Column: Mission & Features */
        .about-left-col {
          display: flex;
          flex-direction: column;
        }

        .about-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
          width: fit-content;
        }

        .about-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 18px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .about-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .about-desc-p {
          font-size: clamp(0.88rem, 1.1vw, 0.98rem);
          color: #94a3b8;
          line-height: 1.75;
          margin-bottom: 14px;
        }

        .about-desc-p strong {
          color: #f1f5f9;
        }

        /* Value Checklist */
        .about-checklist {
          list-style: none;
          padding: 0;
          margin: 18px 0 28px;
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .about-checklist-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 14px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 12px;
          font-size: clamp(0.82rem, 1vw, 0.9rem);
          font-weight: 500;
          color: #cbd5e1;
          transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
        }

        .about-checklist-item:hover {
          transform: translateX(4px);
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(249, 115, 22, 0.4);
          color: #ffffff;
        }

        .about-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 14px 30px;
          border-radius: 12px;
          font-size: 0.94rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 4px 18px rgba(24, 119, 242, 0.4);
          transition: all 0.25s ease;
          width: fit-content;
        }

        .about-cta-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 28px rgba(24, 119, 242, 0.6);
        }

        /* Right Column: Interactive Pillars Card Deck */
        .about-right-col {
          display: flex;
          flex-direction: column;
          gap: clamp(14px, 2vw, 18px);
        }

        /* Quick Stat Highlights Top Row */
        .about-stats-grid {
          display: grid;
          grid-template-columns: repeat(2, 1fr);
          gap: clamp(10px, 1.8vw, 14px);
        }

        .about-stat-mini-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          padding: clamp(14px, 2vw, 18px);
          display: flex;
          align-items: center;
          gap: 12px;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }

        .about-stat-icon-box {
          width: 42px;
          height: 42px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .about-stat-number {
          font-size: clamp(1.2rem, 1.8vw, 1.45rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.1;
        }

        .about-stat-label {
          font-size: 0.68rem;
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        /* Value Cards Deck */
        .about-values-deck {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .about-value-card {
          background: rgba(255, 255, 255, 0.02);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 20px);
          display: flex;
          align-items: flex-start;
          gap: 14px;
          cursor: pointer;
          transition: all 0.25s ease;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
        }

        .about-value-card:hover,
        .about-value-card.is-active {
          background: rgba(255, 255, 255, 0.06);
          border-color: var(--card-color);
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .about-value-icon {
          width: 40px;
          height: 40px;
          border-radius: 12px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          background: rgba(255, 255, 255, 0.04);
        }

        .about-value-content {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .about-value-title {
          font-size: clamp(0.92rem, 1.2vw, 1.05rem);
          font-weight: 800;
          color: #ffffff;
        }

        .about-value-desc {
          font-size: clamp(0.78rem, 1vw, 0.85rem);
          color: #94a3b8;
          line-height: 1.5;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .about-container {
            grid-template-columns: 1fr;
            gap: 40px;
          }

          .about-cta-btn {
            align-self: flex-start;
          }
        }

        @media (max-width: 640px) {
          .about-section {
            padding: 40px 14px;
          }

          .about-checklist-item {
            padding: 8px 10px;
            gap: 8px;
            font-size: 0.8rem;
          }

          .about-cta-btn {
            width: 100%;
            justify-content: center;
          }

          .about-stat-mini-card {
            padding: 10px;
            gap: 8px;
          }

          .about-stat-icon-box {
            width: 34px;
            height: 34px;
          }

          .about-value-card {
            padding: 12px 14px;
            gap: 10px;
          }

          .about-value-icon {
            width: 34px;
            height: 34px;
          }
        }

        @media (max-width: 400px) {
          .about-stats-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .about-section {
          background: #ffffff;
        }

        [data-theme="light"] .about-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .about-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .about-title {
          color: #0f172a;
        }

        [data-theme="light"] .about-desc-p {
          color: #475569;
        }

        [data-theme="light"] .about-desc-p strong {
          color: #0f172a;
        }

        [data-theme="light"] .about-checklist-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          color: #1e293b;
        }

        [data-theme="light"] .about-stat-mini-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .about-stat-number {
          color: #0f172a;
        }

        [data-theme="light"] .about-stat-label {
          color: #64748b;
        }

        [data-theme="light"] .about-value-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .about-value-card:hover,
        [data-theme="light"] .about-value-card.is-active {
          background: #ffffff;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .about-value-title {
          color: #0f172a;
        }

        [data-theme="light"] .about-value-desc {
          color: #475569;
        }

/* SOURCE: reviews.html */
/* ============================================================
           CTA BANNER COMPONENT STYLES
           ============================================================ */

        .cta-banner-wrapper {
          position: relative;
          max-width: 1280px;
          width: calc(100% - clamp(24px, 5vw, 64px));
          margin: clamp(40px, 7vw, 80px) auto;
          background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0a0d24 100%);
          border: 1px solid rgba(99, 102, 241, 0.35);
          border-radius: clamp(20px, 3.5vw, 32px);
          padding: clamp(32px, 5vw, 64px) clamp(20px, 5vw, 60px);
          overflow: hidden;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(99, 102, 241, 0.15);
        }

        .cta-banner-orb-1 {
          position: absolute;
          width: clamp(260px, 40vw, 500px);
          height: clamp(260px, 40vw, 500px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.35), transparent 70%);
          filter: blur(80px);
          top: -120px;
          left: -80px;
          pointer-events: none;
        }

        .cta-banner-orb-2 {
          position: absolute;
          width: clamp(240px, 35vw, 450px);
          height: clamp(240px, 35vw, 450px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.22), transparent 70%);
          filter: blur(80px);
          bottom: -100px;
          right: -60px;
          pointer-events: none;
        }

        .cta-banner-inner {
          position: relative;
          z-index: 1;
          display: grid;
          grid-template-columns: 1.3fr auto;
          gap: clamp(24px, 4vw, 48px);
          align-items: center;
        }

        .cta-banner-content {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .cta-banner-badge {
          display: inline-flex;
          align-items: center;
          gap: 7px;
          background: rgba(249, 115, 22, 0.15);
          border: 1px solid rgba(249, 115, 22, 0.35);
          color: #fb923c;
          font-size: clamp(0.68rem, 1vw, 0.74rem);
          font-weight: 800;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          padding: 6px 14px;
          border-radius: 50px;
          width: fit-content;
        }

        .cta-banner-heading {
          font-size: clamp(1.6rem, 3.5vw, 2.9rem);
          font-weight: 900;
          color: #ffffff;
          line-height: 1.15;
          letter-spacing: -0.025em;
          margin: 0;
        }

        .cta-banner-heading-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .cta-banner-desc {
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          color: #cbd5e1;
          line-height: 1.6;
          margin: 0;
          max-width: 580px;
        }

        .cta-banner-actions {
          display: flex;
          flex-direction: column;
          gap: 12px;
          min-width: 220px;
        }

        .cta-btn-primary {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 15px 30px;
          border-radius: 14px;
          background: linear-gradient(135deg, #ffffff 0%, #f1f5f9 100%);
          color: #1e1b4b;
          font-size: 0.95rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 8px 30px rgba(255, 255, 255, 0.25);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          white-space: nowrap;
        }

        .cta-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 40px rgba(255, 255, 255, 0.35);
        }

        .cta-btn-whatsapp {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          padding: 13px 26px;
          border-radius: 14px;
          background: rgba(37, 211, 102, 0.12);
          border: 1.5px solid rgba(37, 211, 102, 0.45);
          color: #4ade80;
          font-size: 0.92rem;
          font-weight: 700;
          text-decoration: none;
          transition: all 0.2s ease;
          white-space: nowrap;
        }

        .cta-btn-whatsapp:hover {
          background: rgba(37, 211, 102, 0.22);
          border-color: #22c55e;
          color: #ffffff;
          transform: translateY(-2px);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 880px) {
          .cta-banner-inner {
            grid-template-columns: 1fr;
            gap: 28px;
            text-align: center;
          }

          .cta-banner-content {
            align-items: center;
          }

          .cta-banner-badge {
            align-self: center;
          }

          .cta-banner-actions {
            flex-direction: row;
            justify-content: center;
            width: 100%;
          }

          .cta-btn-primary,
          .cta-btn-whatsapp {
            flex: 1;
            padding: 13px 18px;
          }
        }

        @media (max-width: 540px) {
          .cta-banner-wrapper {
            padding: 28px 16px;
            width: calc(100% - 20px);
            margin: 32px auto;
          }

          .cta-banner-actions {
            flex-direction: column;
            width: 100%;
          }

          .cta-btn-primary,
          .cta-btn-whatsapp {
            width: 100%;
          }
        }

/* SOURCE: reviews.html */
/* ============================================================
           RESULTS COMPONENT STYLES
           ============================================================ */

        @keyframes resultsFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes resultsScaleIn {
          from {  transform: scale(0.94); }
          to { opacity: 1; transform: scale(1); }
        }

        .results-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .results-watermark {
          position: absolute;
          top: 22%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .results-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 650px);
          height: clamp(300px, 45vw, 650px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.16), transparent 70%);
          filter: blur(90px);
          top: -100px;
          right: 5%;
          pointer-events: none;
        }

        .results-orb-2 {
          position: absolute;
          width: clamp(280px, 40vw, 550px);
          height: clamp(280px, 40vw, 550px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: 10%;
          left: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .results-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .results-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .results-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .results-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .results-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Stats Bar */
        .results-stats-bar {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: clamp(8px, 1.5vw, 14px);
          max-width: 1200px;
          margin: 0 auto clamp(36px, 5vw, 56px);
          position: relative;
          z-index: 1;
        }

        .results-stat-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: clamp(12px, 1.8vw, 18px) clamp(10px, 1.5vw, 16px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          text-align: center;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .results-stat-card:hover {
          transform: translateY(-3px);
          border-color: rgba(99, 102, 241, 0.35);
        }

        .results-stat-num {
          display: flex;
          align-items: center;
          gap: 3px;
          font-size: clamp(1.3rem, 2vw, 1.75rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1;
          margin-bottom: 4px;
        }

        .results-stat-lbl {
          font-size: clamp(0.6rem, 0.8vw, 0.72rem);
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
        }

        /* Case Studies Carousel */
        .results-cases-wrap {
          max-width: 1280px;
          margin: 0 auto clamp(40px, 6vw, 64px);
          position: relative;
          z-index: 1;
        }

        .results-cases-title {
          font-size: clamp(1.1rem, 2vw, 1.4rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 16px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .results-cases-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(12px, 2vw, 20px);
        }

        .results-case-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          padding: clamp(16px, 2.5vw, 20px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          position: relative;
          overflow: hidden;
          transition: transform 0.3s ease, border-color 0.3s ease;
        }

        .results-case-card:hover {
          transform: translateY(-4px);
          border-color: var(--case-color);
        }

        .results-case-header {
          display: flex;
          justify-content: space-between;
          align-items: flex-start;
          gap: 10px;
          margin-bottom: 12px;
        }

        .results-case-brand {
          font-size: 1.05rem;
          font-weight: 900;
          color: #ffffff;
        }

        .results-case-cat {
          font-size: 0.65rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          padding: 3px 8px;
          border-radius: 6px;
          white-space: nowrap;
        }

        .results-case-metric-box {
          display: flex;
          align-items: baseline;
          gap: 6px;
          margin-bottom: 10px;
        }

        .results-case-metric-val {
          font-size: 1.8rem;
          font-weight: 900;
          line-height: 1;
        }

        .results-case-metric-lbl {
          font-size: 0.72rem;
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
        }

        .results-case-desc {
          font-size: 0.8rem;
          color: #94a3b8;
          line-height: 1.5;
          margin-bottom: 14px;
        }

        .results-case-sub-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          margin-bottom: 12px;
        }

        .results-case-sub-item {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 10px;
          padding: 6px 8px;
          text-align: center;
        }

        .results-case-sub-val {
          font-size: 0.88rem;
          font-weight: 800;
          display: block;
        }

        .results-case-sub-lbl {
          font-size: 0.6rem;
          color: #64748b;
          font-weight: 700;
          text-transform: uppercase;
        }

        .results-case-tags {
          display: flex;
          flex-wrap: wrap;
          gap: 6px;
        }

        .results-case-tag-pill {
          font-size: 0.65rem;
          font-weight: 600;
          padding: 3px 8px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.05);
          color: #cbd5e1;
        }

        /* Platform Filter Tabs */
        .results-filter-bar {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(24px, 4vw, 36px);
          position: relative;
          z-index: 1;
        }

        .results-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: clamp(0.76rem, 1vw, 0.85rem);
          font-weight: 600;
          padding: 8px 16px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          gap: 6px;
        }

        .results-filter-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
        }

        .results-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Platform Block */
        .platform-block {
          max-width: 1280px;
          margin: 0 auto clamp(32px, 5vw, 48px);
          position: relative;
          z-index: 1;
        }

        .platform-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: clamp(16px, 3vw, 24px) clamp(16px, 3vw, 28px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          margin-bottom: clamp(14px, 2vw, 20px);
          gap: 20px;
          flex-wrap: wrap;
        }

        .platform-header-left {
          display: flex;
          align-items: center;
          gap: 16px;
          flex: 1;
          min-width: 260px;
        }

        .platform-icon-wrap {
          width: clamp(44px, 5vw, 52px);
          height: clamp(44px, 5vw, 52px);
          border-radius: 14px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
        }

        .platform-text-wrap {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .platform-title {
          font-size: clamp(1.15rem, 1.8vw, 1.35rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.01em;
        }

        .platform-desc {
          font-size: clamp(0.78rem, 1vw, 0.86rem);
          color: #94a3b8;
          line-height: 1.45;
        }

        .platform-stats-chips {
          display: flex;
          align-items: center;
          gap: 8px;
          flex-wrap: wrap;
        }

        .platform-chip {
          display: flex;
          flex-direction: column;
          align-items: center;
          padding: 6px 14px;
          border-radius: 10px;
          border: 1px solid;
          text-align: center;
        }

        .platform-chip-val {
          font-size: 0.95rem;
          font-weight: 900;
          line-height: 1.1;
        }

        .platform-chip-lbl {
          font-size: 0.62rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          .85;
        }

        /* Proof Grid */
        .platform-images-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(10px, 1.8vw, 18px);
        }

        .platform-proof-card {
          position: relative;
          background: rgba(255, 255, 255, 0.02);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          overflow: hidden;
          cursor: pointer;
          transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
          display: flex;
          flex-direction: column;
        }

        .platform-proof-card:hover {
          transform: translateY(-4px);
          border-color: var(--platform-color);
          box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
        }

        .platform-proof-top-bar {
          height: 3px;
          width: 100%;
        }

        .platform-img-box {
          position: relative;
          width: 100%;
          height: clamp(140px, 18vw, 180px);
          overflow: hidden;
          background: #000;
        }

        .platform-proof-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          transition: transform 0.4s ease;
        }

        .platform-proof-card:hover .platform-proof-img {
          transform: scale(1.06);
        }

        .platform-proof-overlay {
          position: absolute;
          inset: 0;
          background: rgba(3, 7, 18, 0.5);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          display: flex;
          align-items: center;
          justify-content: center;
          
          transition: opacity 0.25s ease;
        }

        .platform-proof-card:hover .platform-proof-overlay {
          opacity: 1;
        }

        .platform-zoom-btn {
          width: 38px;
          height: 38px;
          border-radius: 50%;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
        }

        .platform-proof-footer {
          padding: 10px 12px;
          display: flex;
          align-items: center;
          gap: 8px;
          background: rgba(10, 15, 30, 0.5);
        }

        .platform-proof-tag {
          font-size: 0.62rem;
          font-weight: 700;
          padding: 2px 7px;
          border-radius: 5px;
          white-space: nowrap;
          flex-shrink: 0;
          text-transform: uppercase;
        }

        .platform-proof-label {
          font-size: 0.78rem;
          font-weight: 600;
          color: #e2e8f0;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        /* Lightbox Modal */
        .results-lightbox-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 99999;
          padding: clamp(12px, 3vw, 24px);
          animation: resultsFadeIn 0.2s ease-out;
        }

        .results-lightbox-close {
          position: absolute;
          top: 16px;
          right: 16px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.1);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 100;
        }

        .results-lightbox-close:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .results-lightbox-container {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(8px, 2vw, 16px);
          width: 100%;
          max-width: 960px;
          animation: resultsScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .results-lightbox-nav {
          width: clamp(38px, 4.5vw, 48px);
          height: clamp(38px, 4.5vw, 48px);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .results-lightbox-nav:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .results-lightbox-frame {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: #000000;
          border: 2px solid;
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
          max-width: 100%;
          display: flex;
          flex-direction: column;
        }

        .results-lightbox-img {
          width: 100%;
          max-height: 70vh;
          object-fit: contain;
          display: block;
        }

        .results-lightbox-caption {
          padding: 12px 18px;
          background: rgba(10, 15, 30, 0.95);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          gap: 12px;
          flex-wrap: wrap;
        }

        .results-lightbox-badge {
          font-size: 0.72rem;
          font-weight: 700;
          padding: 3px 9px;
          border-radius: 5px;
          color: #ffffff;
        }

        .results-lightbox-title {
          font-size: 0.86rem;
          font-weight: 600;
          color: #f1f5f9;
          flex: 1;
        }

        .results-lightbox-counter {
          font-size: 0.75rem;
          color: #94a3b8;
          font-weight: 700;
        }

        /* Bottom CTA Banner */
        .results-cta-banner {
          display: flex;
          align-items: center;
          justify-content: space-between;
          max-width: 1200px;
          margin: clamp(36px, 5vw, 60px) auto 0;
          padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 40px);
          background: linear-gradient(135deg, rgba(99, 102, 241, 0.12) 0%, rgba(249, 115, 22, 0.08) 100%);
          border: 1px solid rgba(99, 102, 241, 0.25);
          border-radius: 24px;
          position: relative;
          z-index: 1;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          gap: 24px;
          flex-wrap: wrap;
        }

        .results-cta-text h3 {
          font-size: clamp(1.2rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 6px;
        }

        .results-cta-text p {
          font-size: clamp(0.85rem, 1vw, 0.95rem);
          color: #cbd5e1;
        }

        .results-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 13px 28px;
          border-radius: 12px;
          font-size: 0.92rem;
          font-weight: 700;
          text-decoration: none;
          box-shadow: 0 4px 18px rgba(24, 119, 242, 0.4);
          transition: all 0.25s ease;
          white-space: nowrap;
        }

        .results-cta-btn:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 26px rgba(24, 119, 242, 0.6);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .results-cases-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .platform-images-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 768px) {
          .results-stats-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          .results-cases-grid {
            grid-template-columns: 1fr;
          }

          .platform-images-grid {
            grid-template-columns: repeat(2, 1fr);
          }

          .platform-header {
            flex-direction: column;
            align-items: flex-start;
          }

          .platform-stats-chips {
            width: 100%;
          }

          .platform-chip {
            flex: 1 1 calc(33% - 6px);
          }

          .results-cta-banner {
            flex-direction: column;
            align-items: stretch;
            text-align: center;
          }

          .results-cta-btn {
            justify-content: center;
          }
        }

        @media (max-width: 480px) {
          .results-section {
            padding: 40px 12px;
          }

          .results-stats-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .results-stat-card {
            padding: 10px 8px;
            border-radius: 12px;
          }

          .results-stat-num {
            font-size: 1.25rem;
          }

          .platform-images-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .platform-img-box {
            height: 125px;
          }

          .platform-proof-footer {
            padding: 8px 10px;
          }

          .platform-proof-label {
            font-size: 0.72rem;
          }

          .results-lightbox-container {
            flex-direction: column;
          }

          .results-lightbox-nav {
            display: none;
          }
        }

        @media (max-width: 360px) {
          .platform-images-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .results-section {
          background: #ffffff;
        }

        [data-theme="light"] .results-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .results-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .results-title {
          color: #0f172a;
        }

        [data-theme="light"] .results-subtitle {
          color: #475569;
        }

        [data-theme="light"] .results-stat-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .results-stat-num {
          color: #0f172a;
        }

        [data-theme="light"] .results-stat-lbl {
          color: #64748b;
        }

        /* Case Studies Cards in Results.jsx */
        [data-theme="light"] .results-cases-title {
          color: #0f172a;
        }

        [data-theme="light"] .results-case-card {
          background: #ffffff;
          border: 1.5px solid rgba(0, 0, 0, 0.09);
          box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .results-case-card:hover {
          border-color: var(--case-color);
          box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .results-case-brand {
          color: #0f172a;
        }

        [data-theme="light"] .results-case-metric-lbl {
          color: #475569;
          font-weight: 800;
        }

        [data-theme="light"] .results-case-desc {
          color: #334155;
        }

        [data-theme="light"] .results-case-sub-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .results-case-sub-lbl {
          color: #64748b;
          font-weight: 700;
        }

        [data-theme="light"] .results-case-tag-pill {
          background: #f1f5f9;
          color: #334155;
          border: 1px solid rgba(0, 0, 0, 0.06);
          font-weight: 600;
        }

        /* Platform Headers & Proof Screenshots */
        [data-theme="light"] .platform-header {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .platform-title {
          color: #0f172a;
        }

        [data-theme="light"] .platform-desc {
          color: #475569;
        }

        [data-theme="light"] .platform-proof-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .platform-proof-footer {
          background: #f8fafc;
        }

        [data-theme="light"] .platform-proof-label {
          color: #1e293b;
        }

        [data-theme="light"] .results-cta-banner {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .results-cta-text h3 {
          color: #0f172a;
        }

        [data-theme="light"] .results-cta-text p {
          color: #475569;
        }

/* SOURCE: reviews.html */
/* ============================================================
           TEAM COMPONENT STYLES
           ============================================================ */

        @keyframes teamFadeIn {
          from {  transform: scale(0.96); }
          to { opacity: 1; transform: scale(1); }
        }

        @keyframes teamOverlayFade {
          from {  }
          to { opacity: 1; }
        }

        .team-section {
          position: relative;
          padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .team-watermark {
          position: absolute;
          top: 30%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 220px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .team-header {
          text-align: center;
          margin-bottom: clamp(32px, 5vw, 48px);
          position: relative;
          z-index: 1;
        }

        .team-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .team-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .team-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .team-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Filter Tabs */
        .team-filter-bar {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          flex-wrap: wrap;
          margin-bottom: clamp(28px, 4vw, 40px);
          position: relative;
          z-index: 1;
        }

        .team-filter-btn {
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: clamp(0.76rem, 1vw, 0.85rem);
          font-weight: 600;
          padding: 8px 18px;
          border-radius: 50px;
          cursor: pointer;
          transition: all 0.22s ease;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
        }

        .team-filter-btn:hover {
          background: rgba(255, 255, 255, 0.1);
          color: #ffffff;
          border-color: rgba(255, 255, 255, 0.25);
        }

        .team-filter-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.4);
        }

        /* Unified Responsive Grid */
        .team-grid-wrap {
          position: relative;
          z-index: 1;
          max-width: 1360px;
          margin: 0 auto;
          width: 100%;
        }

        .team-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(14px, 2vw, 24px);
          width: 100%;
        }

        /* Team Card */
        .team-card {
          position: relative;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 20px;
          padding: clamp(16px, 2.5vw, 24px) clamp(12px, 2vw, 18px);
          text-align: center;
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
          cursor: pointer;
          display: flex;
          flex-direction: column;
          align-items: center;
          overflow: hidden;
        }

        .team-card:hover {
          transform: translateY(-6px);
          border-color: var(--member-color);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5), 0 0 24px rgba(99, 102, 241, 0.15);
        }

        .team-card-top-accent {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, transparent, var(--member-color), transparent);
          .6;
          transition: opacity 0.25s;
        }

        .team-card:hover .team-card-top-accent {
          opacity: 1;
          height: 3px;
        }

        /* Avatar */
        .team-avatar-box {
          width: clamp(86px, 11vw, 120px);
          height: clamp(86px, 11vw, 120px);
          border-radius: 18px;
          overflow: hidden;
          margin-bottom: clamp(12px, 2vw, 16px);
          position: relative;
          background: rgba(255, 255, 255, 0.06);
          border: 2px solid rgba(255, 255, 255, 0.12);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
          transition: border-color 0.25s ease, transform 0.25s ease;
        }

        .team-card:hover .team-avatar-box {
          border-color: var(--member-color);
          transform: scale(1.03);
        }

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

        .team-card:hover .team-avatar-img {
          transform: scale(1.08);
        }

        .team-avatar-zoom-btn {
          position: absolute;
          inset: 0;
          display: flex;
          align-items: center;
          justify-content: center;
          background: rgba(3, 7, 18, 0.6);
          backdrop-filter: blur(4px);
          -webkit-backdrop-filter: blur(4px);
          
          transition: opacity 0.25s ease;
          color: #ffffff;
        }

        .team-card:hover .team-avatar-zoom-btn {
          opacity: 1;
        }

        .team-zoom-icon-pill {
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: var(--member-color);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
        }

        /* Content */
        .team-member-name {
          font-size: clamp(0.95rem, 1.2vw, 1.15rem);
          font-weight: 800;
          color: #ffffff;
          margin-bottom: 4px;
          line-height: 1.2;
        }

        .team-member-role {
          font-size: clamp(0.68rem, 0.9vw, 0.78rem);
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
          color: var(--member-color);
          margin-bottom: 8px;
          line-height: 1.3;
        }

        .team-member-bio {
          font-size: clamp(0.75rem, 0.95vw, 0.82rem);
          color: #94a3b8;
          line-height: 1.5;
          margin-bottom: 12px;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          overflow: hidden;
        }

        .team-member-divider {
          width: 28px;
          height: 2px;
          border-radius: 2px;
          background: var(--member-color);
          .8;
          margin-top: auto;
        }

        /* Modal Styles */
        .team-modal-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.82);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 9999;
          padding: clamp(14px, 3vw, 24px);
          animation: teamOverlayFade 0.2s ease-out;
        }

        .team-modal-card {
          position: relative;
          background: #0d1322;
          border: 1px solid var(--modal-color);
          border-radius: 24px;
          overflow: hidden;
          width: 100%;
          max-width: 440px;
          max-height: 88vh;
          overflow-y: auto;
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7), 0 0 30px rgba(99, 102, 241, 0.2);
          animation: teamFadeIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .team-modal-close {
          position: absolute;
          top: 14px;
          right: 14px;
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: rgba(3, 7, 18, 0.75);
          border: 1px solid rgba(255, 255, 255, 0.15);
          color: #ffffff;
          cursor: pointer;
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 10;
          transition: all 0.2s ease;
        }

        .team-modal-close:hover {
          background: rgba(255, 255, 255, 0.2);
          transform: scale(1.08);
        }

        .team-modal-img-wrap {
          width: 100%;
          height: clamp(220px, 35vh, 290px);
          overflow: hidden;
          position: relative;
          background: #000000;
        }

        .team-modal-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }

        .team-modal-img-gradient {
          position: absolute;
          inset: 0;
          background: linear-gradient(180deg, transparent 40%, #0d1322 100%);
        }

        .team-modal-info {
          padding: clamp(18px, 4vw, 24px);
        }

        .team-modal-name {
          font-size: clamp(1.3rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 4px;
          line-height: 1.15;
        }

        .team-modal-role {
          font-size: 0.85rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          color: var(--modal-color);
          display: flex;
          align-items: center;
          gap: 6px;
          margin-bottom: 14px;
        }

        .team-modal-bio {
          font-size: 0.9rem;
          color: #cbd5e1;
          line-height: 1.65;
          margin-bottom: 20px;
        }

        .team-modal-skills-title {
          font-size: 0.74rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #94a3b8;
          margin-bottom: 10px;
        }

        .team-modal-skills-list {
          display: flex;
          flex-wrap: wrap;
          gap: 8px;
          margin-bottom: 22px;
        }

        .team-modal-skill-pill {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(255, 255, 255, 0.06);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #f1f5f9;
          font-size: 0.78rem;
          font-weight: 600;
          padding: 5px 12px;
          border-radius: 50px;
        }

        .team-modal-cta {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          width: 100%;
          padding: 12px 20px;
          border-radius: 12px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          text-decoration: none;
          font-size: 0.92rem;
          font-weight: 700;
          border: none;
          cursor: pointer;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.35);
          transition: all 0.2s ease;
        }

        .team-modal-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(24, 119, 242, 0.5);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1100px) {
          .team-grid {
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
          }
        }

        @media (max-width: 768px) {
          .team-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 14px;
          }

          .team-filter-bar {
            gap: 6px;
          }

          .team-filter-btn {
            padding: 6px 14px;
            font-size: 0.76rem;
          }
        }

        @media (max-width: 480px) {
          .team-section {
            padding: 40px 12px;
          }

          .team-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          .team-card {
            padding: 14px 10px;
            border-radius: 16px;
          }

          .team-avatar-box {
            width: 76px;
            height: 76px;
            border-radius: 14px;
            margin-bottom: 10px;
          }

          .team-member-name {
            font-size: 0.88rem;
          }

          .team-member-role {
            font-size: 0.65rem;
            margin-bottom: 6px;
          }

          .team-member-bio {
            font-size: 0.72rem;
            line-height: 1.4;
            margin-bottom: 8px;
          }

          .team-modal-card {
            border-radius: 20px;
          }
        }

        @media (max-width: 360px) {
          .team-grid {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .team-section {
          background: #f8fafc;
        }

        [data-theme="light"] .team-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .team-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .team-title {
          color: #0f172a;
        }

        [data-theme="light"] .team-subtitle {
          color: #475569;
        }

        [data-theme="light"] .team-filter-btn {
          background: rgba(0, 0, 0, 0.04);
          border-color: rgba(0, 0, 0, 0.08);
          color: #334155;
        }

        [data-theme="light"] .team-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .team-member-name {
          color: #0f172a;
        }

        [data-theme="light"] .team-member-bio {
          color: #64748b;
        }

        [data-theme="light"] .team-modal-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.1);
          box-shadow: 0 24px 60px rgba(0, 0, 0, 0.15);
        }

        [data-theme="light"] .team-modal-name {
          color: #0f172a;
        }

        [data-theme="light"] .team-modal-bio {
          color: #475569;
        }

        [data-theme="light"] .team-modal-skill-pill {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #1e293b;
        }

/* SOURCE: reviews.html */
/* ============================================================
           REVIEWS COMPONENT STYLES
           ============================================================ */

        @keyframes reviewsFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes reviewsScaleIn {
          from {  transform: scale(0.92); }
          to { opacity: 1; transform: scale(1); }
        }

        .reviews-section {
          position: relative;
          padding: clamp(48px, 8vw, 100px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .reviews-watermark {
          position: absolute;
          top: 25%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        /* Section Header */
        .reviews-header {
          text-align: center;
          margin-bottom: clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .reviews-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .reviews-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .reviews-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .reviews-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* Trust Summary Bar */
        .reviews-trust-bar {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: clamp(8px, 1.5vw, 16px);
          max-width: 1000px;
          margin: 0 auto clamp(28px, 4vw, 44px);
          position: relative;
          z-index: 1;
        }

        .reviews-trust-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 16px;
          padding: clamp(12px, 2vw, 16px) clamp(10px, 1.5vw, 14px);
          display: flex;
          flex-direction: column;
          align-items: center;
          text-align: center;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .reviews-trust-card:hover {
          transform: translateY(-2px);
          border-color: rgba(99, 102, 241, 0.35);
        }

        .reviews-trust-num {
          font-size: clamp(1.2rem, 2vw, 1.6rem);
          font-weight: 900;
          color: #ffffff;
          display: flex;
          align-items: center;
          gap: 4px;
          line-height: 1;
          margin-bottom: 4px;
        }

        .reviews-trust-lbl {
          font-size: clamp(0.6rem, 0.8vw, 0.72rem);
          font-weight: 700;
          color: #94a3b8;
          text-transform: uppercase;
          letter-spacing: 0.6px;
        }

        /* Mobile View Mode Switcher */
        .reviews-view-toggle {
          display: none;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin-bottom: 20px;
          position: relative;
          z-index: 1;
        }

        .reviews-toggle-btn {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #94a3b8;
          padding: 6px 14px;
          border-radius: 50px;
          font-size: 0.76rem;
          font-weight: 600;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .reviews-toggle-btn.is-active {
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          border-color: transparent;
        }

        /* Reviews Grid */
        .reviews-grid-wrap {
          max-width: 1360px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        .reviews-grid {
          display: grid;
          grid-template-columns: repeat(5, 1fr);
          gap: clamp(10px, 1.8vw, 20px);
        }

        .reviews-card {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.09);
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
          cursor: pointer;
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease, border-color 0.3s ease;
          display: flex;
          flex-direction: column;
        }

        .reviews-card:hover {
          transform: translateY(-5px) scale(1.02);
          border-color: rgba(99, 102, 241, 0.5);
          box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(99, 102, 241, 0.2);
        }

        .reviews-img-container {
          position: relative;
          width: 100%;
          aspect-ratio: 3 / 4;
          overflow: hidden;
          background: #0d1322;
        }

        .reviews-card-img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          object-position: center top;
          transition: transform 0.4s ease;
        }

        .reviews-card:hover .reviews-card-img {
          transform: scale(1.06);
        }

        .reviews-overlay {
          position: absolute;
          inset: 0;
          background: rgba(3, 7, 18, 0.55);
          backdrop-filter: blur(2px);
          -webkit-backdrop-filter: blur(2px);
          display: flex;
          align-items: center;
          justify-content: center;
          
          transition: opacity 0.25s ease;
        }

        .reviews-card:hover .reviews-overlay {
          opacity: 1;
        }

        .reviews-zoom-pill {
          width: 40px;
          height: 40px;
          border-radius: 50%;
          background: #1877f2;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
        }

        .reviews-card-footer {
          padding: 10px 12px;
          background: rgba(10, 15, 30, 0.7);
          border-top: 1px solid rgba(255, 255, 255, 0.06);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 6px;
        }

        .reviews-card-tag {
          font-size: 0.65rem;
          font-weight: 700;
          color: #818cf8;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .reviews-card-verified {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          font-size: 0.62rem;
          font-weight: 700;
          color: #10b981;
        }

        /* Mobile Snap Slider */
        .reviews-mobile-slider {
          display: none;
          overflow-x: auto;
          scroll-snap-type: x mandatory;
          scroll-behavior: smooth;
          -webkit-overflow-scrolling: touch;
          gap: 12px;
          padding: 6px 0 16px;
          scrollbar-width: none;
        }

        .reviews-mobile-slider::-webkit-scrollbar {
          display: none;
        }

        .reviews-mobile-slide {
          flex: 0 0 calc(85vw - 20px);
          max-width: 320px;
          scroll-snap-align: center;
          border-radius: 18px;
          overflow: hidden;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.1);
          cursor: pointer;
        }

        .reviews-mobile-slide-img {
          width: 100%;
          aspect-ratio: 3 / 4;
          object-fit: cover;
          object-position: center top;
          display: block;
        }

        .reviews-dots {
          display: none;
          align-items: center;
          justify-content: center;
          gap: 6px;
          margin-top: 14px;
        }

        .reviews-dot {
          width: 7px;
          height: 7px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.2);
          border: none;
          padding: 0;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .reviews-dot.is-active {
          width: 22px;
          border-radius: 10px;
          background: #6366f1;
        }

        /* Lightbox Modal */
        .reviews-lightbox-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          display: flex;
          align-items: center;
          justify-content: center;
          z-index: 99999;
          padding: clamp(12px, 3vw, 24px);
          animation: reviewsFadeIn 0.2s ease-out;
        }

        .reviews-lightbox-close {
          position: absolute;
          top: 16px;
          right: 16px;
          width: 42px;
          height: 42px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          z-index: 100;
        }

        .reviews-lightbox-close:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .reviews-lightbox-content {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: clamp(8px, 2vw, 16px);
          width: 100%;
          max-width: 680px;
          animation: reviewsScaleIn 0.25s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .reviews-lightbox-nav {
          width: clamp(38px, 4.5vw, 48px);
          height: clamp(38px, 4.5vw, 48px);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          border: 1px solid rgba(255, 255, 255, 0.2);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          flex-shrink: 0;
        }

        .reviews-lightbox-nav:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: scale(1.08);
        }

        .reviews-lightbox-frame {
          position: relative;
          border-radius: 18px;
          overflow: hidden;
          background: #000000;
          border: 2px solid rgba(99, 102, 241, 0.4);
          box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85);
          max-width: 100%;
          display: flex;
          flex-direction: column;
        }

        .reviews-lightbox-img {
          width: 100%;
          max-height: 72vh;
          object-fit: contain;
          display: block;
        }

        .reviews-lightbox-caption {
          padding: 12px 18px;
          background: rgba(10, 15, 30, 0.95);
          border-top: 1px solid rgba(255, 255, 255, 0.1);
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 12px;
          flex-wrap: wrap;
        }

        .reviews-lightbox-info {
          display: flex;
          align-items: center;
          gap: 8px;
          flex: 1;
        }

        .reviews-lightbox-badge {
          font-size: 0.7rem;
          font-weight: 700;
          padding: 3px 8px;
          border-radius: 5px;
          background: #1877f2;
          color: #ffffff;
        }

        .reviews-lightbox-title {
          font-size: 0.84rem;
          font-weight: 600;
          color: #f1f5f9;
        }

        .reviews-lightbox-counter {
          font-size: 0.75rem;
          color: #94a3b8;
          font-weight: 700;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1200px) {
          .reviews-grid {
            grid-template-columns: repeat(4, 1fr);
          }
        }

        @media (max-width: 900px) {
          .reviews-grid {
            grid-template-columns: repeat(3, 1fr);
          }
        }

        @media (max-width: 640px) {
          .reviews-trust-bar {
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
          }

          .reviews-view-toggle {
            display: flex;
          }

          /* Grid View on Mobile */
          .reviews-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 10px;
          }

          /* If in carousel mode on mobile */
          .reviews-grid.mode-carousel {
            display: none;
          }

          .reviews-mobile-slider.mode-carousel {
            display: flex;
          }

          .reviews-dots.mode-carousel {
            display: flex;
          }
        }

        @media (max-width: 480px) {
          .reviews-section {
            padding: 40px 12px;
          }

          .reviews-grid {
            gap: 8px;
          }

          .reviews-card {
            border-radius: 14px;
          }

          .reviews-card-footer {
            padding: 6px 8px;
          }

          .reviews-card-tag {
            font-size: 0.58rem;
          }

          .reviews-card-verified {
            font-size: 0.56rem;
          }

          .reviews-lightbox-nav {
            display: none;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .reviews-section {
          background: #f8fafc;
        }

        [data-theme="light"] .reviews-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .reviews-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .reviews-title {
          color: #0f172a;
        }

        [data-theme="light"] .reviews-subtitle {
          color: #475569;
        }

        [data-theme="light"] .reviews-trust-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .reviews-trust-val {
          color: #0f172a;
        }

        [data-theme="light"] .reviews-trust-lbl {
          color: #64748b;
        }

        [data-theme="light"] .reviews-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .reviews-card-footer {
          background: #f8fafc;
        }

        [data-theme="light"] .reviews-card-name {
          color: #0f172a;
        }

/* SOURCE: reviews.html */
/* ============================================================
           CONTACT COMPONENT STYLES
           ============================================================ */

        @keyframes contactPulse {
          0%, 100% { transform: scale(1); }
          50% { transform: scale(1.04); }
        }

        @keyframes contactCheckAnim {
          0% { transform: scale(0);  }
          60% { transform: scale(1.15); opacity: 1; }
          100% { transform: scale(1); opacity: 1; }
        }

        .contact-section {
          position: relative;
          padding: clamp(48px, 8vw, 110px) clamp(16px, 4vw, 60px);
          background: #030712;
          overflow: hidden;
          width: 100%;
        }

        .contact-watermark {
          position: absolute;
          top: 20%;
          left: 50%;
          transform: translate(-50%, -50%);
          font-family: 'Outfit', sans-serif;
          font-size: clamp(60px, 14vw, 240px);
          font-weight: 900;
          color: transparent;
          -webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.02);
          letter-spacing: clamp(10px, 2vw, 24px);
          white-space: nowrap;
          pointer-events: none;
          user-select: none;
          z-index: 0;
        }

        .contact-orb-1 {
          position: absolute;
          width: clamp(300px, 40vw, 600px);
          height: clamp(300px, 40vw, 600px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(99, 102, 241, 0.15), transparent 70%);
          filter: blur(90px);
          top: -100px;
          left: 5%;
          pointer-events: none;
        }

        .contact-orb-2 {
          position: absolute;
          width: clamp(280px, 35vw, 500px);
          height: clamp(280px, 35vw, 500px);
          border-radius: 50%;
          background: radial-gradient(circle, rgba(249, 115, 22, 0.12), transparent 70%);
          filter: blur(90px);
          bottom: 5%;
          right: 5%;
          pointer-events: none;
        }

        /* Section Header */
        .contact-header {
          text-align: center;
          margin-bottom: clamp(32px, 5vw, 56px);
          position: relative;
          z-index: 1;
        }

        .contact-tag {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(99, 102, 241, 0.12);
          border: 1px solid rgba(99, 102, 241, 0.3);
          color: #a5b4fc;
          font-size: clamp(0.68rem, 1vw, 0.75rem);
          font-weight: 700;
          letter-spacing: 2px;
          text-transform: uppercase;
          padding: 7px 18px;
          border-radius: 50px;
          margin-bottom: 16px;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.15);
        }

        .contact-title {
          font-size: clamp(1.8rem, 4vw, 3.2rem);
          font-weight: 900;
          line-height: 1.1;
          margin-bottom: 14px;
          color: #ffffff;
          letter-spacing: -0.025em;
        }

        .contact-title-span {
          background: linear-gradient(135deg, #f97316 0%, #fb923c 50%, #fbbf24 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        .contact-subtitle {
          color: #94a3b8;
          font-size: clamp(0.9rem, 1.2vw, 1.05rem);
          line-height: 1.7;
          max-width: 580px;
          margin: 0 auto;
          font-weight: 400;
        }

        /* 2-Column Grid Layout */
        .contact-grid-wrap {
          display: grid;
          grid-template-columns: 1.1fr 1.3fr;
          gap: clamp(24px, 4vw, 44px);
          max-width: 1300px;
          margin: 0 auto;
          position: relative;
          z-index: 1;
        }

        /* Left Column: Direct Info */
        .contact-info-col {
          display: flex;
          flex-direction: column;
          gap: clamp(14px, 2vw, 20px);
        }

        .contact-info-card {
          display: flex;
          align-items: flex-start;
          gap: 16px;
          padding: clamp(16px, 2.5vw, 22px);
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 18px;
          text-decoration: none;
          color: inherit;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          transition: transform 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
        }

        .contact-info-card:hover {
          transform: translateY(-3px);
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.4);
        }

        .contact-info-icon-box {
          width: 44px;
          height: 44px;
          border-radius: 12px;
          background: rgba(99, 102, 241, 0.15);
          border: 1px solid rgba(99, 102, 241, 0.25);
          color: #a5b4fc;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .contact-info-text {
          display: flex;
          flex-direction: column;
          gap: 3px;
        }

        .contact-info-label {
          font-size: 0.72rem;
          color: #94a3b8;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.6px;
        }

        .contact-info-val {
          font-size: 0.94rem;
          color: #f1f5f9;
          font-weight: 600;
          line-height: 1.45;
        }

        /* WhatsApp Direct CTA Button */
        .contact-wa-banner {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 12px;
          padding: clamp(14px, 2vw, 18px) 24px;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          color: #ffffff;
          border-radius: 16px;
          text-decoration: none;
          font-size: clamp(0.9rem, 1.2vw, 1rem);
          font-weight: 800;
          box-shadow: 0 8px 24px rgba(37, 211, 102, 0.35);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .contact-wa-banner:hover {
          transform: translateY(-2px);
          box-shadow: 0 12px 32px rgba(37, 211, 102, 0.55);
        }

        /* Interactive Map Frame with Location Pin Marker */
        .contact-map-frame {
          position: relative;
          width: 100%;
          height: clamp(230px, 26vw, 290px);
          border-radius: 18px;
          overflow: hidden;
          border: 1px solid rgba(255, 255, 255, 0.1);
          background: #090e1a;
          box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
        }

        .contact-map-iframe {
          width: 100%;
          height: 100%;
          border: none;
        }

        .contact-map-overlay-badge {
          position: absolute;
          bottom: 12px;
          left: 12px;
          right: 12px;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 12px;
          padding: 8px 12px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 10px;
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
          z-index: 2;
        }

        .contact-map-badge-icon {
          width: 28px;
          height: 28px;
          border-radius: 8px;
          background: rgba(239, 68, 68, 0.2);
          color: #ef4444;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .contact-map-badge-text {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-width: 0;
        }

        .contact-map-badge-title {
          font-size: 0.82rem;
          font-weight: 800;
          color: #ffffff;
          line-height: 1.2;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .contact-map-badge-sub {
          font-size: 0.7rem;
          color: #94a3b8;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .contact-map-badge-link {
          display: inline-flex;
          align-items: center;
          gap: 4px;
          background: rgba(99, 102, 241, 0.2);
          border: 1px solid rgba(99, 102, 241, 0.35);
          color: #818cf8;
          font-size: 0.72rem;
          font-weight: 700;
          padding: 5px 10px;
          border-radius: 8px;
          text-decoration: none;
          white-space: nowrap;
          flex-shrink: 0;
          transition: all 0.2s ease;
        }

        .contact-map-badge-link:hover {
          background: #6366f1;
          color: #ffffff;
          border-color: #6366f1;
        }

        /* Light Theme Map Badge Adaptations */
        [data-theme="light"] .contact-map-overlay-badge {
          background: rgba(255, 255, 255, 0.94);
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .contact-map-badge-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-map-badge-sub {
          color: #64748b;
        }

        [data-theme="light"] .contact-map-badge-link {
          background: #eef2ff;
          border-color: rgba(79, 70, 229, 0.25);
          color: #4f46e5;
        }

        [data-theme="light"] .contact-map-badge-link:hover {
          background: #4f46e5;
          color: #ffffff;
        }

        /* Right Column: Growth Consultation Form */
        .contact-form-card {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.09);
          border-radius: 24px;
          padding: clamp(24px, 4vw, 40px);
          backdrop-filter: blur(20px);
          -webkit-backdrop-filter: blur(20px);
          box-shadow: 0 12px 40px rgba(0, 0, 0, 0.45);
          position: relative;
        }

        .contact-form-title {
          font-size: clamp(1.25rem, 2vw, 1.55rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 6px;
          letter-spacing: -0.02em;
        }

        .contact-form-sub {
          font-size: 0.86rem;
          color: #94a3b8;
          margin-bottom: 24px;
          line-height: 1.5;
        }

        /* Form Row & Groups */
        .contact-form-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: clamp(12px, 2vw, 16px);
          margin-bottom: 16px;
        }

        .contact-form-group {
          display: flex;
          flex-direction: column;
          gap: 6px;
          margin-bottom: 16px;
        }

        .contact-label {
          font-size: 0.78rem;
          font-weight: 700;
          color: #cbd5e1;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .contact-input,
        .contact-select,
        .contact-textarea {
          width: 100%;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 12px;
          padding: 12px 16px;
          color: #ffffff;
          font-size: 0.92rem;
          font-family: inherit;
          transition: all 0.2s ease;
          box-sizing: border-box;
        }

        .contact-input:focus,
        .contact-select:focus,
        .contact-textarea:focus {
          outline: none;
          background: rgba(255, 255, 255, 0.08);
          border-color: #6366f1;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.25);
        }

        .contact-select {
          cursor: pointer;
        }

        .contact-select option {
          background: #0d1322;
          color: #ffffff;
        }

        .contact-textarea {
          resize: vertical;
          min-height: 95px;
        }

        /* Submit Button */
        .contact-submit-btn {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 14px 28px;
          border-radius: 12px;
          border: none;
          font-size: 0.95rem;
          font-weight: 800;
          cursor: pointer;
          transition: transform 0.2s ease, box-shadow 0.2s ease;
          box-shadow: 0 6px 20px rgba(24, 119, 242, 0.4);
          margin-top: 8px;
        }

        .contact-submit-btn:hover:not(:disabled) {
          transform: translateY(-2px);
          box-shadow: 0 10px 28px rgba(24, 119, 242, 0.6);
        }

        .contact-submit-btn:disabled {
          .6;
          cursor: not-allowed;
        }

        .contact-privacy-note {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 6px;
          font-size: 0.76rem;
          color: #64748b;
          margin-top: 14px;
          text-align: center;
        }

        .contact-error-msg {
          color: #f87171;
          font-size: 0.84rem;
          font-weight: 600;
          margin-bottom: 12px;
          text-align: center;
        }

        /* Success Card View */
        .contact-success-wrap {
          text-align: center;
          padding: clamp(16px, 3vw, 24px) 0;
        }

        .contact-success-icon-box {
          width: 72px;
          height: 72px;
          border-radius: 50%;
          background: rgba(16, 185, 129, 0.15);
          border: 2px solid #10b981;
          color: #10b981;
          display: flex;
          align-items: center;
          justify-content: center;
          margin: 0 auto 20px;
          animation: contactCheckAnim 0.4s cubic-bezier(0.16, 1, 0.3, 1);
        }

        .contact-success-h3 {
          font-size: clamp(1.3rem, 2.5vw, 1.7rem);
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 10px;
        }

        .contact-success-desc {
          font-size: 0.92rem;
          color: #cbd5e1;
          line-height: 1.6;
          margin-bottom: 24px;
        }

        .contact-steps-list {
          display: flex;
          flex-direction: column;
          gap: 10px;
          margin-bottom: 24px;
          text-align: left;
        }

        .contact-step-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 14px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 12px;
          font-size: 0.86rem;
          color: #e2e8f0;
        }

        .contact-step-badge {
          width: 24px;
          height: 24px;
          border-radius: 50%;
          background: #1877f2;
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          font-weight: 800;
          font-size: 0.75rem;
          flex-shrink: 0;
        }

        .contact-success-wa-btn {
          display: inline-flex;
          align-items: center;
          justify-content: center;
          gap: 9px;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          color: #ffffff;
          padding: 12px 24px;
          border-radius: 12px;
          text-decoration: none;
          font-weight: 700;
          font-size: 0.9rem;
          box-shadow: 0 4px 18px rgba(37, 211, 102, 0.4);
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 1024px) {
          .contact-grid-wrap {
            grid-template-columns: 1fr;
            gap: 32px;
          }

          .contact-info-col {
            order: 2;
          }

          .contact-form-card {
            order: 1;
          }
        }

        @media (max-width: 640px) {
          .contact-section {
            padding: 40px 14px;
          }

          .contact-form-card {
            padding: 20px 16px;
            border-radius: 18px;
          }

          .contact-form-row {
            grid-template-columns: 1fr;
            gap: 0;
            margin-bottom: 0;
          }

          .contact-info-card {
            padding: 14px;
            gap: 12px;
          }

          .contact-info-icon-box {
            width: 38px;
            height: 38px;
          }

          .contact-info-val {
            font-size: 0.88rem;
          }

          .contact-map-frame {
            height: 220px;
          }
        }

        @media (max-width: 400px) {
          .contact-form-card {
            padding: 18px 12px;
          }

          .contact-input,
          .contact-select,
          .contact-textarea {
            padding: 10px 12px;
            font-size: 0.88rem;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .contact-section {
          background: #ffffff;
        }

        [data-theme="light"] .contact-tag {
          background: rgba(99, 102, 241, 0.1);
          border-color: rgba(99, 102, 241, 0.3);
          color: #4338ca;
        }

        [data-theme="light"] .contact-watermark {
          -webkit-text-stroke: 1.5px rgba(99, 102, 241, 0.07);
        }

        [data-theme="light"] .contact-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-subtitle {
          color: #475569;
        }

        [data-theme="light"] .contact-info-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }

        [data-theme="light"] .contact-info-label {
          color: #64748b;
        }

        [data-theme="light"] .contact-info-val {
          color: #0f172a;
        }

        [data-theme="light"] .contact-map-frame {
          border-color: rgba(0, 0, 0, 0.08);
          background: #f8fafc;
        }

        [data-theme="light"] .contact-form-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .contact-form-title {
          color: #0f172a;
        }

        [data-theme="light"] .contact-form-sub {
          color: #475569;
        }

        [data-theme="light"] .contact-label {
          color: #0f172a;
          font-weight: 700;
        }

        [data-theme="light"] .contact-input,
        [data-theme="light"] .contact-select,
        [data-theme="light"] .contact-textarea {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.16);
          color: #0f172a;
        }

        [data-theme="light"] .contact-input::placeholder,
        [data-theme="light"] .contact-textarea::placeholder {
          color: #94a3b8;
        }

        [data-theme="light"] .contact-select option {
          background: #ffffff;
          color: #0f172a;
        }

        [data-theme="light"] .contact-input:focus,
        [data-theme="light"] .contact-select:focus,
        [data-theme="light"] .contact-textarea:focus {
          border-color: #6366f1;
          background: #ffffff;
          box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
        }

/* SOURCE: reviews.html */
/* ============================================================
           MODERN ULTRA-PREMIUM FOOTER STYLING
           ============================================================ */

        @keyframes waFloatPulse {
          0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
          50% { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 36px rgba(37, 211, 102, 0.65); }
        }

        @keyframes statusGlow {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { .5; transform: scale(1.25); }
        }

        @keyframes beamGlow {
          0%, 100% { .6; }
          50% { opacity: 1; }
        }

        .footer-root {
          position: relative;
          background: #030712;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          color: #f8fafc;
          width: 100%;
          overflow: hidden;
          font-family: inherit;
        }

        /* Top Ambient Glow Mesh */
        .footer-ambient-mesh {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          max-width: 1200px;
          height: 240px;
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.15) 0%, rgba(249, 115, 22, 0.06) 60%, transparent 100%);
          pointer-events: none;
          z-index: 0;
        }

        .footer-top-accent-line {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.6) 30%, rgba(249, 115, 22, 0.6) 70%, transparent 100%);
          animation: beamGlow 4s ease-in-out infinite;
        }

        .footer-main-wrap {
          position: relative;
          z-index: 1;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(48px, 6vw, 76px) clamp(16px, 4vw, 48px) clamp(24px, 3.5vw, 40px);
        }

        /* ── Main Footer Columns Grid ── */
        .footer-grid {
          display: grid;
          grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
          gap: clamp(28px, 4vw, 56px);
        }

        /* Column 1: Brand */
        .footer-brand-col {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .footer-brand-link {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          color: #ffffff;
          width: fit-content;
        }

        .footer-logo-box {
          width: 48px;
          height: 48px;
          border-radius: 14px;
          overflow: hidden;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
          border: 1.5px solid rgba(255, 255, 255, 0.15);
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .footer-brand-link:hover .footer-logo-box {
          transform: scale(1.08) rotate(3deg);
        }

        .footer-logo-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          padding: 3px;
        }

        .footer-brand-title {
          display: flex;
          flex-direction: column;
        }

        .footer-brand-name {
          font-size: 1.3rem;
          font-weight: 900;
          letter-spacing: -0.02em;
          background: linear-gradient(135deg, #ffffff 40%, #c7d2fe 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1.1;
        }

        .footer-brand-badge {
          font-size: 0.62rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1.2px;
          color: #818cf8;
        }

        .footer-tagline {
          font-size: clamp(0.88rem, 1.05vw, 0.94rem);
          font-weight: 500;
          line-height: 1.6;
          color: #94a3b8;
          margin: 0;
        }

        .footer-tagline-highlight {
          color: #f1f5f9;
          font-weight: 700;
        }

        /* Live Status Pill */
        .footer-status-pill {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 14px;
          background: rgba(16, 185, 129, 0.08);
          border: 1px solid rgba(16, 185, 129, 0.25);
          border-radius: 9999px;
          font-size: 0.76rem;
          font-weight: 700;
          color: #34d399;
          width: fit-content;
        }

        .footer-status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 10px #10b981;
          animation: statusGlow 2s infinite ease-in-out;
        }

        /* Social Icons */
        .footer-socials {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
          margin-top: 2px;
        }

        .footer-social-icon {
          width: 38px;
          height: 38px;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.09);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #cbd5e1;
          text-decoration: none;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer-social-icon:hover {
          transform: translateY(-3px) scale(1.08);
          background: var(--social-bg, rgba(99, 102, 241, 0.2));
          border-color: var(--social-color, #6366f1);
          color: var(--social-color, #ffffff);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
        }

        /* Nav Columns */
        .footer-nav-col {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .footer-col-title {
          font-size: 0.88rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #ffffff;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .footer-col-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #6366f1;
        }

        .footer-nav-link {
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          width: fit-content;
          gap: 8px;
          padding: 3px 0;
        }

        .footer-nav-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-service-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          padding: 3px 0;
        }

        .footer-service-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-nav-tag {
          font-size: 0.62rem;
          font-weight: 800;
          padding: 2px 7px;
          border-radius: 50px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .footer-nav-tag.hot {
          background: rgba(249, 115, 22, 0.15);
          color: #fb923c;
          border: 1px solid rgba(249, 115, 22, 0.3);
        }

        .footer-nav-tag.pro {
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .footer-nav-tag.lead {
          background: rgba(16, 185, 129, 0.15);
          color: #34d399;
          border: 1px solid rgba(16, 185, 129, 0.3);
        }

        /* Contact Items */
        .footer-contact-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .footer-contact-card {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 10px 12px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 12px;
          text-decoration: none;
          color: #cbd5e1;
          transition: all 0.2s ease;
        }

        .footer-contact-card:hover {
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.35);
          color: #ffffff;
          transform: translateY(-2px);
        }

        .footer-contact-icon-box {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-top: 1px;
        }

        .footer-contact-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .footer-contact-label {
          font-size: 0.68rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: #64748b;
        }

        .footer-contact-val {
          font-size: 0.84rem;
          font-weight: 600;
          line-height: 1.4;
          color: #f1f5f9;
        }

        /* ── Divider ── */
        .footer-divider {
          height: 1px;
          width: 100%;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.3) 50%, transparent 100%);
          margin: clamp(36px, 4vw, 48px) 0 clamp(20px, 3vw, 28px);
        }

        /* ── Bottom Bar ── */
        .footer-bottom-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          flex-wrap: wrap;
        }

        .footer-copy-text {
          font-size: 0.82rem;
          color: #64748b;
          margin: 0;
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .footer-legal-links {
          display: flex;
          align-items: center;
          gap: clamp(14px, 2vw, 24px);
          flex-wrap: wrap;
        }

        .footer-legal-btn {
          background: none;
          border: none;
          color: #64748b;
          font-size: 0.8rem;
          cursor: pointer;
          transition: color 0.2s ease;
          padding: 2px 0;
          font-family: inherit;
          position: relative;
        }

        .footer-legal-btn:hover {
          color: #cbd5e1;
        }

        .footer-back-to-top {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          position: relative;
          z-index: 10;
          transition: all 0.2s ease;
          font-family: inherit;
          outline: none;
          user-select: none;
        }

        .footer-back-to-top:hover {
          background: rgba(99, 102, 241, 0.2);
          border-color: rgba(99, 102, 241, 0.4);
          color: #ffffff;
          transform: translateY(-2px);
        }

        /* ── Floating WhatsApp Widget ── */
        .footer-wa-float {
          position: fixed;
          bottom: calc(20px + env(safe-area-inset-bottom, 0px));
          right: 20px;
          width: 54px;
          height: 54px;
          border-radius: 50%;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          z-index: 999;
          cursor: pointer;
          text-decoration: none;
          box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
          animation: waFloatPulse 2.5s ease-in-out infinite;
          transition: transform 0.25s ease;
        }

        .footer-wa-float:hover {
          transform: scale(1.12) !important;
        }

        /* ============================================================
           LIGHT THEME ADAPTATIONS
           ============================================================ */
        [data-theme="light"] .footer-root {
          background: #ffffff;
          border-top-color: rgba(0, 0, 0, 0.08);
          color: #0f172a;
        }

        [data-theme="light"] .footer-ambient-mesh {
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.1) 0%, rgba(249, 115, 22, 0.04) 60%, transparent 100%);
        }

        [data-theme="light"] .footer-brand-name {
          background: linear-gradient(135deg, #0f172a 40%, #4338ca 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        [data-theme="light"] .footer-tagline {
          color: #64748b;
        }

        [data-theme="light"] .footer-tagline-highlight {
          color: #0f172a;
        }

        [data-theme="light"] .footer-social-icon {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-social-icon:hover {
          background: var(--social-bg, #eef2ff);
          border-color: var(--social-color, #4f46e5);
          color: var(--social-color, #4f46e5);
        }

        [data-theme="light"] .footer-col-title {
          color: #0f172a;
        }

        [data-theme="light"] .footer-nav-link,
        [data-theme="light"] .footer-service-link {
          color: #64748b;
        }

        [data-theme="light"] .footer-nav-link:hover,
        [data-theme="light"] .footer-service-link:hover {
          color: #4f46e5;
        }

        [data-theme="light"] .footer-contact-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
          color: #334155;
        }

        [data-theme="light"] .footer-contact-card:hover {
          background: #f1f5f9;
          border-color: rgba(79, 70, 229, 0.3);
          color: #0f172a;
        }

        [data-theme="light"] .footer-contact-val {
          color: #0f172a;
        }

        [data-theme="light"] .footer-divider {
          background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, 0.2) 50%, transparent 100%);
        }

        [data-theme="light"] .footer-copy-text,
        [data-theme="light"] .footer-legal-btn {
          color: #64748b;
        }

        [data-theme="light"] .footer-legal-btn:hover {
          color: #0f172a;
        }

        [data-theme="light"] .footer-back-to-top {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-back-to-top:hover {
          background: #eef2ff;
          border-color: rgba(79, 70, 229, 0.3);
          color: #4f46e5;
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS
           ============================================================ */
        @media (max-width: 1100px) {
          .footer-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
          }
        }

        @media (max-width: 600px) {
          .footer-grid {
            grid-template-columns: 1fr;
            gap: 32px;
          }

          .footer-bottom-bar {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 16px;
          }

          .footer-legal-links {
            justify-content: center;
            gap: 14px;
          }

          .footer-wa-float {
            width: 48px;
            height: 48px;
            bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            right: 16px;
          }
        }

/* SOURCE: reviews.html */
.marquee-section {
          background: linear-gradient(90deg, #1a2aff 0%, #0d1499 25%, #1a2aff 50%, #0d1499 75%, #1a2aff 100%);
          background-size: 200% 100%;
          animation: stripShift 8s linear infinite;
          padding: 13px 0;
          overflow: hidden;
          position: relative;
          z-index: 999;
          box-shadow: 0 4px 32px rgba(26,42,255,0.45), 0 -1px 0 rgba(255,255,255,0.08);
        }

        @keyframes stripShift {
          0% { background-position: 0% 0%; }
          100% { background-position: 200% 0%; }
        }

        /* Top shimmer */
        .marquee-section::before {
          content: '';
          position: absolute; 
          top: 0; 
          left: 0; 
          right: 0; 
          height: 1px;
          background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
          pointer-events: none;
        }

        .marquee-track { 
          overflow: hidden; 
          white-space: nowrap; 
          width: 100%;
        }

        .marquee-inner {
          display: inline-flex;
          align-items: center;
          width: max-content;
          animation: marqueeScroll 30s linear infinite;
          will-change: transform;
        }
        .marquee-inner:hover { 
          animation-play-state: paused; 
        }

        .marquee-item {
          display: inline-flex; 
          align-items: center; 
          gap: 9px;
          font-family: 'Space Grotesk', sans-serif;
          font-size: 0.72rem; 
          font-weight: 800;
          color: #ffffff;
          letter-spacing: 1.2px;
          padding: 0 30px;
          white-space: nowrap;
          text-transform: uppercase;
          text-shadow: 0 1px 8px rgba(0,0,0,0.2);
          position: relative;
          flex-shrink: 0;
        }

        .marquee-item::after {
          content: '◆';
          position: absolute; 
          right: 0;
          font-size: 0.38rem;
          color: rgba(255,255,255,0.4);
          transform: translateX(50%);
        }

        .marquee-item svg {
          color: #fff;
          .9;
          flex-shrink: 0;
        }

        @keyframes marqueeScroll {
          0% { transform: translateX(0); }
          100% { transform: translateX(-50%); }
        }

        @media (max-width: 480px) {
          .marquee-section { padding: 11px 0; }
          .marquee-item { font-size: 0.64rem; padding: 0 20px; }
        }

/* SOURCE: service.html */
/* ============================================================
           NAVBAR COMPONENT STYLES
           ============================================================ */

        @keyframes navFadeIn {
          from {  }
          to { opacity: 1; }
        }

        @keyframes navSlideIn {
          from { transform: translateX(100%); }
          to { transform: translateX(0); }
        }

        @keyframes navDropdownFade {
          from {  transform: translateY(8px) scale(0.98); }
          to { opacity: 1; transform: translateY(0) scale(1); }
        }

        .navbar-header {
          position: sticky;
          top: 0;
          left: 0;
          right: 0;
          z-index: 1000;
          width: 100%;
          background: rgba(3, 7, 18, 0.75);
          backdrop-filter: blur(16px);
          -webkit-backdrop-filter: blur(16px);
          border-bottom: 1px solid rgba(255, 255, 255, 0.06);
          transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
        }

        .navbar-header.is-scrolled {
          background: rgba(3, 7, 18, 0.92);
          border-bottom: 1px solid rgba(99, 102, 241, 0.2);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
        }

        .navbar-container {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(10px, 1.5vw, 14px) clamp(16px, 3.5vw, 40px);
          gap: 16px;
        }

        /* Brand Logo Area */
        .navbar-brand {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          color: #ffffff;
          flex-shrink: 0;
          z-index: 10;
        }

        .navbar-logo-wrap {
          width: clamp(38px, 4vw, 44px);
          height: clamp(38px, 4vw, 44px);
          border-radius: 12px;
          overflow: hidden;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 4px 16px rgba(99, 102, 241, 0.25);
          border: 1.5px solid rgba(255, 255, 255, 0.15);
          transition: transform 0.25s ease, box-shadow 0.25s ease;
        }

        .navbar-brand:hover .navbar-logo-wrap {
          transform: scale(1.05);
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.45);
        }

        .navbar-logo-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          padding: 3px;
        }

        .navbar-brand-text {
          display: flex;
          flex-direction: column;
        }

        .navbar-brand-name {
          font-size: clamp(1.05rem, 1.5vw, 1.25rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          background: linear-gradient(135deg, #ffffff 40%, #c7d2fe 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1.1;
        }

        .navbar-brand-badge {
          font-size: 0.6rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1.2px;
          color: #818cf8;
        }

        /* Desktop Navigation Links */
        .navbar-desktop-nav {
          display: flex;
          align-items: center;
          list-style: none;
          gap: 4px;
          padding: 0;
          margin: 0;
        }

        .navbar-link {
          color: #cbd5e1;
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 600;
          padding: 8px 13px;
          border-radius: 8px;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          gap: 7px;
          cursor: pointer;
        }

        .navbar-nav-icon {
          .75;
          font-size: 15px;
          flex-shrink: 0;
          transition: transform 0.2s ease, opacity 0.2s ease, color 0.2s ease;
        }

        .navbar-link:hover {
          color: #ffffff;
          background: rgba(255, 255, 255, 0.06);
        }

        .navbar-link:hover .navbar-nav-icon {
          opacity: 1;
          color: var(--blue-bright, #818cf8);
          transform: translateY(-1px);
        }

        /* Desktop Services Dropdown */
        .navbar-dropdown-wrapper {
          position: relative;
        }

        .navbar-dropdown-trigger {
          display: inline-flex;
          align-items: center;
          gap: 6px;
        }

        .navbar-chevron {
          transition: transform 0.25s ease;
        }

        .navbar-dropdown-menu {
          position: absolute;
          top: calc(100% + 8px);
          left: 50%;
          transform: translateX(-50%);
          background: rgba(3, 7, 18, 0.96);
          backdrop-filter: blur(24px);
          -webkit-backdrop-filter: blur(24px);
          border: 1px solid rgba(99, 102, 241, 0.25);
          border-radius: 16px;
          min-width: 320px;
          padding: 8px;
          display: flex;
          flex-direction: column;
          gap: 4px;
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 30px rgba(99, 102, 241, 0.15);
          animation: navDropdownFade 0.2s cubic-bezier(0.4, 0, 0.2, 1);
          z-index: 100;
        }

        .navbar-dropdown-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 12px;
          border-radius: 10px;
          text-decoration: none;
          color: #f1f5f9;
          transition: all 0.2s ease;
          background: transparent;
        }

        .navbar-dropdown-item:hover {
          background: rgba(255, 255, 255, 0.06);
          transform: translateX(4px);
        }

        .navbar-dropdown-icon {
          width: 34px;
          height: 34px;
          border-radius: 10px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .navbar-dropdown-text {
          display: flex;
          flex-direction: column;
          flex: 1;
          min-width: 0;
        }

        .navbar-dropdown-label {
          font-size: 0.88rem;
          font-weight: 700;
          color: #ffffff;
        }

        .navbar-dropdown-tag {
          font-size: 0.72rem;
          font-weight: 500;
        }

        .navbar-dropdown-arrow {
          flex-shrink: 0;
          
          transform: translateX(-4px);
          transition: all 0.2s ease;
        }

        .navbar-dropdown-item:hover .navbar-dropdown-arrow {
          opacity: 1;
          transform: translateX(0);
        }

        /* Desktop Actions */
        .navbar-desktop-actions {
          display: flex;
          align-items: center;
          gap: 12px;
        }

        .navbar-btn-cta {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 10px 22px;
          border-radius: 10px;
          font-size: 0.88rem;
          font-weight: 700;
          text-decoration: none;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.35);
          transition: all 0.25s ease;
          border: none;
          cursor: pointer;
          white-space: nowrap;
        }

        .navbar-btn-cta:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 24px rgba(24, 119, 242, 0.5);
        }

        /* Mobile Controls */
        .navbar-mobile-controls {
          display: none;
          align-items: center;
          gap: 10px;
        }

        .navbar-mobile-cta {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          padding: 7px 14px;
          border-radius: 8px;
          font-size: 0.78rem;
          font-weight: 700;
          text-decoration: none;
          white-space: nowrap;
        }

        .navbar-hamburger {
          width: 40px;
          height: 40px;
          border-radius: 10px;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
          padding: 0;
        }

        .navbar-hamburger:hover,
        .navbar-hamburger:active {
          background: rgba(255, 255, 255, 0.16);
          border-color: rgba(99, 102, 241, 0.4);
        }

        /* Mobile Drawer */
        .navbar-drawer-backdrop {
          position: fixed;
          inset: 0;
          background: rgba(0, 0, 0, 0.75);
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          z-index: 9998;
          animation: navFadeIn 0.22s ease-out;
        }

        .navbar-drawer-panel {
          position: fixed;
          top: 0;
          right: 0;
          bottom: 0;
          width: min(380px, 86vw);
          height: 100vh;
          height: 100dvh;
          background: rgba(3, 7, 18, 0.98);
          border-left: 1px solid rgba(99, 102, 241, 0.25);
          z-index: 9999;
          display: flex;
          flex-direction: column;
          box-shadow: -10px 0 40px rgba(0, 0, 0, 0.8);
          animation: navSlideIn 0.28s cubic-bezier(0.16, 1, 0.3, 1);
          overflow: hidden;
        }

        .navbar-drawer-header {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 16px 20px;
          border-bottom: 1px solid rgba(255, 255, 255, 0.08);
          background: rgba(10, 15, 30, 0.5);
        }

        .navbar-drawer-close {
          width: 36px;
          height: 36px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.08);
          border: 1px solid rgba(255, 255, 255, 0.12);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .navbar-drawer-close:hover {
          background: rgba(255, 255, 255, 0.18);
          transform: scale(1.06);
        }

        .navbar-drawer-body {
          flex: 1;
          overflow-y: auto;
          padding: 16px;
          display: flex;
          flex-direction: column;
          gap: 6px;
          -webkit-overflow-scrolling: touch;
        }

        .navbar-drawer-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 12px 16px;
          color: #e2e8f0;
          text-decoration: none;
          font-size: 0.94rem;
          font-weight: 600;
          border-radius: 10px;
          transition: all 0.2s ease;
          background: transparent;
        }

        .navbar-drawer-link:hover,
        .navbar-drawer-link:active {
          background: rgba(255, 255, 255, 0.06);
          color: #ffffff;
          padding-left: 20px;
        }

        /* Mobile Accordion */
        .navbar-accordion-btn {
          display: flex;
          align-items: center;
          justify-content: space-between;
          width: 100%;
          padding: 12px 16px;
          color: #e2e8f0;
          font-size: 0.94rem;
          font-weight: 600;
          border-radius: 10px;
          background: transparent;
          border: none;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .navbar-accordion-btn.is-active {
          background: rgba(99, 102, 241, 0.12);
          color: #818cf8;
        }

        .navbar-accordion-content {
          display: flex;
          flex-direction: column;
          gap: 6px;
          padding: 6px 0 10px 10px;
          border-left: 2px solid rgba(99, 102, 241, 0.2);
          margin-left: 16px;
          margin-top: 4px;
        }

        .navbar-accordion-item {
          display: flex;
          align-items: center;
          gap: 12px;
          padding: 10px 12px;
          border-radius: 10px;
          text-decoration: none;
          color: #f1f5f9;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.05);
          transition: all 0.2s ease;
        }

        .navbar-accordion-item:hover,
        .navbar-accordion-item:active {
          background: rgba(255, 255, 255, 0.08);
          transform: translateX(3px);
        }

        /* Drawer Footer */
        .navbar-drawer-footer {
          padding: 16px 20px;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          background: rgba(10, 15, 30, 0.6);
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .navbar-drawer-whatsapp {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 10px;
          padding: 12px 18px;
          border-radius: 10px;
          background: rgba(37, 211, 102, 0.12);
          border: 1px solid rgba(37, 211, 102, 0.3);
          color: #25d366;
          text-decoration: none;
          font-size: 0.9rem;
          font-weight: 700;
          transition: all 0.2s ease;
        }

        .navbar-drawer-whatsapp:hover,
        .navbar-drawer-whatsapp:active {
          background: rgba(37, 211, 102, 0.22);
          transform: translateY(-1px);
        }

        .navbar-drawer-cta {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 13px 20px;
          border-radius: 10px;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          text-decoration: none;
          font-size: 0.92rem;
          font-weight: 700;
          box-shadow: 0 4px 16px rgba(24, 119, 242, 0.35);
          transition: all 0.2s ease;
        }

        .navbar-drawer-cta:hover,
        .navbar-drawer-cta:active {
          transform: translateY(-1px);
          box-shadow: 0 6px 20px rgba(24, 119, 242, 0.5);
        }

        /* ============================================================
           MEDIA QUERIES (Mobile, Tablet, Desktop)
           ============================================================ */

        @media (max-width: 992px) {
          .navbar-desktop-nav,
          .navbar-desktop-actions {
            display: none !important;
          }

          .navbar-mobile-controls {
            display: flex !important;
          }
        }

        @media (max-width: 480px) {
          .navbar-container {
            padding: 8px 14px;
          }

          .navbar-brand-name {
            font-size: 1.05rem;
          }

          .navbar-brand-badge {
            display: none;
          }

          .navbar-mobile-cta {
            padding: 6px 10px;
            font-size: 0.74rem;
          }

          .navbar-hamburger {
            width: 36px;
            height: 36px;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .navbar-header {
          background: rgba(255, 255, 255, 0.94);
          border-bottom-color: rgba(0, 0, 0, 0.09);
        }

        [data-theme="light"] .navbar-header.is-scrolled {
          background: rgba(255, 255, 255, 0.98);
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .navbar-brand-name {
          background: linear-gradient(135deg, #0f172a 30%, #312e81 100%);
          -webkit-background-clip: text;
          background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        [data-theme="light"] .navbar-brand-badge {
          color: #4f46e5;
        }

        [data-theme="light"] .navbar-link {
          color: #0f172a;
          font-weight: 700;
        }

        [data-theme="light"] .navbar-link:hover {
          color: #4f46e5;
          background: rgba(0, 0, 0, 0.05);
        }

        [data-theme="light"] .navbar-dropdown-menu {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.1);
          box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
        }

        [data-theme="light"] .navbar-dropdown-item {
          color: #0f172a;
        }

        [data-theme="light"] .navbar-dropdown-item:hover {
          background: #f1f5f9;
        }

        [data-theme="light"] .navbar-dropdown-label {
          color: #0f172a;
        }

        [data-theme="light"] .navbar-hamburger {
          background: rgba(0, 0, 0, 0.05);
          border-color: rgba(0, 0, 0, 0.1);
          color: #0f172a;
        }

        [data-theme="light"] .navbar-drawer-panel {
          background: #ffffff;
          border-left-color: rgba(0, 0, 0, 0.1);
        }

        [data-theme="light"] .navbar-drawer-header {
          border-bottom-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .navbar-drawer-close {
          background: rgba(0, 0, 0, 0.05);
          border-color: rgba(0, 0, 0, 0.1);
          color: #0f172a;
        }

        [data-theme="light"] .navbar-drawer-link {
          color: #0f172a;
        }

        [data-theme="light"] .navbar-drawer-link:hover {
          background: #f1f5f9;
        }

        [data-theme="light"] .navbar-accordion-btn {
          color: #0f172a;
        }

        [data-theme="light"] .navbar-accordion-item {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
          color: #0f172a;
        }

        [data-theme="light"] .navbar-drawer-footer {
          background: #f8fafc;
          border-top-color: rgba(0, 0, 0, 0.08);
        }

/* SOURCE: service.html */
/* ============================================================
           SERVICE DETAIL PAGE STYLES
           ============================================================ */

        @keyframes spOrbMove {
          0%, 100% { transform: translate(0, 0) scale(1); }
          50% { transform: translate(20px, -20px) scale(1.1); }
        }

        .sp-page-root {
          min-height: 100vh;
          background: #030712;
        }

        /* Hero Section */
        .sp-hero-section {
          position: relative;
          padding: clamp(48px, 8vw, 84px) clamp(16px, 5vw, 80px) clamp(44px, 7vw, 72px);
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
          color: #ffffff;
          overflow: hidden;
        }

        .sp-hero-pattern {
          position: absolute;
          inset: 0;
          background-image: radial-gradient(circle, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
          background-size: 28px 28px;
          pointer-events: none;
        }

        .sp-hero-orb-1 {
          position: absolute;
          width: clamp(300px, 45vw, 550px);
          height: clamp(300px, 45vw, 550px);
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.12);
          top: -150px;
          right: -80px;
          filter: blur(90px);
          pointer-events: none;
          animation: spOrbMove 12s ease-in-out infinite;
        }

        .sp-hero-orb-2 {
          position: absolute;
          width: clamp(250px, 35vw, 400px);
          height: clamp(250px, 35vw, 400px);
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.25);
          bottom: -100px;
          left: -60px;
          filter: blur(80px);
          pointer-events: none;
        }

        .sp-hero-container {
          max-width: 1280px;
          margin: 0 auto;
          display: grid;
          grid-template-columns: 1.3fr 0.7fr;
          gap: clamp(32px, 5vw, 60px);
          align-items: center;
          position: relative;
          z-index: 1;
        }

        .sp-back-link {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          color: rgba(255, 255, 255, 0.8);
          font-size: 0.84rem;
          font-weight: 700;
          margin-bottom: 24px;
          text-decoration: none;
          transition: color 0.2s ease;
        }

        .sp-back-link:hover {
          color: #ffffff;
        }

        .sp-service-icon-box {
          width: clamp(60px, 7vw, 76px);
          height: clamp(60px, 7vw, 76px);
          border-radius: 20px;
          background: rgba(255, 255, 255, 0.2);
          border: 1px solid rgba(255, 255, 255, 0.35);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 20px;
          backdrop-filter: blur(10px);
          -webkit-backdrop-filter: blur(10px);
          box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
        }

        .sp-service-icon-img {
          width: 60%;
          height: 60%;
          object-fit: contain;
        }

        .sp-hero-title {
          font-size: clamp(2rem, 5vw, 3.8rem);
          font-weight: 900;
          letter-spacing: -0.025em;
          line-height: 1.08;
          margin-bottom: 10px;
        }

        .sp-hero-subtitle {
          font-size: clamp(0.95rem, 1.5vw, 1.1rem);
          .85;
          margin-bottom: 16px;
          font-weight: 600;
        }

        .sp-hero-desc {
          font-size: clamp(0.88rem, 1.1vw, 1rem);
          line-height: 1.75;
          .9;
          max-width: 600px;
          margin-bottom: 28px;
        }

        .sp-hero-actions {
          display: flex;
          align-items: center;
          gap: 14px;
          flex-wrap: wrap;
        }

        .sp-hero-btn-primary {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: #ffffff;
          color: #030712;
          padding: 13px 26px;
          border-radius: 12px;
          font-size: 0.92rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
          transition: transform 0.2s ease, box-shadow 0.2s ease;
        }

        .sp-hero-btn-primary:hover {
          transform: translateY(-2px);
          box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
        }

        .sp-hero-btn-secondary {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          background: rgba(255, 255, 255, 0.15);
          border: 1px solid rgba(255, 255, 255, 0.35);
          color: #ffffff;
          padding: 13px 24px;
          border-radius: 12px;
          font-size: 0.92rem;
          font-weight: 700;
          text-decoration: none;
          backdrop-filter: blur(8px);
          -webkit-backdrop-filter: blur(8px);
          transition: all 0.2s ease;
        }

        .sp-hero-btn-secondary:hover {
          background: rgba(255, 255, 255, 0.25);
          transform: translateY(-2px);
        }

        /* Stats Column */
        .sp-stats-column {
          display: flex;
          flex-direction: column;
          gap: 14px;
        }

        .sp-stat-item-card {
          background: rgba(255, 255, 255, 0.14);
          border: 1px solid rgba(255, 255, 255, 0.25);
          border-radius: 20px;
          padding: clamp(14px, 2.5vw, 20px) clamp(16px, 3vw, 28px);
          text-align: center;
          backdrop-filter: blur(12px);
          -webkit-backdrop-filter: blur(12px);
        }

        .sp-stat-num {
          display: block;
          font-size: clamp(1.6rem, 2.5vw, 2.2rem);
          font-weight: 900;
          letter-spacing: -0.02em;
          line-height: 1.05;
        }

        .sp-stat-lbl {
          display: block;
          font-size: 0.68rem;
          font-weight: 700;
          .8;
          text-transform: uppercase;
          letter-spacing: 0.8px;
          margin-top: 4px;
        }

        /* Packages Section */
        .sp-packages-section {
          max-width: 1280px;
          margin: 0 auto;
          padding: clamp(48px, 7vw, 84px) clamp(16px, 4vw, 48px);
        }

        .sp-packages-header {
          text-align: center;
          margin-bottom: clamp(32px, 5vw, 56px);
        }

        .sp-packages-tag {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 0.72rem;
          font-weight: 700;
          letter-spacing: 1.5px;
          text-transform: uppercase;
          padding: 6px 16px;
          border-radius: 50px;
          color: #1877f2;
          background: #1877f215;
          border: 1px solid #1877f235;
          margin-bottom: 14px;
        }

        .sp-packages-title {
          font-size: clamp(1.8rem, 3.5vw, 2.8rem);
          font-weight: 900;
          color: #ffffff;
          letter-spacing: -0.02em;
          margin-bottom: 10px;
        }

        .sp-packages-desc {
          font-size: 0.94rem;
          color: #94a3b8;
          max-width: 540px;
          margin: 0 auto;
        }

        .sp-packages-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: clamp(16px, 2.5vw, 28px);
          align-items: stretch;
        }

        .sp-pkg-card {
          position: relative;
          background: rgba(255, 255, 255, 0.025);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 24px;
          padding: clamp(24px, 3.5vw, 36px) clamp(18px, 3vw, 28px);
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
          transition: transform 0.25s ease, border-color 0.25s ease;
        }

        .sp-pkg-card:hover {
          transform: translateY(-4px);
          border-color: var(--pkg-color);
        }

        .sp-pkg-card.is-popular {
          border-color: var(--pkg-color);
          box-shadow: 0 16px 45px rgba(0, 0, 0, 0.5), 0 0 24px rgba(24, 119, 242, 0.15);
        }

        .sp-pkg-popular-badge {
          position: absolute;
          top: 0;
          right: 24px;
          font-size: 0.62rem;
          font-weight: 800;
          letter-spacing: 0.5px;
          color: #ffffff;
          padding: 5px 14px;
          border-radius: 0 0 12px 12px;
        }

        .sp-pkg-header {
          margin-bottom: 22px;
        }

        .sp-pkg-tag {
          display: inline-block;
          font-size: 0.65rem;
          font-weight: 700;
          letter-spacing: 0.6px;
          text-transform: uppercase;
          padding: 4px 12px;
          border-radius: 50px;
          border: 1px solid;
          margin-bottom: 10px;
        }

        .sp-pkg-name {
          font-size: 1.5rem;
          font-weight: 900;
          color: #ffffff;
        }

        .sp-pkg-features-list {
          list-style: none;
          padding: 0;
          margin: 0 0 28px;
          display: flex;
          flex-direction: column;
          gap: 12px;
          flex: 1;
        }

        .sp-pkg-feature-item {
          display: flex;
          align-items: center;
          gap: 11px;
          font-size: 0.88rem;
          color: #cbd5e1;
        }

        .sp-pkg-check {
          width: 20px;
          height: 20px;
          border-radius: 6px;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
        }

        .sp-pkg-btn {
          width: 100%;
          padding: 13px 20px;
          border-radius: 12px;
          border: 1.5px solid;
          font-size: 0.92rem;
          font-weight: 800;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          cursor: pointer;
          transition: all 0.2s ease;
        }

        .sp-pkg-btn:hover {
          transform: translateY(-2px);
          filter: brightness(1.1);
        }

        /* Bottom CTA Banner */
        .sp-bottom-cta-banner {
          padding: clamp(48px, 6vw, 72px) clamp(20px, 4vw, 40px);
          text-align: center;
          color: #ffffff;
          position: relative;
          overflow: hidden;
          background: linear-gradient(135deg, #1877f2 0%, #0d5fd4 100%);
        }

        .sp-bottom-cta-btn {
          display: inline-flex;
          align-items: center;
          gap: 9px;
          background: #ffffff;
          color: #030712;
          padding: 14px 32px;
          border-radius: 50px;
          font-size: 0.96rem;
          font-weight: 800;
          text-decoration: none;
          box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25);
          transition: transform 0.2s ease;
        }

        .sp-bottom-cta-btn:hover {
          transform: translateY(-2px);
        }

        /* Modal Styles */
        .sp-modal-backdrop {
          position: fixed;
          inset: 0;
          z-index: 99999;
          background: rgba(3, 7, 18, 0.88);
          backdrop-filter: blur(14px);
          -webkit-backdrop-filter: blur(14px);
          display: flex;
          align-items: center;
          justify-content: center;
          padding: clamp(12px, 3vw, 24px);
        }

        .sp-modal-card {
          background: #090e1a;
          border: 1px solid rgba(255, 255, 255, 0.12);
          border-radius: 24px;
          width: 100%;
          max-width: 440px;
          overflow: hidden;
          position: relative;
          box-shadow: 0 30px 90px rgba(0, 0, 0, 0.8);
        }

        .sp-modal-close {
          position: absolute;
          top: 14px;
          right: 14px;
          z-index: 5;
          width: 34px;
          height: 34px;
          border-radius: 50%;
          background: rgba(0, 0, 0, 0.3);
          border: 1px solid rgba(255, 255, 255, 0.25);
          color: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
        }

        .sp-modal-header {
          padding: 28px 24px 20px;
          text-align: center;
          color: #ffffff;
        }

        .sp-modal-header-icon {
          font-size: 2.2rem;
          display: block;
          margin-bottom: 8px;
        }

        .sp-modal-title {
          font-size: 1.35rem;
          font-weight: 900;
          margin-bottom: 4px;
        }

        .sp-modal-subtitle {
          font-size: 0.82rem;
          .9;
        }

        .sp-modal-form {
          padding: 20px 24px 24px;
        }

        .sp-modal-form-note {
          font-size: 0.8rem;
          color: #94a3b8;
          text-align: center;
          margin-bottom: 16px;
        }

        .sp-modal-input-box {
          display: flex;
          align-items: center;
          gap: 10px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.1);
          border-radius: 12px;
          padding: 10px 14px;
          margin-bottom: 12px;
        }

        .sp-modal-input {
          border: none;
          background: transparent;
          outline: none;
          color: #ffffff;
          font-size: 0.88rem;
          width: 100%;
        }

        .sp-modal-submit-btn {
          width: 100%;
          padding: 13px;
          border-radius: 12px;
          border: none;
          color: #ffffff;
          font-size: 0.92rem;
          font-weight: 800;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          cursor: pointer;
          margin-top: 6px;
        }

        .sp-modal-success-check {
          width: 60px;
          height: 60px;
          border-radius: 50%;
          background: rgba(255, 255, 255, 0.25);
          border: 2px solid rgba(255, 255, 255, 0.6);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 1.8rem;
          font-weight: 900;
          margin: 0 auto;
        }

        .sp-modal-success-body {
          padding: 24px;
          text-align: center;
        }

        .sp-modal-success-title {
          font-size: 1.35rem;
          font-weight: 900;
          color: #ffffff;
          margin-bottom: 6px;
        }

        .sp-modal-success-text {
          font-size: 0.84rem;
          color: #94a3b8;
          line-height: 1.5;
          margin-bottom: 18px;
        }

        .sp-modal-success-grid {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 8px;
          margin-bottom: 16px;
        }

        .sp-modal-success-chip {
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.08);
          border-radius: 10px;
          padding: 8px;
          text-align: center;
        }

        .sp-modal-chip-lbl {
          display: block;
          font-size: 0.58rem;
          color: #64748b;
          text-transform: uppercase;
          font-weight: 700;
        }

        .sp-modal-chip-val {
          display: block;
          font-size: 0.82rem;
          font-weight: 800;
          color: #ffffff;
          margin-top: 2px;
        }

        .sp-modal-wa-btn {
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 8px;
          padding: 12px;
          border-radius: 12px;
          background: #25d366;
          color: #ffffff;
          font-weight: 800;
          font-size: 0.9rem;
          text-decoration: none;
          margin-bottom: 8px;
        }

        .sp-modal-close-btn {
          width: 100%;
          padding: 10px;
          border-radius: 12px;
          border: 1px solid rgba(255, 255, 255, 0.1);
          background: transparent;
          color: #94a3b8;
          font-size: 0.82rem;
          font-weight: 600;
          cursor: pointer;
        }

        /* ============================================================
           BREAKPOINTS
           ============================================================ */

        @media (max-width: 992px) {
          .sp-hero-container {
            grid-template-columns: 1fr;
            gap: 36px;
          }

          .sp-stats-column {
            flex-direction: row;
            flex-wrap: wrap;
          }

          .sp-stat-item-card {
            flex: 1 1 calc(33% - 10px);
          }

          .sp-packages-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (max-width: 680px) {
          .sp-hero-section {
            padding: 40px 16px 36px;
          }

          .sp-stats-column {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 8px;
          }

          .sp-stat-item-card {
            padding: 10px 8px;
          }

          .sp-stat-num {
            font-size: 1.3rem;
          }

          .sp-stat-lbl {
            font-size: 0.58rem;
          }

          .sp-packages-grid {
            grid-template-columns: 1fr;
            gap: 16px;
          }

          .sp-hero-actions {
            flex-direction: column;
            align-items: stretch;
          }

          .sp-hero-btn-primary,
          .sp-hero-btn-secondary {
            justify-content: center;
          }
        }

        @media (max-width: 400px) {
          .sp-stats-column {
            grid-template-columns: 1fr;
          }
        }

        /* Direct Light Theme Adaptations */
        [data-theme="light"] .sp-page-root {
          background: #f8fafc;
        }

        [data-theme="light"] .sp-packages-title {
          color: #0f172a;
        }

        [data-theme="light"] .sp-packages-desc {
          color: #64748b;
        }

        [data-theme="light"] .sp-pkg-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.08);
          box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
        }

        [data-theme="light"] .sp-pkg-name {
          color: #0f172a;
        }

        [data-theme="light"] .sp-pkg-feature-item {
          color: #334155;
        }

        [data-theme="light"] .sp-pkg-cta {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.12);
          color: #0f172a;
        }

        [data-theme="light"] .sp-pkg-cta:hover {
          background: #f1f5f9;
        }

        [data-theme="light"] .sp-modal-card {
          background: #ffffff;
          border-color: rgba(0, 0, 0, 0.1);
          box-shadow: 0 30px 90px rgba(0, 0, 0, 0.2);
        }

        [data-theme="light"] .sp-modal-form-note {
          color: #64748b;
        }

        [data-theme="light"] .sp-modal-input-box {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.12);
        }

        [data-theme="light"] .sp-modal-input {
          color: #0f172a;
        }

        [data-theme="light"] .sp-modal-success-title {
          color: #0f172a;
        }

        [data-theme="light"] .sp-modal-success-text {
          color: #64748b;
        }

        [data-theme="light"] .sp-modal-success-chip {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.08);
        }

        [data-theme="light"] .sp-modal-chip-val {
          color: #0f172a;
        }

/* SOURCE: service.html */
/* ============================================================
           MODERN ULTRA-PREMIUM FOOTER STYLING
           ============================================================ */

        @keyframes waFloatPulse {
          0%, 100% { transform: translateY(0) scale(1); box-shadow: 0 8px 24px rgba(37, 211, 102, 0.4); }
          50% { transform: translateY(-4px) scale(1.06); box-shadow: 0 16px 36px rgba(37, 211, 102, 0.65); }
        }

        @keyframes statusGlow {
          0%, 100% { opacity: 1; transform: scale(1); }
          50% { .5; transform: scale(1.25); }
        }

        @keyframes beamGlow {
          0%, 100% { .6; }
          50% { opacity: 1; }
        }

        .footer-root {
          position: relative;
          background: #030712;
          border-top: 1px solid rgba(255, 255, 255, 0.08);
          color: #f8fafc;
          width: 100%;
          overflow: hidden;
          font-family: inherit;
        }

        /* Top Ambient Glow Mesh */
        .footer-ambient-mesh {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 100%;
          max-width: 1200px;
          height: 240px;
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.15) 0%, rgba(249, 115, 22, 0.06) 60%, transparent 100%);
          pointer-events: none;
          z-index: 0;
        }

        .footer-top-accent-line {
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 1px;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.6) 30%, rgba(249, 115, 22, 0.6) 70%, transparent 100%);
          animation: beamGlow 4s ease-in-out infinite;
        }

        .footer-main-wrap {
          position: relative;
          z-index: 1;
          max-width: 1360px;
          margin: 0 auto;
          padding: clamp(48px, 6vw, 76px) clamp(16px, 4vw, 48px) clamp(24px, 3.5vw, 40px);
        }

        /* ── Main Footer Columns Grid ── */
        .footer-grid {
          display: grid;
          grid-template-columns: 1.5fr 1fr 1.2fr 1.3fr;
          gap: clamp(28px, 4vw, 56px);
        }

        /* Column 1: Brand */
        .footer-brand-col {
          display: flex;
          flex-direction: column;
          gap: 18px;
        }

        .footer-brand-link {
          display: flex;
          align-items: center;
          gap: 12px;
          text-decoration: none;
          color: #ffffff;
          width: fit-content;
        }

        .footer-logo-box {
          width: 48px;
          height: 48px;
          border-radius: 14px;
          overflow: hidden;
          background: #ffffff;
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
          border: 1.5px solid rgba(255, 255, 255, 0.15);
          transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
        }

        .footer-brand-link:hover .footer-logo-box {
          transform: scale(1.08) rotate(3deg);
        }

        .footer-logo-img {
          width: 100%;
          height: 100%;
          object-fit: contain;
          padding: 3px;
        }

        .footer-brand-title {
          display: flex;
          flex-direction: column;
        }

        .footer-brand-name {
          font-size: 1.3rem;
          font-weight: 900;
          letter-spacing: -0.02em;
          background: linear-gradient(135deg, #ffffff 40%, #c7d2fe 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
          line-height: 1.1;
        }

        .footer-brand-badge {
          font-size: 0.62rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 1.2px;
          color: #818cf8;
        }

        .footer-tagline {
          font-size: clamp(0.88rem, 1.05vw, 0.94rem);
          font-weight: 500;
          line-height: 1.6;
          color: #94a3b8;
          margin: 0;
        }

        .footer-tagline-highlight {
          color: #f1f5f9;
          font-weight: 700;
        }

        /* Live Status Pill */
        .footer-status-pill {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 6px 14px;
          background: rgba(16, 185, 129, 0.08);
          border: 1px solid rgba(16, 185, 129, 0.25);
          border-radius: 9999px;
          font-size: 0.76rem;
          font-weight: 700;
          color: #34d399;
          width: fit-content;
        }

        .footer-status-dot {
          width: 8px;
          height: 8px;
          border-radius: 50%;
          background: #10b981;
          box-shadow: 0 0 10px #10b981;
          animation: statusGlow 2s infinite ease-in-out;
        }

        /* Social Icons */
        .footer-socials {
          display: flex;
          align-items: center;
          gap: 10px;
          flex-wrap: wrap;
          margin-top: 2px;
        }

        .footer-social-icon {
          width: 38px;
          height: 38px;
          border-radius: 12px;
          background: rgba(255, 255, 255, 0.04);
          border: 1px solid rgba(255, 255, 255, 0.09);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #cbd5e1;
          text-decoration: none;
          transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }

        .footer-social-icon:hover {
          transform: translateY(-3px) scale(1.08);
          background: var(--social-bg, rgba(99, 102, 241, 0.2));
          border-color: var(--social-color, #6366f1);
          color: var(--social-color, #ffffff);
          box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
        }

        /* Nav Columns */
        .footer-nav-col {
          display: flex;
          flex-direction: column;
          gap: 10px;
        }

        .footer-col-title {
          font-size: 0.88rem;
          font-weight: 800;
          text-transform: uppercase;
          letter-spacing: 1px;
          color: #ffffff;
          margin-bottom: 8px;
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .footer-col-dot {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #6366f1;
        }

        .footer-nav-link {
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          display: inline-flex;
          align-items: center;
          justify-content: space-between;
          width: fit-content;
          gap: 8px;
          padding: 3px 0;
        }

        .footer-nav-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-service-link {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 8px;
          font-size: 0.86rem;
          color: #94a3b8;
          text-decoration: none;
          transition: all 0.2s ease;
          padding: 3px 0;
        }

        .footer-service-link:hover {
          color: #ffffff;
          transform: translateX(4px);
        }

        .footer-nav-tag {
          font-size: 0.62rem;
          font-weight: 800;
          padding: 2px 7px;
          border-radius: 50px;
          text-transform: uppercase;
          letter-spacing: 0.5px;
        }

        .footer-nav-tag.hot {
          background: rgba(249, 115, 22, 0.15);
          color: #fb923c;
          border: 1px solid rgba(249, 115, 22, 0.3);
        }

        .footer-nav-tag.pro {
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          border: 1px solid rgba(99, 102, 241, 0.3);
        }

        .footer-nav-tag.lead {
          background: rgba(16, 185, 129, 0.15);
          color: #34d399;
          border: 1px solid rgba(16, 185, 129, 0.3);
        }

        /* Contact Items */
        .footer-contact-list {
          display: flex;
          flex-direction: column;
          gap: 12px;
        }

        .footer-contact-card {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          padding: 10px 12px;
          background: rgba(255, 255, 255, 0.03);
          border: 1px solid rgba(255, 255, 255, 0.06);
          border-radius: 12px;
          text-decoration: none;
          color: #cbd5e1;
          transition: all 0.2s ease;
        }

        .footer-contact-card:hover {
          background: rgba(255, 255, 255, 0.06);
          border-color: rgba(99, 102, 241, 0.35);
          color: #ffffff;
          transform: translateY(-2px);
        }

        .footer-contact-icon-box {
          width: 32px;
          height: 32px;
          border-radius: 8px;
          background: rgba(99, 102, 241, 0.15);
          color: #818cf8;
          display: flex;
          align-items: center;
          justify-content: center;
          flex-shrink: 0;
          margin-top: 1px;
        }

        .footer-contact-info {
          display: flex;
          flex-direction: column;
          gap: 2px;
        }

        .footer-contact-label {
          font-size: 0.68rem;
          font-weight: 700;
          text-transform: uppercase;
          letter-spacing: 0.5px;
          color: #64748b;
        }

        .footer-contact-val {
          font-size: 0.84rem;
          font-weight: 600;
          line-height: 1.4;
          color: #f1f5f9;
        }

        /* ── Divider ── */
        .footer-divider {
          height: 1px;
          width: 100%;
          background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.3) 50%, transparent 100%);
          margin: clamp(36px, 4vw, 48px) 0 clamp(20px, 3vw, 28px);
        }

        /* ── Bottom Bar ── */
        .footer-bottom-bar {
          display: flex;
          align-items: center;
          justify-content: space-between;
          gap: 20px;
          flex-wrap: wrap;
        }

        .footer-copy-text {
          font-size: 0.82rem;
          color: #64748b;
          margin: 0;
          display: flex;
          align-items: center;
          gap: 6px;
        }

        .footer-legal-links {
          display: flex;
          align-items: center;
          gap: clamp(14px, 2vw, 24px);
          flex-wrap: wrap;
        }

        .footer-legal-btn {
          background: none;
          border: none;
          color: #64748b;
          font-size: 0.8rem;
          cursor: pointer;
          transition: color 0.2s ease;
          padding: 2px 0;
          font-family: inherit;
          position: relative;
        }

        .footer-legal-btn:hover {
          color: #cbd5e1;
        }

        .footer-back-to-top {
          display: inline-flex;
          align-items: center;
          gap: 6px;
          padding: 8px 16px;
          border-radius: 50px;
          background: rgba(255, 255, 255, 0.05);
          border: 1px solid rgba(255, 255, 255, 0.1);
          color: #cbd5e1;
          font-size: 0.8rem;
          font-weight: 600;
          cursor: pointer;
          position: relative;
          z-index: 10;
          transition: all 0.2s ease;
          font-family: inherit;
          outline: none;
          user-select: none;
        }

        .footer-back-to-top:hover {
          background: rgba(99, 102, 241, 0.2);
          border-color: rgba(99, 102, 241, 0.4);
          color: #ffffff;
          transform: translateY(-2px);
        }

        /* ── Floating WhatsApp Widget ── */
        .footer-wa-float {
          position: fixed;
          bottom: calc(20px + env(safe-area-inset-bottom, 0px));
          right: 20px;
          width: 54px;
          height: 54px;
          border-radius: 50%;
          background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
          display: flex;
          align-items: center;
          justify-content: center;
          color: #ffffff;
          z-index: 999;
          cursor: pointer;
          text-decoration: none;
          box-shadow: 0 8px 24px rgba(37, 211, 102, 0.45);
          animation: waFloatPulse 2.5s ease-in-out infinite;
          transition: transform 0.25s ease;
        }

        .footer-wa-float:hover {
          transform: scale(1.12) !important;
        }

        /* ============================================================
           LIGHT THEME ADAPTATIONS
           ============================================================ */
        [data-theme="light"] .footer-root {
          background: #ffffff;
          border-top-color: rgba(0, 0, 0, 0.08);
          color: #0f172a;
        }

        [data-theme="light"] .footer-ambient-mesh {
          background: radial-gradient(50% 100% at 50% 0%, rgba(99, 102, 241, 0.1) 0%, rgba(249, 115, 22, 0.04) 60%, transparent 100%);
        }

        [data-theme="light"] .footer-brand-name {
          background: linear-gradient(135deg, #0f172a 40%, #4338ca 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          background-clip: text;
        }

        [data-theme="light"] .footer-tagline {
          color: #64748b;
        }

        [data-theme="light"] .footer-tagline-highlight {
          color: #0f172a;
        }

        [data-theme="light"] .footer-social-icon {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-social-icon:hover {
          background: var(--social-bg, #eef2ff);
          border-color: var(--social-color, #4f46e5);
          color: var(--social-color, #4f46e5);
        }

        [data-theme="light"] .footer-col-title {
          color: #0f172a;
        }

        [data-theme="light"] .footer-nav-link,
        [data-theme="light"] .footer-service-link {
          color: #64748b;
        }

        [data-theme="light"] .footer-nav-link:hover,
        [data-theme="light"] .footer-service-link:hover {
          color: #4f46e5;
        }

        [data-theme="light"] .footer-contact-card {
          background: #f8fafc;
          border-color: rgba(0, 0, 0, 0.06);
          color: #334155;
        }

        [data-theme="light"] .footer-contact-card:hover {
          background: #f1f5f9;
          border-color: rgba(79, 70, 229, 0.3);
          color: #0f172a;
        }

        [data-theme="light"] .footer-contact-val {
          color: #0f172a;
        }

        [data-theme="light"] .footer-divider {
          background: linear-gradient(90deg, transparent 0%, rgba(79, 70, 229, 0.2) 50%, transparent 100%);
        }

        [data-theme="light"] .footer-copy-text,
        [data-theme="light"] .footer-legal-btn {
          color: #64748b;
        }

        [data-theme="light"] .footer-legal-btn:hover {
          color: #0f172a;
        }

        [data-theme="light"] .footer-back-to-top {
          background: #f1f5f9;
          border-color: rgba(0, 0, 0, 0.08);
          color: #475569;
        }

        [data-theme="light"] .footer-back-to-top:hover {
          background: #eef2ff;
          border-color: rgba(79, 70, 229, 0.3);
          color: #4f46e5;
        }

        /* ============================================================
           RESPONSIVE BREAKPOINTS
           ============================================================ */
        @media (max-width: 1100px) {
          .footer-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 40px;
          }
        }

        @media (max-width: 600px) {
          .footer-grid {
            grid-template-columns: 1fr;
            gap: 32px;
          }

          .footer-bottom-bar {
            flex-direction: column;
            align-items: center;
            text-align: center;
            gap: 16px;
          }

          .footer-legal-links {
            justify-content: center;
            gap: 14px;
          }

          .footer-wa-float {
            width: 48px;
            height: 48px;
            bottom: calc(16px + env(safe-area-inset-bottom, 0px));
            right: 16px;
          }
        }

/* ============================================================
   ADPILOT DYNAMIC WORDPRESS LAYER
   ============================================================ */
.adp-empty-state{padding:28px;text-align:center;color:#94a3b8}.service-color-blue{--service-color:#1877f2;--service-dark:#0d5fd4;--service-rgb:24,119,242}.service-color-red{--service-color:#ea4335;--service-dark:#c5221f;--service-rgb:234,67,53}.service-color-green{--service-color:#34a853;--service-dark:#188038;--service-rgb:52,168,83}.service-color-purple{--service-color:#8b5cf6;--service-dark:#6d28d9;--service-rgb:139,92,246}.service-color-orange{--service-color:#f59e0b;--service-dark:#d97706;--service-rgb:245,158,11}.service-card-item{opacity:1!important;transform:none!important}.service-stat-num{color:var(--service-color)}.service-point-check{background:rgba(var(--service-rgb),.18);color:var(--service-color);display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;flex:none}.service-cta-arrow{background:var(--service-color);color:#fff}.reviews-card{opacity:1!important;transform:none!important}.reviews-card-content{padding:22px 22px 10px}.reviews-card-title{margin:0 0 10px;color:#fff;font-size:1.05rem}.reviews-stars{color:#fbbf24;letter-spacing:2px;margin-bottom:10px}.reviews-card-excerpt{color:#cbd5e1;line-height:1.7;font-size:.92rem}.sp-hero-desc p{margin:0}.sp-pkg-check{display:inline-flex;width:24px;height:24px;border-radius:50%;align-items:center;justify-content:center;background:rgba(99,102,241,.12);color:#818cf8;flex:none}.sp-pkg-btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.adp-generic-page{padding:140px 20px 80px;background:#030712;color:#fff;min-height:60vh}.adp-container{max-width:1200px;margin:auto}.adp-site-footer{background:#030712;color:#94a3b8;border-top:1px solid rgba(255,255,255,.08)}.adp-footer-inner{max-width:1360px;margin:auto;padding:24px 20px;text-align:center}.adp-floating-contact{position:fixed;right:18px;bottom:20px;z-index:9998;display:flex;flex-direction:column;gap:10px}.adp-floating-contact a{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-decoration:none;color:#fff;font-size:22px;box-shadow:0 8px 24px rgba(0,0,0,.28)}.adp-float-phone{background:#1877f2}.adp-float-whatsapp{background:#25d366}.navbar-link.is-current{color:#fff;background:rgba(99,102,241,.14)}.navbar-dropdown-item.is-current{background:rgba(99,102,241,.14)}@media(max-width:600px){.adp-floating-contact{right:12px;bottom:14px}.adp-floating-contact a{width:48px;height:48px}}
.adp-inline-1{margin-top: 124.594px;}
.adp-inline-2{position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity:1;.95;}
.adp-inline-3{background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2);}
.adp-inline-4{color: rgb(99, 102, 241);}
.adp-inline-5{background: rgba(249, 115, 22, 0.08); border: 1px solid rgba(249, 115, 22, 0.2);}
.adp-inline-6{color: rgb(249, 115, 22);}
.adp-inline-7{background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2);}
.adp-inline-8{color: rgb(16, 185, 129);}
.adp-inline-9{background: rgba(236, 72, 153, 0.08); border: 1px solid rgba(236, 72, 153, 0.2);}
.adp-inline-10{color: rgb(236, 72, 153);}
.adp-inline-11{width: 500px; height: 500px;}
.adp-inline-12{width: 470px; height: 470px;}
.adp-inline-13{width: 360px; height: 360px;}
.adp-inline-14{width: 236px; height: 236px;}
.adp-inline-15{left: calc(50% + 1.10218e-14px); top: calc(50% - 180px); --service-color: #1877f2; --service-gradient: linear-gradient(135deg, #1877f2, #0d5fd4);}
.adp-inline-16{width: 60px; height: 60px;}
.adp-inline-17{width: 40px; height: 40px;}
.adp-inline-18{background: rgb(24, 119, 242);}
.adp-inline-19{border-color: rgb(24, 119, 242);}
.adp-inline-20{left: calc(50% + 155.885px); top: calc(50% - 90px); --service-color: #ea4335; --service-gradient: linear-gradient(135deg, #ea4335, #c5221f);}
.adp-inline-21{width: 60px; height: 60px;}
.adp-inline-22{width: 40px; height: 40px;}
.adp-inline-23{background: rgb(234, 67, 53);}
.adp-inline-24{border-color: rgb(234, 67, 53);}
.adp-inline-25{left: calc(50% + 155.885px); top: calc(50% + 90px); --service-color: #ff6b00; --service-gradient: linear-gradient(135deg, #ff6b00, #e05a00);}
.adp-inline-26{width: 60px; height: 60px;}
.adp-inline-27{width: 40px; height: 40px;}
.adp-inline-28{background: rgb(255, 107, 0);}
.adp-inline-29{border-color: rgb(255, 107, 0);}
.adp-inline-30{left: calc(50% + 1.10218e-14px); top: calc(50% + 180px); --service-color: #1a2aff; --service-gradient: linear-gradient(135deg, #1a2aff, #0d1499);}
.adp-inline-31{width: 60px; height: 60px;}
.adp-inline-32{width: 40px; height: 40px;}
.adp-inline-33{background: rgb(26, 42, 255);}
.adp-inline-34{border-color: rgb(26, 42, 255);}
.adp-inline-35{left: calc(50% - 155.885px); top: calc(50% + 90px); --service-color: #e1306c; --service-gradient: linear-gradient(135deg, #f09433, #dc2743, #bc1888);}
.adp-inline-36{width: 60px; height: 60px;}
.adp-inline-37{width: 40px; height: 40px;}
.adp-inline-38{background: rgb(225, 48, 108);}
.adp-inline-39{border-color: rgb(225, 48, 108);}
.adp-inline-40{left: calc(50% - 155.885px); top: calc(50% - 90px); --service-color: #059669; --service-gradient: linear-gradient(135deg, #059669, #047857);}
.adp-inline-41{width: 60px; height: 60px;}
.adp-inline-42{width: 40px; height: 40px;}
.adp-inline-43{background: rgb(5, 150, 105);}
.adp-inline-44{border-color: rgb(5, 150, 105);}
.adp-inline-45{width: 124px; height: 124px;}
.adp-inline-46{--chip-color: #1877f2;}
.adp-inline-47{--chip-color: #ea4335;}
.adp-inline-48{--chip-color: #ff6b00;}
.adp-inline-49{--chip-color: #1a2aff;}
.adp-inline-50{--chip-color: #e1306c;}
.adp-inline-51{--chip-color: #059669;}
.adp-inline-52{text-decoration: none; color: inherit;}
.adp-inline-53{--card-color: #1877f2;}
.adp-inline-54{display: none; color: rgb(24, 119, 242);}
.adp-inline-55{text-decoration: none; color: inherit;}
.adp-inline-56{--card-color: #f97316;}
.adp-inline-57{display: none; color: rgb(249, 115, 22);}
.adp-inline-58{--card-color: #059669;}
.adp-inline-59{display: none; color: rgb(5, 150, 105);}
.adp-inline-60{--card-color: #ec4899;}
.adp-inline-61{display: none; color: rgb(236, 72, 153);}
.adp-inline-62{--card-color: #6366f1;}
.adp-inline-63{display: none; color: rgb(99, 102, 241);}
.adp-inline-64{text-decoration: none; color: inherit;}
.adp-inline-65{--card-color: #ea4335;}
.adp-inline-66{display: none; color: rgb(234, 67, 53);}
.adp-inline-67{text-decoration: none; color: inherit;}
.adp-inline-68{--card-color: #f59e0b;}
.adp-inline-69{display: none; color: rgb(245, 158, 11);}
.adp-inline-70{text-decoration: none; color: inherit;}
.adp-inline-71{--card-color: #0ea5e9;}
.adp-inline-72{display: none; color: rgb(14, 165, 233);}
.adp-inline-73{--card-color: #8b5cf6;}
.adp-inline-74{display: none; color: rgb(139, 92, 246);}
.adp-inline-75{text-decoration: none; color: inherit;}
.adp-inline-76{--card-color: #10b981;}
.adp-inline-77{display: none; color: rgb(16, 185, 129);}
.adp-inline-78{--card-color: #ef4444;}
.adp-inline-79{display: none; color: rgb(239, 68, 68);}
.adp-inline-80{text-decoration: none; color: inherit;}
.adp-inline-81{--card-color: #1a2aff;}
.adp-inline-82{display: none; color: rgb(26, 42, 255);}
.adp-inline-83{text-decoration: none; color: inherit;}
.adp-inline-84{--card-color: #ff6b00;}
.adp-inline-85{display: none; color: rgb(255, 107, 0);}
.adp-inline-86{text-decoration: none; color: inherit;}
.adp-inline-87{--card-color: #1877f2;}
.adp-inline-88{display: none; color: rgb(24, 119, 242);}
.adp-inline-89{text-decoration: none; color: inherit;}
.adp-inline-90{--card-color: #f97316;}
.adp-inline-91{display: none; color: rgb(249, 115, 22);}
.adp-inline-92{--card-color: #059669;}
.adp-inline-93{display: none; color: rgb(5, 150, 105);}
.adp-inline-94{--card-color: #ec4899;}
.adp-inline-95{display: none; color: rgb(236, 72, 153);}
.adp-inline-96{--card-color: #6366f1;}
.adp-inline-97{display: none; color: rgb(99, 102, 241);}
.adp-inline-98{text-decoration: none; color: inherit;}
.adp-inline-99{--card-color: #ea4335;}
.adp-inline-100{display: none; color: rgb(234, 67, 53);}
.adp-inline-101{text-decoration: none; color: inherit;}
.adp-inline-102{--card-color: #f59e0b;}
.adp-inline-103{display: none; color: rgb(245, 158, 11);}
.adp-inline-104{text-decoration: none; color: inherit;}
.adp-inline-105{--card-color: #0ea5e9;}
.adp-inline-106{display: none; color: rgb(14, 165, 233);}
.adp-inline-107{--card-color: #8b5cf6;}
.adp-inline-108{display: none; color: rgb(139, 92, 246);}
.adp-inline-109{text-decoration: none; color: inherit;}
.adp-inline-110{--card-color: #10b981;}
.adp-inline-111{display: none; color: rgb(16, 185, 129);}
.adp-inline-112{--card-color: #ef4444;}
.adp-inline-113{display: none; color: rgb(239, 68, 68);}
.adp-inline-114{text-decoration: none; color: inherit;}
.adp-inline-115{--card-color: #1a2aff;}
.adp-inline-116{display: none; color: rgb(26, 42, 255);}
.adp-inline-117{text-decoration: none; color: inherit;}
.adp-inline-118{--card-color: #ff6b00;}
.adp-inline-119{display: none; color: rgb(255, 107, 0);}
.adp-inline-120{text-decoration: none; color: inherit;}
.adp-inline-121{--card-color: #1877f2;}
.adp-inline-122{display: none; color: rgb(24, 119, 242);}
.adp-inline-123{text-decoration: none; color: inherit;}
.adp-inline-124{--card-color: #f97316;}
.adp-inline-125{display: none; color: rgb(249, 115, 22);}
.adp-inline-126{--card-color: #059669;}
.adp-inline-127{display: none; color: rgb(5, 150, 105);}
.adp-inline-128{--card-color: #ec4899;}
.adp-inline-129{display: none; color: rgb(236, 72, 153);}
.adp-inline-130{--card-color: #6366f1;}
.adp-inline-131{display: none; color: rgb(99, 102, 241);}
.adp-inline-132{text-decoration: none; color: inherit;}
.adp-inline-133{--card-color: #ea4335;}
.adp-inline-134{display: none; color: rgb(234, 67, 53);}
.adp-inline-135{text-decoration: none; color: inherit;}
.adp-inline-136{--card-color: #f59e0b;}
.adp-inline-137{display: none; color: rgb(245, 158, 11);}
.adp-inline-138{text-decoration: none; color: inherit;}
.adp-inline-139{--card-color: #0ea5e9;}
.adp-inline-140{display: none; color: rgb(14, 165, 233);}
.adp-inline-141{--card-color: #8b5cf6;}
.adp-inline-142{display: none; color: rgb(139, 92, 246);}
.adp-inline-143{text-decoration: none; color: inherit;}
.adp-inline-144{--card-color: #10b981;}
.adp-inline-145{display: none; color: rgb(16, 185, 129);}
.adp-inline-146{--card-color: #ef4444;}
.adp-inline-147{display: none; color: rgb(239, 68, 68);}
.adp-inline-148{text-decoration: none; color: inherit;}
.adp-inline-149{--card-color: #1a2aff;}
.adp-inline-150{display: none; color: rgb(26, 42, 255);}
.adp-inline-151{text-decoration: none; color: inherit;}
.adp-inline-152{--card-color: #ff6b00;}
.adp-inline-153{display: none; color: rgb(255, 107, 0);}
.adp-inline-154{text-decoration: none; color: inherit;}
.adp-inline-155{--card-color: #1877f2;}
.adp-inline-156{display: none; color: rgb(24, 119, 242);}
.adp-inline-157{text-decoration: none; color: inherit;}
.adp-inline-158{--card-color: #f97316;}
.adp-inline-159{display: none; color: rgb(249, 115, 22);}
.adp-inline-160{--card-color: #059669;}
.adp-inline-161{display: none; color: rgb(5, 150, 105);}
.adp-inline-162{--card-color: #ec4899;}
.adp-inline-163{display: none; color: rgb(236, 72, 153);}
.adp-inline-164{--card-color: #6366f1;}
.adp-inline-165{display: none; color: rgb(99, 102, 241);}
.adp-inline-166{text-decoration: none; color: inherit;}
.adp-inline-167{--card-color: #ea4335;}
.adp-inline-168{display: none; color: rgb(234, 67, 53);}
.adp-inline-169{text-decoration: none; color: inherit;}
.adp-inline-170{--card-color: #f59e0b;}
.adp-inline-171{display: none; color: rgb(245, 158, 11);}
.adp-inline-172{text-decoration: none; color: inherit;}
.adp-inline-173{--card-color: #0ea5e9;}
.adp-inline-174{display: none; color: rgb(14, 165, 233);}
.adp-inline-175{--card-color: #8b5cf6;}
.adp-inline-176{display: none; color: rgb(139, 92, 246);}
.adp-inline-177{text-decoration: none; color: inherit;}
.adp-inline-178{--card-color: #10b981;}
.adp-inline-179{display: none; color: rgb(16, 185, 129);}
.adp-inline-180{--card-color: #ef4444;}
.adp-inline-181{display: none; color: rgb(239, 68, 68);}
.adp-inline-182{text-decoration: none; color: inherit;}
.adp-inline-183{--card-color: #1a2aff;}
.adp-inline-184{display: none; color: rgb(26, 42, 255);}
.adp-inline-185{text-decoration: none; color: inherit;}
.adp-inline-186{--card-color: #ff6b00;}
.adp-inline-187{display: none; color: rgb(255, 107, 0);}
.adp-inline-188{opacity: 1; transform: translateY(0px); transition: 0.6s;}
.adp-inline-189{--service-color: #1877f2; --service-dark: #0a4fd4; --service-rgb: 24, 119, 242; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-190{color: rgb(24, 119, 242);}
.adp-inline-191{color: rgb(24, 119, 242);}
.adp-inline-192{color: rgb(24, 119, 242);}
.adp-inline-193{background: rgba(24, 119, 242, 0.18); color: rgb(24, 119, 242);}
.adp-inline-194{background: rgba(24, 119, 242, 0.18); color: rgb(24, 119, 242);}
.adp-inline-195{background: rgba(24, 119, 242, 0.18); color: rgb(24, 119, 242);}
.adp-inline-196{background: rgb(24, 119, 242);}
.adp-inline-197{--service-color: #ea4335; --service-dark: #b31412; --service-rgb: 234, 67, 53; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;}
.adp-inline-198{color: rgb(234, 67, 53);}
.adp-inline-199{color: rgb(234, 67, 53);}
.adp-inline-200{color: rgb(234, 67, 53);}
.adp-inline-201{background: rgba(234, 67, 53, 0.18); color: rgb(234, 67, 53);}
.adp-inline-202{background: rgba(234, 67, 53, 0.18); color: rgb(234, 67, 53);}
.adp-inline-203{background: rgba(234, 67, 53, 0.18); color: rgb(234, 67, 53);}
.adp-inline-204{background: rgb(234, 67, 53);}
.adp-inline-205{--service-color: #ff6b00; --service-dark: #c2410c; --service-rgb: 255, 107, 0; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;}
.adp-inline-206{color: rgb(255, 107, 0);}
.adp-inline-207{color: rgb(255, 107, 0);}
.adp-inline-208{color: rgb(255, 107, 0);}
.adp-inline-209{background: rgba(255, 107, 0, 0.18); color: rgb(255, 107, 0);}
.adp-inline-210{background: rgba(255, 107, 0, 0.18); color: rgb(255, 107, 0);}
.adp-inline-211{background: rgba(255, 107, 0, 0.18); color: rgb(255, 107, 0);}
.adp-inline-212{background: rgb(255, 107, 0);}
.adp-inline-213{--service-color: #6366f1; --service-dark: #4338ca; --service-rgb: 99, 102, 241; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;}
.adp-inline-214{color: rgb(99, 102, 241);}
.adp-inline-215{color: rgb(99, 102, 241);}
.adp-inline-216{color: rgb(99, 102, 241);}
.adp-inline-217{background: rgba(99, 102, 241, 0.18); color: rgb(99, 102, 241);}
.adp-inline-218{background: rgba(99, 102, 241, 0.18); color: rgb(99, 102, 241);}
.adp-inline-219{background: rgba(99, 102, 241, 0.18); color: rgb(99, 102, 241);}
.adp-inline-220{background: rgb(99, 102, 241);}
.adp-inline-221{--service-color: #059669; --service-dark: #065f46; --service-rgb: 5, 150, 105; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.24s;}
.adp-inline-222{color: rgb(5, 150, 105);}
.adp-inline-223{color: rgb(5, 150, 105);}
.adp-inline-224{color: rgb(5, 150, 105);}
.adp-inline-225{background: rgba(5, 150, 105, 0.18); color: rgb(5, 150, 105);}
.adp-inline-226{background: rgba(5, 150, 105, 0.18); color: rgb(5, 150, 105);}
.adp-inline-227{background: rgba(5, 150, 105, 0.18); color: rgb(5, 150, 105);}
.adp-inline-228{background: rgb(5, 150, 105);}
.adp-inline-229{--service-color: #ec4899; --service-dark: #be185d; --service-rgb: 236, 72, 153; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;}
.adp-inline-230{color: rgb(236, 72, 153);}
.adp-inline-231{color: rgb(236, 72, 153);}
.adp-inline-232{color: rgb(236, 72, 153);}
.adp-inline-233{background: rgba(236, 72, 153, 0.18); color: rgb(236, 72, 153);}
.adp-inline-234{background: rgba(236, 72, 153, 0.18); color: rgb(236, 72, 153);}
.adp-inline-235{background: rgba(236, 72, 153, 0.18); color: rgb(236, 72, 153);}
.adp-inline-236{background: rgb(236, 72, 153);}
.adp-inline-237{--service-color: #0ea5e9; --service-dark: #0369a1; --service-rgb: 14, 165, 233; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.36s;}
.adp-inline-238{color: rgb(14, 165, 233);}
.adp-inline-239{color: rgb(14, 165, 233);}
.adp-inline-240{color: rgb(14, 165, 233);}
.adp-inline-241{background: rgba(14, 165, 233, 0.18); color: rgb(14, 165, 233);}
.adp-inline-242{background: rgba(14, 165, 233, 0.18); color: rgb(14, 165, 233);}
.adp-inline-243{background: rgba(14, 165, 233, 0.18); color: rgb(14, 165, 233);}
.adp-inline-244{background: rgb(14, 165, 233);}
.adp-inline-245{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-246{--step-color: #6366f1; --step-rgb: 99, 102, 241; opacity:1; transform: translateY(36px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-247{--step-color: #f97316; --step-rgb: 249, 115, 22; opacity:1; transform: translateY(36px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;}
.adp-inline-248{--step-color: #1877f2; --step-rgb: 24, 119, 242; opacity:1; transform: translateY(36px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.16s;}
.adp-inline-249{--step-color: #10b981; --step-rgb: 16, 185, 129; opacity:1; transform: translateY(36px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.24s;}
.adp-inline-250{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-251{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-252{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-253{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-254{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-255{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-256{opacity:1; transform: translateY(30px); transition: 0.6s 0.2s;}
.adp-inline-257{background: rgba(24, 119, 242, 0.15); color: rgb(24, 119, 242);}
.adp-inline-258{background: rgba(255, 107, 0, 0.15); color: rgb(255, 107, 0);}
.adp-inline-259{--card-color: #1877f2;}
.adp-inline-260{color: rgb(24, 119, 242); background: rgba(24, 119, 242, 0.082);}
.adp-inline-261{--card-color: #ff6b00;}
.adp-inline-262{color: rgb(255, 107, 0); background: rgba(255, 107, 0, 0.082);}
.adp-inline-263{--card-color: #10b981;}
.adp-inline-264{color: rgb(16, 185, 129); background: rgba(16, 185, 129, 0.082);}
.adp-inline-265{--card-color: #a855f7;}
.adp-inline-266{color: rgb(168, 85, 247); background: rgba(168, 85, 247, 0.082);}
.adp-inline-267{opacity:1; transform: translateY(30px); transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-268{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-269{color: rgb(99, 102, 241);}
.adp-inline-270{color: rgb(249, 115, 22);}
.adp-inline-271{color: rgb(16, 185, 129);}
.adp-inline-272{color: rgb(236, 72, 153);}
.adp-inline-273{color: rgb(251, 191, 36);}
.adp-inline-274{color: rgb(251, 191, 36);}
.adp-inline-275{color: rgb(16, 185, 129);}
.adp-inline-276{--case-color: #1877f2;}
.adp-inline-277{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-278{color: rgb(24, 119, 242);}
.adp-inline-279{color: rgb(24, 119, 242);}
.adp-inline-280{color: rgb(24, 119, 242);}
.adp-inline-281{--case-color: #ff6b00;}
.adp-inline-282{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-283{color: rgb(255, 107, 0);}
.adp-inline-284{color: rgb(255, 107, 0);}
.adp-inline-285{color: rgb(255, 107, 0);}
.adp-inline-286{--case-color: #f97316;}
.adp-inline-287{background: rgba(249, 115, 22, 0.125); color: rgb(249, 115, 22);}
.adp-inline-288{color: rgb(249, 115, 22);}
.adp-inline-289{color: rgb(249, 115, 22);}
.adp-inline-290{color: rgb(249, 115, 22);}
.adp-inline-291{--case-color: #059669;}
.adp-inline-292{background: rgba(5, 150, 105, 0.125); color: rgb(5, 150, 105);}
.adp-inline-293{color: rgb(5, 150, 105);}
.adp-inline-294{color: rgb(5, 150, 105);}
.adp-inline-295{color: rgb(5, 150, 105);}
.adp-inline-296{color: rgb(24, 119, 242);}
.adp-inline-297{color: rgb(234, 67, 53);}
.adp-inline-298{color: rgb(255, 107, 0);}
.adp-inline-299{color: rgb(26, 42, 255);}
.adp-inline-300{color: rgb(5, 150, 105);}
.adp-inline-301{color: rgb(225, 48, 108);}
.adp-inline-302{--platform-color: #1877f2; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-303{background: rgba(24, 119, 242, 0.15); color: rgb(24, 119, 242);}
.adp-inline-304{border-color: rgba(24, 119, 242, 0.25); background: rgba(24, 119, 242, 0.063); color: rgb(24, 119, 242);}
.adp-inline-305{border-color: rgba(24, 119, 242, 0.25); background: rgba(24, 119, 242, 0.063); color: rgb(24, 119, 242);}
.adp-inline-306{border-color: rgba(24, 119, 242, 0.25); background: rgba(24, 119, 242, 0.063); color: rgb(24, 119, 242);}
.adp-inline-307{background: rgb(24, 119, 242);}
.adp-inline-308{background: rgb(24, 119, 242);}
.adp-inline-309{color: rgb(255, 255, 255);}
.adp-inline-310{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-311{background: rgb(24, 119, 242);}
.adp-inline-312{background: rgb(24, 119, 242);}
.adp-inline-313{color: rgb(255, 255, 255);}
.adp-inline-314{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-315{background: rgb(24, 119, 242);}
.adp-inline-316{background: rgb(24, 119, 242);}
.adp-inline-317{color: rgb(255, 255, 255);}
.adp-inline-318{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-319{background: rgb(24, 119, 242);}
.adp-inline-320{background: rgb(24, 119, 242);}
.adp-inline-321{color: rgb(255, 255, 255);}
.adp-inline-322{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-323{--platform-color: #ea4335; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-324{background: rgba(234, 67, 53, 0.15); color: rgb(234, 67, 53);}
.adp-inline-325{border-color: rgba(234, 67, 53, 0.25); background: rgba(234, 67, 53, 0.063); color: rgb(234, 67, 53);}
.adp-inline-326{border-color: rgba(234, 67, 53, 0.25); background: rgba(234, 67, 53, 0.063); color: rgb(234, 67, 53);}
.adp-inline-327{border-color: rgba(234, 67, 53, 0.25); background: rgba(234, 67, 53, 0.063); color: rgb(234, 67, 53);}
.adp-inline-328{background: rgb(234, 67, 53);}
.adp-inline-329{background: rgb(234, 67, 53);}
.adp-inline-330{color: rgb(255, 255, 255);}
.adp-inline-331{background: rgba(234, 67, 53, 0.125); color: rgb(234, 67, 53);}
.adp-inline-332{background: rgb(234, 67, 53);}
.adp-inline-333{background: rgb(234, 67, 53);}
.adp-inline-334{color: rgb(255, 255, 255);}
.adp-inline-335{background: rgba(234, 67, 53, 0.125); color: rgb(234, 67, 53);}
.adp-inline-336{background: rgb(234, 67, 53);}
.adp-inline-337{background: rgb(234, 67, 53);}
.adp-inline-338{color: rgb(255, 255, 255);}
.adp-inline-339{background: rgba(234, 67, 53, 0.125); color: rgb(234, 67, 53);}
.adp-inline-340{background: rgb(234, 67, 53);}
.adp-inline-341{background: rgb(234, 67, 53);}
.adp-inline-342{color: rgb(255, 255, 255);}
.adp-inline-343{background: rgba(234, 67, 53, 0.125); color: rgb(234, 67, 53);}
.adp-inline-344{--platform-color: #ff6b00; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-345{background: rgba(255, 107, 0, 0.15); color: rgb(255, 107, 0);}
.adp-inline-346{border-color: rgba(255, 107, 0, 0.25); background: rgba(255, 107, 0, 0.063); color: rgb(255, 107, 0);}
.adp-inline-347{border-color: rgba(255, 107, 0, 0.25); background: rgba(255, 107, 0, 0.063); color: rgb(255, 107, 0);}
.adp-inline-348{border-color: rgba(255, 107, 0, 0.25); background: rgba(255, 107, 0, 0.063); color: rgb(255, 107, 0);}
.adp-inline-349{background: rgb(255, 107, 0);}
.adp-inline-350{background: rgb(255, 107, 0);}
.adp-inline-351{color: rgb(255, 255, 255);}
.adp-inline-352{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-353{background: rgb(255, 107, 0);}
.adp-inline-354{background: rgb(255, 107, 0);}
.adp-inline-355{color: rgb(255, 255, 255);}
.adp-inline-356{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-357{background: rgb(255, 107, 0);}
.adp-inline-358{background: rgb(255, 107, 0);}
.adp-inline-359{color: rgb(255, 255, 255);}
.adp-inline-360{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-361{background: rgb(255, 107, 0);}
.adp-inline-362{background: rgb(255, 107, 0);}
.adp-inline-363{color: rgb(255, 255, 255);}
.adp-inline-364{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-365{background: rgb(255, 107, 0);}
.adp-inline-366{background: rgb(255, 107, 0);}
.adp-inline-367{color: rgb(255, 255, 255);}
.adp-inline-368{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-369{background: rgb(255, 107, 0);}
.adp-inline-370{background: rgb(255, 107, 0);}
.adp-inline-371{color: rgb(255, 255, 255);}
.adp-inline-372{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-373{--platform-color: #1a2aff; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-374{background: rgba(26, 42, 255, 0.15); color: rgb(26, 42, 255);}
.adp-inline-375{border-color: rgba(26, 42, 255, 0.25); background: rgba(26, 42, 255, 0.063); color: rgb(26, 42, 255);}
.adp-inline-376{border-color: rgba(26, 42, 255, 0.25); background: rgba(26, 42, 255, 0.063); color: rgb(26, 42, 255);}
.adp-inline-377{border-color: rgba(26, 42, 255, 0.25); background: rgba(26, 42, 255, 0.063); color: rgb(26, 42, 255);}
.adp-inline-378{background: rgb(26, 42, 255);}
.adp-inline-379{background: rgb(26, 42, 255);}
.adp-inline-380{color: rgb(255, 255, 255);}
.adp-inline-381{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-382{background: rgb(26, 42, 255);}
.adp-inline-383{background: rgb(26, 42, 255);}
.adp-inline-384{color: rgb(255, 255, 255);}
.adp-inline-385{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-386{background: rgb(26, 42, 255);}
.adp-inline-387{background: rgb(26, 42, 255);}
.adp-inline-388{color: rgb(255, 255, 255);}
.adp-inline-389{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-390{background: rgb(26, 42, 255);}
.adp-inline-391{background: rgb(26, 42, 255);}
.adp-inline-392{color: rgb(255, 255, 255);}
.adp-inline-393{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-394{background: rgb(26, 42, 255);}
.adp-inline-395{background: rgb(26, 42, 255);}
.adp-inline-396{color: rgb(255, 255, 255);}
.adp-inline-397{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-398{--platform-color: #059669; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-399{background: rgba(5, 150, 105, 0.15); color: rgb(5, 150, 105);}
.adp-inline-400{border-color: rgba(5, 150, 105, 0.25); background: rgba(5, 150, 105, 0.063); color: rgb(5, 150, 105);}
.adp-inline-401{border-color: rgba(5, 150, 105, 0.25); background: rgba(5, 150, 105, 0.063); color: rgb(5, 150, 105);}
.adp-inline-402{border-color: rgba(5, 150, 105, 0.25); background: rgba(5, 150, 105, 0.063); color: rgb(5, 150, 105);}
.adp-inline-403{background: rgb(5, 150, 105);}
.adp-inline-404{background: rgb(5, 150, 105);}
.adp-inline-405{color: rgb(255, 255, 255);}
.adp-inline-406{background: rgba(5, 150, 105, 0.125); color: rgb(5, 150, 105);}
.adp-inline-407{background: rgb(5, 150, 105);}
.adp-inline-408{background: rgb(5, 150, 105);}
.adp-inline-409{color: rgb(255, 255, 255);}
.adp-inline-410{background: rgba(5, 150, 105, 0.125); color: rgb(5, 150, 105);}
.adp-inline-411{background: rgb(5, 150, 105);}
.adp-inline-412{background: rgb(5, 150, 105);}
.adp-inline-413{color: rgb(255, 255, 255);}
.adp-inline-414{background: rgba(5, 150, 105, 0.125); color: rgb(5, 150, 105);}
.adp-inline-415{--platform-color: #e1306c; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-416{background: rgba(225, 48, 108, 0.15); color: rgb(225, 48, 108);}
.adp-inline-417{border-color: rgba(225, 48, 108, 0.25); background: rgba(225, 48, 108, 0.063); color: rgb(225, 48, 108);}
.adp-inline-418{border-color: rgba(225, 48, 108, 0.25); background: rgba(225, 48, 108, 0.063); color: rgb(225, 48, 108);}
.adp-inline-419{border-color: rgba(225, 48, 108, 0.25); background: rgba(225, 48, 108, 0.063); color: rgb(225, 48, 108);}
.adp-inline-420{background: rgb(225, 48, 108);}
.adp-inline-421{background: rgb(225, 48, 108);}
.adp-inline-422{color: rgb(255, 255, 255);}
.adp-inline-423{background: rgba(225, 48, 108, 0.125); color: rgb(225, 48, 108);}
.adp-inline-424{background: rgb(225, 48, 108);}
.adp-inline-425{background: rgb(225, 48, 108);}
.adp-inline-426{color: rgb(255, 255, 255);}
.adp-inline-427{background: rgba(225, 48, 108, 0.125); color: rgb(225, 48, 108);}
.adp-inline-428{background: rgb(225, 48, 108);}
.adp-inline-429{background: rgb(225, 48, 108);}
.adp-inline-430{color: rgb(255, 255, 255);}
.adp-inline-431{background: rgba(225, 48, 108, 0.125); color: rgb(225, 48, 108);}
.adp-inline-432{background: rgb(225, 48, 108);}
.adp-inline-433{background: rgb(225, 48, 108);}
.adp-inline-434{color: rgb(255, 255, 255);}
.adp-inline-435{background: rgba(225, 48, 108, 0.125); color: rgb(225, 48, 108);}
.adp-inline-436{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-437{--member-color: #ff6b00; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-438{object-position: center 20%;}
.adp-inline-439{--member-color: #a855f7; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;}
.adp-inline-440{object-position: center top;}
.adp-inline-441{--member-color: #ec4899; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;}
.adp-inline-442{object-position: center 20%;}
.adp-inline-443{--member-color: #059669; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;}
.adp-inline-444{object-position: center top;}
.adp-inline-445{--member-color: #f59e0b; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;}
.adp-inline-446{object-position: center 10%;}
.adp-inline-447{--member-color: #0ea5e9; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;}
.adp-inline-448{object-position: center top;}
.adp-inline-449{--member-color: #8b5cf6; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;}
.adp-inline-450{object-position: center top;}
.adp-inline-451{--member-color: #10b981; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;}
.adp-inline-452{object-position: center top;}
.adp-inline-453{--member-color: #ef4444; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;}
.adp-inline-454{object-position: center top;}
.adp-inline-455{--member-color: #1877f2; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;}
.adp-inline-456{object-position: center top;}
.adp-inline-457{--member-color: #ff6b00; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;}
.adp-inline-458{object-position: center top;}
.adp-inline-459{--member-color: #e1306c; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;}
.adp-inline-460{object-position: center top;}
.adp-inline-461{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-462{color: rgb(251, 191, 36);}
.adp-inline-463{color: rgb(16, 185, 129);}
.adp-inline-464{color: rgb(99, 102, 241);}
.adp-inline-465{color: rgb(249, 115, 22);}
.adp-inline-466{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-467{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;}
.adp-inline-468{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;}
.adp-inline-469{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;}
.adp-inline-470{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;}
.adp-inline-471{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;}
.adp-inline-472{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;}
.adp-inline-473{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;}
.adp-inline-474{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;}
.adp-inline-475{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;}
.adp-inline-476{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-477{opacity:1; transform: translateY(30px); transition: 0.6s 0.15s;}
.adp-inline-478{opacity:1; transform: translateY(30px); transition: 0.6s 0.25s;}
.adp-inline-479{color: rgb(129, 140, 248);}
.adp-inline-480{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-481{color: rgb(251, 191, 36);}
.adp-inline-482{color: rgb(16, 185, 129);}
.adp-inline-483{color: rgb(99, 102, 241);}
.adp-inline-484{color: rgb(249, 115, 22);}
.adp-inline-485{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-486{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;}
.adp-inline-487{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;}
.adp-inline-488{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;}
.adp-inline-489{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;}
.adp-inline-490{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;}
.adp-inline-491{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;}
.adp-inline-492{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;}
.adp-inline-493{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;}
.adp-inline-494{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;}
.adp-inline-495{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-496{opacity:1; transform: translateY(30px); transition: 0.6s 0.15s;}
.adp-inline-497{opacity:1; transform: translateY(30px); transition: 0.6s 0.25s;}
.adp-inline-498{color: rgb(129, 140, 248);}
.adp-inline-499{--pkg-color: #1877f2;}
.adp-inline-500{color: rgb(24, 119, 242); background: rgba(24, 119, 242, 0.082); border-color: rgba(24, 119, 242, 0.19);}
.adp-inline-501{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-502{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-503{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-504{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-505{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-506{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-507{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-508{background: transparent; border-color: rgb(24, 119, 242); color: rgb(24, 119, 242);}
.adp-inline-509{--pkg-color: #1877f2;}
.adp-inline-510{background: linear-gradient(135deg, rgb(24, 119, 242) 0%, rgb(13, 95, 212) 100%);}
.adp-inline-511{color: rgb(24, 119, 242); background: rgba(24, 119, 242, 0.082); border-color: rgba(24, 119, 242, 0.19);}
.adp-inline-512{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-513{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-514{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-515{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-516{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-517{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-518{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-519{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-520{background: linear-gradient(135deg, rgb(24, 119, 242) 0%, rgb(13, 95, 212) 100%); border-color: rgb(24, 119, 242); color: rgb(255, 255, 255);}
.adp-inline-521{--pkg-color: #1877f2;}
.adp-inline-522{color: rgb(24, 119, 242); background: rgba(24, 119, 242, 0.082); border-color: rgba(24, 119, 242, 0.19);}
.adp-inline-523{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-524{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-525{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-526{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-527{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-528{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-529{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-530{background: rgba(24, 119, 242, 0.094); color: rgb(24, 119, 242);}
.adp-inline-531{background: transparent; border-color: rgb(24, 119, 242); color: rgb(24, 119, 242);}
.adp-inline-532{font-size: clamp(1.5rem, 3vw, 2.3rem); font-weight: 900; margin-bottom: 10px;}
.adp-inline-533{font-size: 0.96rem; opacity:1;.85; max-width: 520px; margin: 0px auto 28px;}
.adp-inline-534{margin-top: 124.594px;}
.adp-inline-535{position: absolute; inset: 0px; width: 100%; height: 100%; pointer-events: none; z-index: 1; opacity:1;.95;}
.adp-inline-536{background: rgba(99, 102, 241, 0.08); border: 1px solid rgba(99, 102, 241, 0.2);}
.adp-inline-537{color: rgb(99, 102, 241);}
.adp-inline-538{background: rgba(249, 115, 22, 0.08); border: 1px solid rgba(249, 115, 22, 0.2);}
.adp-inline-539{color: rgb(249, 115, 22);}
.adp-inline-540{background: rgba(16, 185, 129, 0.08); border: 1px solid rgba(16, 185, 129, 0.2);}
.adp-inline-541{color: rgb(16, 185, 129);}
.adp-inline-542{background: rgba(236, 72, 153, 0.08); border: 1px solid rgba(236, 72, 153, 0.2);}
.adp-inline-543{color: rgb(236, 72, 153);}
.adp-inline-544{width: 500px; height: 500px;}
.adp-inline-545{width: 470px; height: 470px;}
.adp-inline-546{width: 360px; height: 360px;}
.adp-inline-547{width: 236px; height: 236px;}
.adp-inline-548{left: calc(50% + 1.10218e-14px); top: calc(50% - 180px); --service-color: #1877f2; --service-gradient: linear-gradient(135deg, #1877f2, #0d5fd4);}
.adp-inline-549{width: 60px; height: 60px;}
.adp-inline-550{width: 40px; height: 40px;}
.adp-inline-551{background: rgb(24, 119, 242);}
.adp-inline-552{border-color: rgb(24, 119, 242);}
.adp-inline-553{left: calc(50% + 155.885px); top: calc(50% - 90px); --service-color: #ea4335; --service-gradient: linear-gradient(135deg, #ea4335, #c5221f);}
.adp-inline-554{width: 60px; height: 60px;}
.adp-inline-555{width: 40px; height: 40px;}
.adp-inline-556{background: rgb(234, 67, 53);}
.adp-inline-557{border-color: rgb(234, 67, 53);}
.adp-inline-558{left: calc(50% + 155.885px); top: calc(50% + 90px); --service-color: #ff6b00; --service-gradient: linear-gradient(135deg, #ff6b00, #e05a00);}
.adp-inline-559{width: 60px; height: 60px;}
.adp-inline-560{width: 40px; height: 40px;}
.adp-inline-561{background: rgb(255, 107, 0);}
.adp-inline-562{border-color: rgb(255, 107, 0);}
.adp-inline-563{left: calc(50% + 1.10218e-14px); top: calc(50% + 180px); --service-color: #1a2aff; --service-gradient: linear-gradient(135deg, #1a2aff, #0d1499);}
.adp-inline-564{width: 60px; height: 60px;}
.adp-inline-565{width: 40px; height: 40px;}
.adp-inline-566{background: rgb(26, 42, 255);}
.adp-inline-567{border-color: rgb(26, 42, 255);}
.adp-inline-568{left: calc(50% - 155.885px); top: calc(50% + 90px); --service-color: #e1306c; --service-gradient: linear-gradient(135deg, #f09433, #dc2743, #bc1888);}
.adp-inline-569{width: 60px; height: 60px;}
.adp-inline-570{width: 40px; height: 40px;}
.adp-inline-571{background: rgb(225, 48, 108);}
.adp-inline-572{border-color: rgb(225, 48, 108);}
.adp-inline-573{left: calc(50% - 155.885px); top: calc(50% - 90px); --service-color: #059669; --service-gradient: linear-gradient(135deg, #059669, #047857);}
.adp-inline-574{width: 60px; height: 60px;}
.adp-inline-575{width: 40px; height: 40px;}
.adp-inline-576{background: rgb(5, 150, 105);}
.adp-inline-577{border-color: rgb(5, 150, 105);}
.adp-inline-578{width: 124px; height: 124px;}
.adp-inline-579{--chip-color: #1877f2;}
.adp-inline-580{--chip-color: #ea4335;}
.adp-inline-581{--chip-color: #ff6b00;}
.adp-inline-582{--chip-color: #1a2aff;}
.adp-inline-583{--chip-color: #e1306c;}
.adp-inline-584{--chip-color: #059669;}
.adp-inline-585{text-decoration: none; color: inherit;}
.adp-inline-586{--card-color: #1877f2;}
.adp-inline-587{display: none; color: rgb(24, 119, 242);}
.adp-inline-588{text-decoration: none; color: inherit;}
.adp-inline-589{--card-color: #f97316;}
.adp-inline-590{display: none; color: rgb(249, 115, 22);}
.adp-inline-591{--card-color: #059669;}
.adp-inline-592{display: none; color: rgb(5, 150, 105);}
.adp-inline-593{--card-color: #ec4899;}
.adp-inline-594{display: none; color: rgb(236, 72, 153);}
.adp-inline-595{--card-color: #6366f1;}
.adp-inline-596{display: none; color: rgb(99, 102, 241);}
.adp-inline-597{text-decoration: none; color: inherit;}
.adp-inline-598{--card-color: #ea4335;}
.adp-inline-599{display: none; color: rgb(234, 67, 53);}
.adp-inline-600{text-decoration: none; color: inherit;}
.adp-inline-601{--card-color: #f59e0b;}
.adp-inline-602{display: none; color: rgb(245, 158, 11);}
.adp-inline-603{text-decoration: none; color: inherit;}
.adp-inline-604{--card-color: #0ea5e9;}
.adp-inline-605{display: none; color: rgb(14, 165, 233);}
.adp-inline-606{--card-color: #8b5cf6;}
.adp-inline-607{display: none; color: rgb(139, 92, 246);}
.adp-inline-608{text-decoration: none; color: inherit;}
.adp-inline-609{--card-color: #10b981;}
.adp-inline-610{display: none; color: rgb(16, 185, 129);}
.adp-inline-611{--card-color: #ef4444;}
.adp-inline-612{display: none; color: rgb(239, 68, 68);}
.adp-inline-613{text-decoration: none; color: inherit;}
.adp-inline-614{--card-color: #1a2aff;}
.adp-inline-615{display: none; color: rgb(26, 42, 255);}
.adp-inline-616{text-decoration: none; color: inherit;}
.adp-inline-617{--card-color: #ff6b00;}
.adp-inline-618{display: none; color: rgb(255, 107, 0);}
.adp-inline-619{text-decoration: none; color: inherit;}
.adp-inline-620{--card-color: #1877f2;}
.adp-inline-621{display: none; color: rgb(24, 119, 242);}
.adp-inline-622{text-decoration: none; color: inherit;}
.adp-inline-623{--card-color: #f97316;}
.adp-inline-624{display: none; color: rgb(249, 115, 22);}
.adp-inline-625{--card-color: #059669;}
.adp-inline-626{display: none; color: rgb(5, 150, 105);}
.adp-inline-627{--card-color: #ec4899;}
.adp-inline-628{display: none; color: rgb(236, 72, 153);}
.adp-inline-629{--card-color: #6366f1;}
.adp-inline-630{display: none; color: rgb(99, 102, 241);}
.adp-inline-631{text-decoration: none; color: inherit;}
.adp-inline-632{--card-color: #ea4335;}
.adp-inline-633{display: none; color: rgb(234, 67, 53);}
.adp-inline-634{text-decoration: none; color: inherit;}
.adp-inline-635{--card-color: #f59e0b;}
.adp-inline-636{display: none; color: rgb(245, 158, 11);}
.adp-inline-637{text-decoration: none; color: inherit;}
.adp-inline-638{--card-color: #0ea5e9;}
.adp-inline-639{display: none; color: rgb(14, 165, 233);}
.adp-inline-640{--card-color: #8b5cf6;}
.adp-inline-641{display: none; color: rgb(139, 92, 246);}
.adp-inline-642{text-decoration: none; color: inherit;}
.adp-inline-643{--card-color: #10b981;}
.adp-inline-644{display: none; color: rgb(16, 185, 129);}
.adp-inline-645{--card-color: #ef4444;}
.adp-inline-646{display: none; color: rgb(239, 68, 68);}
.adp-inline-647{text-decoration: none; color: inherit;}
.adp-inline-648{--card-color: #1a2aff;}
.adp-inline-649{display: none; color: rgb(26, 42, 255);}
.adp-inline-650{text-decoration: none; color: inherit;}
.adp-inline-651{--card-color: #ff6b00;}
.adp-inline-652{display: none; color: rgb(255, 107, 0);}
.adp-inline-653{text-decoration: none; color: inherit;}
.adp-inline-654{--card-color: #1877f2;}
.adp-inline-655{display: none; color: rgb(24, 119, 242);}
.adp-inline-656{text-decoration: none; color: inherit;}
.adp-inline-657{--card-color: #f97316;}
.adp-inline-658{display: none; color: rgb(249, 115, 22);}
.adp-inline-659{--card-color: #059669;}
.adp-inline-660{display: none; color: rgb(5, 150, 105);}
.adp-inline-661{--card-color: #ec4899;}
.adp-inline-662{display: none; color: rgb(236, 72, 153);}
.adp-inline-663{--card-color: #6366f1;}
.adp-inline-664{display: none; color: rgb(99, 102, 241);}
.adp-inline-665{text-decoration: none; color: inherit;}
.adp-inline-666{--card-color: #ea4335;}
.adp-inline-667{display: none; color: rgb(234, 67, 53);}
.adp-inline-668{text-decoration: none; color: inherit;}
.adp-inline-669{--card-color: #f59e0b;}
.adp-inline-670{display: none; color: rgb(245, 158, 11);}
.adp-inline-671{text-decoration: none; color: inherit;}
.adp-inline-672{--card-color: #0ea5e9;}
.adp-inline-673{display: none; color: rgb(14, 165, 233);}
.adp-inline-674{--card-color: #8b5cf6;}
.adp-inline-675{display: none; color: rgb(139, 92, 246);}
.adp-inline-676{text-decoration: none; color: inherit;}
.adp-inline-677{--card-color: #10b981;}
.adp-inline-678{display: none; color: rgb(16, 185, 129);}
.adp-inline-679{--card-color: #ef4444;}
.adp-inline-680{display: none; color: rgb(239, 68, 68);}
.adp-inline-681{text-decoration: none; color: inherit;}
.adp-inline-682{--card-color: #1a2aff;}
.adp-inline-683{display: none; color: rgb(26, 42, 255);}
.adp-inline-684{text-decoration: none; color: inherit;}
.adp-inline-685{--card-color: #ff6b00;}
.adp-inline-686{display: none; color: rgb(255, 107, 0);}
.adp-inline-687{text-decoration: none; color: inherit;}
.adp-inline-688{--card-color: #1877f2;}
.adp-inline-689{display: none; color: rgb(24, 119, 242);}
.adp-inline-690{text-decoration: none; color: inherit;}
.adp-inline-691{--card-color: #f97316;}
.adp-inline-692{display: none; color: rgb(249, 115, 22);}
.adp-inline-693{--card-color: #059669;}
.adp-inline-694{display: none; color: rgb(5, 150, 105);}
.adp-inline-695{--card-color: #ec4899;}
.adp-inline-696{display: none; color: rgb(236, 72, 153);}
.adp-inline-697{--card-color: #6366f1;}
.adp-inline-698{display: none; color: rgb(99, 102, 241);}
.adp-inline-699{text-decoration: none; color: inherit;}
.adp-inline-700{--card-color: #ea4335;}
.adp-inline-701{display: none; color: rgb(234, 67, 53);}
.adp-inline-702{text-decoration: none; color: inherit;}
.adp-inline-703{--card-color: #f59e0b;}
.adp-inline-704{display: none; color: rgb(245, 158, 11);}
.adp-inline-705{text-decoration: none; color: inherit;}
.adp-inline-706{--card-color: #0ea5e9;}
.adp-inline-707{display: none; color: rgb(14, 165, 233);}
.adp-inline-708{--card-color: #8b5cf6;}
.adp-inline-709{display: none; color: rgb(139, 92, 246);}
.adp-inline-710{text-decoration: none; color: inherit;}
.adp-inline-711{--card-color: #10b981;}
.adp-inline-712{display: none; color: rgb(16, 185, 129);}
.adp-inline-713{--card-color: #ef4444;}
.adp-inline-714{display: none; color: rgb(239, 68, 68);}
.adp-inline-715{text-decoration: none; color: inherit;}
.adp-inline-716{--card-color: #1a2aff;}
.adp-inline-717{display: none; color: rgb(26, 42, 255);}
.adp-inline-718{text-decoration: none; color: inherit;}
.adp-inline-719{--card-color: #ff6b00;}
.adp-inline-720{display: none; color: rgb(255, 107, 0);}
.adp-inline-721{opacity: 1; transform: translateY(0px); transition: 0.6s;}
.adp-inline-722{--service-color: #1877f2; --service-dark: #0a4fd4; --service-rgb: 24, 119, 242; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-723{color: rgb(24, 119, 242);}
.adp-inline-724{color: rgb(24, 119, 242);}
.adp-inline-725{color: rgb(24, 119, 242);}
.adp-inline-726{background: rgba(24, 119, 242, 0.18); color: rgb(24, 119, 242);}
.adp-inline-727{background: rgba(24, 119, 242, 0.18); color: rgb(24, 119, 242);}
.adp-inline-728{background: rgba(24, 119, 242, 0.18); color: rgb(24, 119, 242);}
.adp-inline-729{background: rgb(24, 119, 242);}
.adp-inline-730{--service-color: #ea4335; --service-dark: #b31412; --service-rgb: 234, 67, 53; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.06s;}
.adp-inline-731{color: rgb(234, 67, 53);}
.adp-inline-732{color: rgb(234, 67, 53);}
.adp-inline-733{color: rgb(234, 67, 53);}
.adp-inline-734{background: rgba(234, 67, 53, 0.18); color: rgb(234, 67, 53);}
.adp-inline-735{background: rgba(234, 67, 53, 0.18); color: rgb(234, 67, 53);}
.adp-inline-736{background: rgba(234, 67, 53, 0.18); color: rgb(234, 67, 53);}
.adp-inline-737{background: rgb(234, 67, 53);}
.adp-inline-738{--service-color: #ff6b00; --service-dark: #c2410c; --service-rgb: 255, 107, 0; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.12s;}
.adp-inline-739{color: rgb(255, 107, 0);}
.adp-inline-740{color: rgb(255, 107, 0);}
.adp-inline-741{color: rgb(255, 107, 0);}
.adp-inline-742{background: rgba(255, 107, 0, 0.18); color: rgb(255, 107, 0);}
.adp-inline-743{background: rgba(255, 107, 0, 0.18); color: rgb(255, 107, 0);}
.adp-inline-744{background: rgba(255, 107, 0, 0.18); color: rgb(255, 107, 0);}
.adp-inline-745{background: rgb(255, 107, 0);}
.adp-inline-746{--service-color: #6366f1; --service-dark: #4338ca; --service-rgb: 99, 102, 241; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.18s;}
.adp-inline-747{color: rgb(99, 102, 241);}
.adp-inline-748{color: rgb(99, 102, 241);}
.adp-inline-749{color: rgb(99, 102, 241);}
.adp-inline-750{background: rgba(99, 102, 241, 0.18); color: rgb(99, 102, 241);}
.adp-inline-751{background: rgba(99, 102, 241, 0.18); color: rgb(99, 102, 241);}
.adp-inline-752{background: rgba(99, 102, 241, 0.18); color: rgb(99, 102, 241);}
.adp-inline-753{background: rgb(99, 102, 241);}
.adp-inline-754{--service-color: #059669; --service-dark: #065f46; --service-rgb: 5, 150, 105; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.24s;}
.adp-inline-755{color: rgb(5, 150, 105);}
.adp-inline-756{color: rgb(5, 150, 105);}
.adp-inline-757{color: rgb(5, 150, 105);}
.adp-inline-758{background: rgba(5, 150, 105, 0.18); color: rgb(5, 150, 105);}
.adp-inline-759{background: rgba(5, 150, 105, 0.18); color: rgb(5, 150, 105);}
.adp-inline-760{background: rgba(5, 150, 105, 0.18); color: rgb(5, 150, 105);}
.adp-inline-761{background: rgb(5, 150, 105);}
.adp-inline-762{--service-color: #ec4899; --service-dark: #be185d; --service-rgb: 236, 72, 153; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;}
.adp-inline-763{color: rgb(236, 72, 153);}
.adp-inline-764{color: rgb(236, 72, 153);}
.adp-inline-765{color: rgb(236, 72, 153);}
.adp-inline-766{background: rgba(236, 72, 153, 0.18); color: rgb(236, 72, 153);}
.adp-inline-767{background: rgba(236, 72, 153, 0.18); color: rgb(236, 72, 153);}
.adp-inline-768{background: rgba(236, 72, 153, 0.18); color: rgb(236, 72, 153);}
.adp-inline-769{background: rgb(236, 72, 153);}
.adp-inline-770{--service-color: #0ea5e9; --service-dark: #0369a1; --service-rgb: 14, 165, 233; opacity: 1; transform: translateY(0px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.36s;}
.adp-inline-771{color: rgb(14, 165, 233);}
.adp-inline-772{color: rgb(14, 165, 233);}
.adp-inline-773{color: rgb(14, 165, 233);}
.adp-inline-774{background: rgba(14, 165, 233, 0.18); color: rgb(14, 165, 233);}
.adp-inline-775{background: rgba(14, 165, 233, 0.18); color: rgb(14, 165, 233);}
.adp-inline-776{background: rgba(14, 165, 233, 0.18); color: rgb(14, 165, 233);}
.adp-inline-777{background: rgb(14, 165, 233);}
.adp-inline-778{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-779{--step-color: #6366f1; --step-rgb: 99, 102, 241; opacity:1; transform: translateY(36px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-780{--step-color: #f97316; --step-rgb: 249, 115, 22; opacity:1; transform: translateY(36px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.08s;}
.adp-inline-781{--step-color: #1877f2; --step-rgb: 24, 119, 242; opacity:1; transform: translateY(36px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.16s;}
.adp-inline-782{--step-color: #10b981; --step-rgb: 16, 185, 129; opacity:1; transform: translateY(36px); transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.24s;}
.adp-inline-783{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-784{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-785{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-786{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-787{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-788{color: rgb(249, 115, 22); flex-shrink: 0;}
.adp-inline-789{opacity:1; transform: translateY(30px); transition: 0.6s 0.2s;}
.adp-inline-790{background: rgba(24, 119, 242, 0.15); color: rgb(24, 119, 242);}
.adp-inline-791{background: rgba(255, 107, 0, 0.15); color: rgb(255, 107, 0);}
.adp-inline-792{--card-color: #1877f2;}
.adp-inline-793{color: rgb(24, 119, 242); background: rgba(24, 119, 242, 0.082);}
.adp-inline-794{--card-color: #ff6b00;}
.adp-inline-795{color: rgb(255, 107, 0); background: rgba(255, 107, 0, 0.082);}
.adp-inline-796{--card-color: #10b981;}
.adp-inline-797{color: rgb(16, 185, 129); background: rgba(16, 185, 129, 0.082);}
.adp-inline-798{--card-color: #a855f7;}
.adp-inline-799{color: rgb(168, 85, 247); background: rgba(168, 85, 247, 0.082);}
.adp-inline-800{opacity:1; transform: translateY(30px); transition: 0.6s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-801{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-802{color: rgb(99, 102, 241);}
.adp-inline-803{color: rgb(249, 115, 22);}
.adp-inline-804{color: rgb(16, 185, 129);}
.adp-inline-805{color: rgb(236, 72, 153);}
.adp-inline-806{color: rgb(251, 191, 36);}
.adp-inline-807{color: rgb(251, 191, 36);}
.adp-inline-808{color: rgb(16, 185, 129);}
.adp-inline-809{--case-color: #1877f2;}
.adp-inline-810{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-811{color: rgb(24, 119, 242);}
.adp-inline-812{color: rgb(24, 119, 242);}
.adp-inline-813{color: rgb(24, 119, 242);}
.adp-inline-814{--case-color: #ff6b00;}
.adp-inline-815{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-816{color: rgb(255, 107, 0);}
.adp-inline-817{color: rgb(255, 107, 0);}
.adp-inline-818{color: rgb(255, 107, 0);}
.adp-inline-819{--case-color: #f97316;}
.adp-inline-820{background: rgba(249, 115, 22, 0.125); color: rgb(249, 115, 22);}
.adp-inline-821{color: rgb(249, 115, 22);}
.adp-inline-822{color: rgb(249, 115, 22);}
.adp-inline-823{color: rgb(249, 115, 22);}
.adp-inline-824{--case-color: #059669;}
.adp-inline-825{background: rgba(5, 150, 105, 0.125); color: rgb(5, 150, 105);}
.adp-inline-826{color: rgb(5, 150, 105);}
.adp-inline-827{color: rgb(5, 150, 105);}
.adp-inline-828{color: rgb(5, 150, 105);}
.adp-inline-829{color: rgb(24, 119, 242);}
.adp-inline-830{color: rgb(234, 67, 53);}
.adp-inline-831{color: rgb(255, 107, 0);}
.adp-inline-832{color: rgb(26, 42, 255);}
.adp-inline-833{color: rgb(5, 150, 105);}
.adp-inline-834{color: rgb(225, 48, 108);}
.adp-inline-835{--platform-color: #1877f2; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-836{background: rgba(24, 119, 242, 0.15); color: rgb(24, 119, 242);}
.adp-inline-837{border-color: rgba(24, 119, 242, 0.25); background: rgba(24, 119, 242, 0.063); color: rgb(24, 119, 242);}
.adp-inline-838{border-color: rgba(24, 119, 242, 0.25); background: rgba(24, 119, 242, 0.063); color: rgb(24, 119, 242);}
.adp-inline-839{border-color: rgba(24, 119, 242, 0.25); background: rgba(24, 119, 242, 0.063); color: rgb(24, 119, 242);}
.adp-inline-840{background: rgb(24, 119, 242);}
.adp-inline-841{background: rgb(24, 119, 242);}
.adp-inline-842{color: rgb(255, 255, 255);}
.adp-inline-843{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-844{background: rgb(24, 119, 242);}
.adp-inline-845{background: rgb(24, 119, 242);}
.adp-inline-846{color: rgb(255, 255, 255);}
.adp-inline-847{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-848{background: rgb(24, 119, 242);}
.adp-inline-849{background: rgb(24, 119, 242);}
.adp-inline-850{color: rgb(255, 255, 255);}
.adp-inline-851{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-852{background: rgb(24, 119, 242);}
.adp-inline-853{background: rgb(24, 119, 242);}
.adp-inline-854{color: rgb(255, 255, 255);}
.adp-inline-855{background: rgba(24, 119, 242, 0.125); color: rgb(24, 119, 242);}
.adp-inline-856{--platform-color: #ea4335; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-857{background: rgba(234, 67, 53, 0.15); color: rgb(234, 67, 53);}
.adp-inline-858{border-color: rgba(234, 67, 53, 0.25); background: rgba(234, 67, 53, 0.063); color: rgb(234, 67, 53);}
.adp-inline-859{border-color: rgba(234, 67, 53, 0.25); background: rgba(234, 67, 53, 0.063); color: rgb(234, 67, 53);}
.adp-inline-860{border-color: rgba(234, 67, 53, 0.25); background: rgba(234, 67, 53, 0.063); color: rgb(234, 67, 53);}
.adp-inline-861{background: rgb(234, 67, 53);}
.adp-inline-862{background: rgb(234, 67, 53);}
.adp-inline-863{color: rgb(255, 255, 255);}
.adp-inline-864{background: rgba(234, 67, 53, 0.125); color: rgb(234, 67, 53);}
.adp-inline-865{background: rgb(234, 67, 53);}
.adp-inline-866{background: rgb(234, 67, 53);}
.adp-inline-867{color: rgb(255, 255, 255);}
.adp-inline-868{background: rgba(234, 67, 53, 0.125); color: rgb(234, 67, 53);}
.adp-inline-869{background: rgb(234, 67, 53);}
.adp-inline-870{background: rgb(234, 67, 53);}
.adp-inline-871{color: rgb(255, 255, 255);}
.adp-inline-872{background: rgba(234, 67, 53, 0.125); color: rgb(234, 67, 53);}
.adp-inline-873{background: rgb(234, 67, 53);}
.adp-inline-874{background: rgb(234, 67, 53);}
.adp-inline-875{color: rgb(255, 255, 255);}
.adp-inline-876{background: rgba(234, 67, 53, 0.125); color: rgb(234, 67, 53);}
.adp-inline-877{--platform-color: #ff6b00; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-878{background: rgba(255, 107, 0, 0.15); color: rgb(255, 107, 0);}
.adp-inline-879{border-color: rgba(255, 107, 0, 0.25); background: rgba(255, 107, 0, 0.063); color: rgb(255, 107, 0);}
.adp-inline-880{border-color: rgba(255, 107, 0, 0.25); background: rgba(255, 107, 0, 0.063); color: rgb(255, 107, 0);}
.adp-inline-881{border-color: rgba(255, 107, 0, 0.25); background: rgba(255, 107, 0, 0.063); color: rgb(255, 107, 0);}
.adp-inline-882{background: rgb(255, 107, 0);}
.adp-inline-883{background: rgb(255, 107, 0);}
.adp-inline-884{color: rgb(255, 255, 255);}
.adp-inline-885{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-886{background: rgb(255, 107, 0);}
.adp-inline-887{background: rgb(255, 107, 0);}
.adp-inline-888{color: rgb(255, 255, 255);}
.adp-inline-889{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-890{background: rgb(255, 107, 0);}
.adp-inline-891{background: rgb(255, 107, 0);}
.adp-inline-892{color: rgb(255, 255, 255);}
.adp-inline-893{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-894{background: rgb(255, 107, 0);}
.adp-inline-895{background: rgb(255, 107, 0);}
.adp-inline-896{color: rgb(255, 255, 255);}
.adp-inline-897{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-898{background: rgb(255, 107, 0);}
.adp-inline-899{background: rgb(255, 107, 0);}
.adp-inline-900{color: rgb(255, 255, 255);}
.adp-inline-901{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-902{background: rgb(255, 107, 0);}
.adp-inline-903{background: rgb(255, 107, 0);}
.adp-inline-904{color: rgb(255, 255, 255);}
.adp-inline-905{background: rgba(255, 107, 0, 0.125); color: rgb(255, 107, 0);}
.adp-inline-906{--platform-color: #1a2aff; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-907{background: rgba(26, 42, 255, 0.15); color: rgb(26, 42, 255);}
.adp-inline-908{border-color: rgba(26, 42, 255, 0.25); background: rgba(26, 42, 255, 0.063); color: rgb(26, 42, 255);}
.adp-inline-909{border-color: rgba(26, 42, 255, 0.25); background: rgba(26, 42, 255, 0.063); color: rgb(26, 42, 255);}
.adp-inline-910{border-color: rgba(26, 42, 255, 0.25); background: rgba(26, 42, 255, 0.063); color: rgb(26, 42, 255);}
.adp-inline-911{background: rgb(26, 42, 255);}
.adp-inline-912{background: rgb(26, 42, 255);}
.adp-inline-913{color: rgb(255, 255, 255);}
.adp-inline-914{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-915{background: rgb(26, 42, 255);}
.adp-inline-916{background: rgb(26, 42, 255);}
.adp-inline-917{color: rgb(255, 255, 255);}
.adp-inline-918{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-919{background: rgb(26, 42, 255);}
.adp-inline-920{background: rgb(26, 42, 255);}
.adp-inline-921{color: rgb(255, 255, 255);}
.adp-inline-922{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-923{background: rgb(26, 42, 255);}
.adp-inline-924{background: rgb(26, 42, 255);}
.adp-inline-925{color: rgb(255, 255, 255);}
.adp-inline-926{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-927{background: rgb(26, 42, 255);}
.adp-inline-928{background: rgb(26, 42, 255);}
.adp-inline-929{color: rgb(255, 255, 255);}
.adp-inline-930{background: rgba(26, 42, 255, 0.125); color: rgb(26, 42, 255);}
.adp-inline-931{--platform-color: #059669; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-932{background: rgba(5, 150, 105, 0.15); color: rgb(5, 150, 105);}
.adp-inline-933{border-color: rgba(5, 150, 105, 0.25); background: rgba(5, 150, 105, 0.063); color: rgb(5, 150, 105);}
.adp-inline-934{border-color: rgba(5, 150, 105, 0.25); background: rgba(5, 150, 105, 0.063); color: rgb(5, 150, 105);}
.adp-inline-935{border-color: rgba(5, 150, 105, 0.25); background: rgba(5, 150, 105, 0.063); color: rgb(5, 150, 105);}
.adp-inline-936{background: rgb(5, 150, 105);}
.adp-inline-937{background: rgb(5, 150, 105);}
.adp-inline-938{color: rgb(255, 255, 255);}
.adp-inline-939{background: rgba(5, 150, 105, 0.125); color: rgb(5, 150, 105);}
.adp-inline-940{background: rgb(5, 150, 105);}
.adp-inline-941{background: rgb(5, 150, 105);}
.adp-inline-942{color: rgb(255, 255, 255);}
.adp-inline-943{background: rgba(5, 150, 105, 0.125); color: rgb(5, 150, 105);}
.adp-inline-944{background: rgb(5, 150, 105);}
.adp-inline-945{background: rgb(5, 150, 105);}
.adp-inline-946{color: rgb(255, 255, 255);}
.adp-inline-947{background: rgba(5, 150, 105, 0.125); color: rgb(5, 150, 105);}
.adp-inline-948{--platform-color: #e1306c; opacity:1; transform: translateY(30px); transition: 0.55s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-949{background: rgba(225, 48, 108, 0.15); color: rgb(225, 48, 108);}
.adp-inline-950{border-color: rgba(225, 48, 108, 0.25); background: rgba(225, 48, 108, 0.063); color: rgb(225, 48, 108);}
.adp-inline-951{border-color: rgba(225, 48, 108, 0.25); background: rgba(225, 48, 108, 0.063); color: rgb(225, 48, 108);}
.adp-inline-952{border-color: rgba(225, 48, 108, 0.25); background: rgba(225, 48, 108, 0.063); color: rgb(225, 48, 108);}
.adp-inline-953{background: rgb(225, 48, 108);}
.adp-inline-954{background: rgb(225, 48, 108);}
.adp-inline-955{color: rgb(255, 255, 255);}
.adp-inline-956{background: rgba(225, 48, 108, 0.125); color: rgb(225, 48, 108);}
.adp-inline-957{background: rgb(225, 48, 108);}
.adp-inline-958{background: rgb(225, 48, 108);}
.adp-inline-959{color: rgb(255, 255, 255);}
.adp-inline-960{background: rgba(225, 48, 108, 0.125); color: rgb(225, 48, 108);}
.adp-inline-961{background: rgb(225, 48, 108);}
.adp-inline-962{background: rgb(225, 48, 108);}
.adp-inline-963{color: rgb(255, 255, 255);}
.adp-inline-964{background: rgba(225, 48, 108, 0.125); color: rgb(225, 48, 108);}
.adp-inline-965{background: rgb(225, 48, 108);}
.adp-inline-966{background: rgb(225, 48, 108);}
.adp-inline-967{color: rgb(255, 255, 255);}
.adp-inline-968{background: rgba(225, 48, 108, 0.125); color: rgb(225, 48, 108);}
.adp-inline-969{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-970{--member-color: #ff6b00; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-971{object-position: center 20%;}
.adp-inline-972{--member-color: #a855f7; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;}
.adp-inline-973{object-position: center top;}
.adp-inline-974{--member-color: #ec4899; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;}
.adp-inline-975{object-position: center 20%;}
.adp-inline-976{--member-color: #059669; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;}
.adp-inline-977{object-position: center top;}
.adp-inline-978{--member-color: #f59e0b; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;}
.adp-inline-979{object-position: center 10%;}
.adp-inline-980{--member-color: #0ea5e9; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;}
.adp-inline-981{object-position: center top;}
.adp-inline-982{--member-color: #8b5cf6; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;}
.adp-inline-983{object-position: center top;}
.adp-inline-984{--member-color: #10b981; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;}
.adp-inline-985{object-position: center top;}
.adp-inline-986{--member-color: #ef4444; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;}
.adp-inline-987{object-position: center top;}
.adp-inline-988{--member-color: #1877f2; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;}
.adp-inline-989{object-position: center top;}
.adp-inline-990{--member-color: #ff6b00; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.5s;}
.adp-inline-991{object-position: center top;}
.adp-inline-992{--member-color: #e1306c; opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;}
.adp-inline-993{object-position: center top;}
.adp-inline-994{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-995{color: rgb(251, 191, 36);}
.adp-inline-996{color: rgb(16, 185, 129);}
.adp-inline-997{color: rgb(99, 102, 241);}
.adp-inline-998{color: rgb(249, 115, 22);}
.adp-inline-999{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1);}
.adp-inline-1000{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.05s;}
.adp-inline-1001{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.1s;}
.adp-inline-1002{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;}
.adp-inline-1003{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.2s;}
.adp-inline-1004{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;}
.adp-inline-1005{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.3s;}
.adp-inline-1006{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.35s;}
.adp-inline-1007{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.4s;}
.adp-inline-1008{opacity:1; transform: translateY(30px); transition: 0.45s cubic-bezier(0.16, 1, 0.3, 1) 0.45s;}
.adp-inline-1009{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-1010{opacity:1; transform: translateY(30px); transition: 0.6s 0.15s;}
.adp-inline-1011{opacity:1; transform: translateY(30px); transition: 0.6s 0.25s;}
.adp-inline-1012{color: rgb(129, 140, 248);}
/* Externalized inline presentation rules */
.adp-inline-1{opacity:1; transform: translateY(30px); transition: 0.6s;}
.adp-inline-2{opacity:1; transform: translateY(30px); transition: 0.6s 0.15s;}
.adp-inline-3{opacity:1; transform: translateY(30px); transition: 0.6s 0.25s;}
.adp-inline-4{color: rgb(129, 140, 248);}

/* About page externalized presentation */