@font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-4.woff2) format('woff2');
     unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-5.woff2) format('woff2');
     unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-6.woff2) format('woff2');
     unicode-range: U+1F00-1FFF;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-3.woff2) format('woff2');
     unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-2.woff2) format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-1.woff2) format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 400;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-0.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-4.woff2) format('woff2');
     unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-5.woff2) format('woff2');
     unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-6.woff2) format('woff2');
     unicode-range: U+1F00-1FFF;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-3.woff2) format('woff2');
     unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-2.woff2) format('woff2');
     unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-1.woff2) format('woff2');
     unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
 }

 @font-face {
     font-family: 'Inter';
     font-style: normal;
     font-weight: 600;
     font-display: swap;
     src: url(../assets/fonts/inter-subset-0.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
 }

 :root {
     --ix-bg: #0B0B0C;
     --ix-nav-bg: rgba(11, 11, 12, 0.85);
     --ix-text: #F5F5F7;
     --ix-text-secondary: #9CA3AF;
     --ix-text-reverse: #1D1D1F;
     --ix-accent: #5de0e6;
     --ix-accent-gradient: linear-gradient(90deg, #5de0e6 0%, #004aad 100%);
     --ix-surface: rgba(255, 255, 255, 0.05);
     --ix-surface-hover: rgba(255, 255, 255, 0.08);
     --ix-border: rgba(255, 255, 255, 0.1);
     --ix-glow: 0 0 20px rgba(93, 224, 230, 0.3);
     --ix-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
 }

 [data-theme="light"] {
     --ix-bg: #F5F5F7;
     --ix-nav-bg: rgba(245, 245, 247, 0.85);
     --ix-text: #1D1D1F;
     --ix-text-secondary: #515154;
     --ix-text-reverse: #FFFFFF;
     --ix-surface: #FFFFFF;
     --ix-surface-hover: #F2F2F7;
     --ix-border: rgba(0, 0, 0, 0.12);
     --ix-glow: 0 0 25px rgba(93, 224, 230, 0.5);
     --ix-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.15);
 }

 body {
     background-color: var(--ix-bg);
     color: var(--ix-text);
     font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     overflow-x: hidden;
     transition: background-color 0.3s ease, color 0.3s ease;
 }

 h1,
 h2,
 h3,
 h4,
 h5,
 h6 {
     font-weight: 600;
     letter-spacing: -0.02em;
     color: var(--ix-text);
 }

 .text-gradient {
     background: var(--ix-accent-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }

 .text-body {
     color: var(--ix-text) !important;
 }

 .text-secondary-custom {
     color: var(--ix-text-secondary);
 }

 .form-control,
 .form-select {
     background-color: var(--ix-surface);
     border: 1px solid var(--ix-border);
     color: var(--ix-text);
     border-radius: 12px;
 }

 .form-control:focus,
 .form-select:focus {
     background-color: var(--ix-surface);
     color: var(--ix-text);
     border-color: var(--ix-accent);
     box-shadow: 0 0 0 0.25rem rgba(93, 224, 230, 0.25);
 }

 .form-label {
     color: var(--ix-text-secondary);
 }

 .navbar {
     background: var(--ix-nav-bg);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border-bottom: 1px solid var(--ix-border);
     transition: all 0.3s ease;
 }

 .navbar-brand img {
     height: 32px;
     width: auto;
 }

 .nav-link {
     color: var(--ix-text-secondary) !important;
     font-size: 0.9rem;
     transition: color 0.2s ease;
 }

 .nav-link:hover,
 .nav-link.active {
     color: var(--ix-text) !important;
 }

 .navbar-toggler {
     border-color: var(--ix-border) !important;
 }

 .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
 }

 [data-theme="light"] .navbar-toggler-icon {
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%280, 0, 0, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important;
 }

 [data-theme="light"] .navbar-toggler {
     border-color: rgba(0, 0, 0, 0.1) !important;
 }

 .btn-primary-custom {
     background: var(--ix-accent-gradient);
     color: white;
     border-radius: 980px;
     padding: 8px 24px;
     font-size: 0.9rem;
     font-weight: 600;
     border: none;
     transition: all 0.3s ease;
     box-shadow: 0 0 10px rgba(93, 224, 230, 0.2);
 }

 .btn-primary-custom:hover {
     background: var(--ix-accent-gradient);
     transform: translateY(-1px);
     box-shadow: 0 0 20px rgba(93, 224, 230, 0.5);
     opacity: 0.95;
     color: white;
 }

 .hero-section {
     position: relative;
     min-height: 100vh;
     display: flex;
     align-items: center;
     justify-content: center;
     text-align: center;
     padding-top: 80px;
     overflow: hidden;
 }

 .premium-glow {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     width: 60vw;
     height: 60vw;
     background: radial-gradient(circle, rgba(93, 224, 230, 0.15) 0%, rgba(0, 74, 173, 0.05) 40%, transparent 70%);
     filter: blur(60px);
     z-index: 0;
     pointer-events: none;
     transition: opacity 0.3s ease;
 }

 section {
     position: relative;
     overflow: hidden;
 }

 .container {
     position: relative;
     z-index: 1;
 }

 [data-theme="light"] .premium-glow {
     opacity: 1;
     background: radial-gradient(circle at center, rgba(93, 224, 230, 0.25) 0%, rgba(93, 224, 230, 0.05) 50%, transparent 70%);
 }

 .hero-title {
     font-size: 3.5rem;
     line-height: 1.1;
     margin-bottom: 1.5rem;
     font-weight: 700;
     will-change: filter, opacity;
 }

 .hero-subtitle {
     font-size: 1.5rem;
     color: var(--ix-text-secondary);
     max-width: 700px;
     margin: 0 auto 2.5rem;
     font-weight: 400;
 }

 .cta-group {
     gap: 1rem;
     margin-bottom: 4rem;
 }

 .btn-cta-primary {
     background: var(--ix-accent-gradient);
     color: white;
     border: none;
     border-radius: 980px;
     padding: 12px 32px;
     font-size: 1.1rem;
     font-weight: 600;
     transition: all 0.3s ease;
     box-shadow: var(--ix-glow);
 }

 .btn-cta-primary:hover {
     transform: translateY(-2px);
     box-shadow: 0 0 30px rgba(93, 224, 230, 0.5);
     color: white;
 }

 .btn-cta-secondary {
     background: transparent;
     color: var(--ix-accent);
     border: 1px solid rgba(93, 224, 230, 0.3);
     border-radius: 980px;
     padding: 12px 32px;
     font-size: 1.1rem;
     font-weight: 500;
     transition: all 0.3s ease;
 }

 .btn-cta-secondary:hover {
     border-color: var(--ix-accent);
     background: rgba(93, 224, 230, 0.1);
     color: var(--ix-accent);
 }

 .trust-line {
     font-size: 0.9rem;
     color: var(--ix-text-secondary);
     opacity: 0.7;
     margin-bottom: 2rem;
 }

 .section-padding {
     padding: 80px 0;
 }

 .premium-list-item {
     padding: 1rem;
     border-radius: 12px;
     transition: background 0.3s ease;
 }

 .premium-list-item:hover {
     background: var(--ix-surface);
 }

 .premium-number {
     font-family: 'Inter', sans-serif;
     font-weight: 300;
     opacity: 0.8;
 }

 .img-premium {
     border-radius: 30px;
     box-shadow: var(--ix-shadow);
     border: 1px solid var(--ix-border);
     transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1);
     transform-origin: center center;
 }

 .img-premium:hover {
     transform: scale(1.02);
     border-color: rgba(93, 224, 230, 0.2);
 }

 .premium-card-visual {
     position: relative;
     border-radius: 30px;
 }

 .feature-box {
     background: var(--ix-surface);
     border: 1px solid var(--ix-border);
     border-radius: 20px;
     padding: 2rem;
     height: 100%;
     transition: all 0.3s ease;
     text-align: center;
     color: var(--ix-text);
 }

 .feature-box:hover {
     background: var(--ix-surface-hover);
     transform: translateY(-5px);
     box-shadow: var(--ix-shadow);
 }

 .feature-icon {
     font-size: 3rem;
     margin-bottom: 1.5rem;
     background: var(--ix-accent-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     display: inline-block;
 }

 .fade-up {
     opacity: 0;
     transform: translateY(30px);
     transition: opacity 0.8s ease-out, transform 0.8s ease-out;
 }

 .fade-up.visible {
     opacity: 1;
     transform: translateY(0);
 }

 /* Waitlist Specific Styles */
 .btn-social {
     display: flex;
     align-items: center;
     justify-content: center;
     width: 100%;
     margin-bottom: 1rem;
     padding: 0.75rem 1rem;
     background-color: white;
     color: black;
     border: 1.5px solid #000;
     border-radius: 999px;
     /* Pill shape */
     font-weight: 600;
     font-size: 1rem;
     transition: background-color 0.2s;
     text-decoration: none;
 }

 .btn-social:hover {
     background-color: #000;
     color: #fff;
     border-color: #000;
 }

 .btn-social i {
     font-size: 1.25rem;
     margin-right: 0.5rem;
 }

 .divider-container {
     display: flex;
     align-items: center;
     text-align: center;
     margin: 1.5rem 0;
 }

 .divider-line {
     flex-grow: 1;
     height: 1px;
     background-color: #e5e7eb;
 }

 .divider-text {
     padding: 0 1rem;
     color: #6b7280;
     font-size: 0.9rem;
 }

 .waitlist-card {
     background: white;
     padding: 2.5rem;
     border-radius: 1rem;
     box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
     border: 1px solid #e5e7eb;
     max-width: 420px !important;
 }

 .waitlist-input {
     background-color: white;
     border: 1px solid #d1d5db;
     color: #111827;
     padding: 0.75rem;
 }

 .waitlist-input:focus {
     background-color: white;
     border-color: #5de0e6;
     color: #111827;
     box-shadow: 0 0 0 2px rgba(93, 224, 230, 0.2);
 }

 .btn-waitlist-submit {
     background-color: #22ccee;
     /* Brighter cyan to match image */
     color: white;
     border: none;
     border-radius: 999px;
     padding: 0.75rem 1rem;
     font-weight: 700;
     font-size: 1.1rem;
     width: 100%;
     margin-top: 1rem;
 }

 .btn-waitlist-submit:hover {
     background-color: #06b6d4;
     color: white;
 }

 .light-mode-text {
     color: #111827 !important;
 }

 .light-mode-subtext {
     color: #6b7280 !important;
 }

 @media (max-width:768px) {
     .hero-title {
         font-size: 2.5rem;
     }

     .hero-subtitle {
         font-size: 1.2rem;
     }

     .section-padding {
         padding: 80px 0;
     }
 }

 .dashboard-img {
     height: 500px;
     width: 100%;
     object-fit: contain;
     background-color: var(--ix-bg);
     display: block;
     border-radius: 20px;
 }

 @media (max-width:768px) {
     .dashboard-img {
         height: 300px;
     }
 }

 #dashboardCarousel .carousel-inner {
     border-radius: 20px;
     overflow: hidden;
 }

 .rounded-premium {
     border-radius: 30px !important;
 }

 .testimonial-img {
     width: 100%;
     aspect-ratio: 2.05 / 1;
     object-fit: cover;
 }

 .social-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
     width: 40px;
     height: 40px;
     margin-right: 4px;
     text-decoration: none;
     font-size: 1.5rem;
     background: var(--ix-accent-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     transition: transform 0.3s ease, filter 0.3s ease;
 }

 .social-icon:hover {
     transform: translateY(-3px);
     filter: drop-shadow(0 0 10px rgba(93, 224, 230, 0.6));
 }

 .result-img-small {
     width: 100%;
     aspect-ratio: 1 / 1;
     object-fit: cover;
     border-radius: 20px !important;
     box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.3);
 }

 .premium-grid-2 {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 2rem;
     margin-top: 3rem;
 }

 .premium-grid-3 {
     display: grid;
     grid-template-columns: repeat(3, 1fr);
     gap: 2rem;
     margin-top: 3rem;
 }

 .glass-card {
     background: rgba(255, 255, 255, 0.7);
     backdrop-filter: blur(20px);
     -webkit-backdrop-filter: blur(20px);
     border: 1px solid rgba(255, 255, 255, 0.5);
     border-radius: 24px;
     padding: 2.5rem;
     transition: all 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
     height: 100%;
     position: relative;
     overflow: hidden;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
     text-align: center;
     display: flex;
     flex-direction: column;
     align-items: center;
 }

 [data-theme="light"] .glass-card {
     background: rgba(255, 255, 255, 0.6);
     border-color: rgba(255, 255, 255, 0.8);
 }

 .glass-card:hover {
     transform: translateY(-8px);
     box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
     border-color: var(--ix-accent);
 }

 .icon-box-premium {
     width: 64px;
     height: 64px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 16px;
     background: linear-gradient(135deg, rgba(93, 224, 230, 0.1), rgba(0, 74, 173, 0.05));
     color: var(--ix-accent);
     margin-bottom: 1.5rem;
     font-size: 1.75rem;
     transition: transform 0.3s ease;
 }

 .glass-card:hover .icon-box-premium {
     transform: scale(1.1) rotate(5deg);
 }

 .card-feature-list {
     list-style: none;
     padding: 0;
     margin: 0 auto;
     width: fit-content;
     text-align: left;
 }

 .card-feature-list li {
     display: flex;
     align-items: center;
     justify-content: flex-start;
     margin-bottom: 1rem;
     font-size: 1.05rem;
     color: var(--ix-text);
     padding-left: 0 !important;
 }

 .editorial-content .card-feature-list li::before,
 .card-feature-list li::before {
     content: none !important;
     display: none !important;
 }

 .card-feature-list li i {
     color: var(--ix-accent);
     margin-right: 0.75rem;
     font-size: 1.2rem;
 }

 .benefit-tile {
     text-align: center;
     padding: 2rem;
     background: var(--ix-surface);
     border-radius: 20px;
     border: 1px solid var(--ix-border);
     transition: all 0.3s ease;
 }

 .benefit-tile:hover {
     background: var(--ix-surface-hover);
     transform: translateY(-5px);
     border-color: var(--ix-accent);
 }

 .benefit-tile h4 {
     margin-top: 1rem;
     font-size: 1.25rem;
     font-weight: 600;
 }

 .origin-comparison {
     display: grid;
     grid-template-columns: 1fr 1fr;
     gap: 4rem;
     align-items: center;
 }

 .origin-text p {
     font-size: 1.2rem;
     line-height: 1.8;
     color: var(--ix-text-secondary);
 }

 .display-title {
     font-family: 'Outfit', sans-serif;
     font-weight: 700;
     letter-spacing: -0.03em;
     background: var(--ix-accent-gradient);
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
     display: inline-block;
 }

 .section-label {
     text-transform: uppercase;
     letter-spacing: 0.1em;
     font-size: 0.85rem;
     font-weight: 600;
     color: var(--ix-accent);
     margin-bottom: 1rem;
     display: block;
 }

 @media (max-width:992px) {

     .premium-grid-2,
     .premium-grid-3,
     .origin-comparison {
         grid-template-columns: 1fr;
         gap: 2rem;
     }
 }

 /* 3D Testimonial Carousel */
 #testi-3d-wrapper {
     perspective: 1000px;
     -webkit-perspective: 1000px;
     width: 400px;
     height: 160px;
     margin: 1rem auto 0 auto;
     perspective-origin: 50% 100px;
     -webkit-perspective-origin: 50% 100px;
     transition: perspective, 1s;
     -webkit-transition: -webkit-perspective, 1s;
     position: relative;
     max-width: 100%;
     transform: scale(0.8);
 }

 #testi-3d-spinner:hover {
     animation-play-state: paused;
     -webkit-animation-play-state: paused;
 }

 @-webkit-keyframes spin {
     from {
         transform: rotateY(0);
         -webkit-transform: rotateY(0);
     }

     to {
         transform: rotateY(-360deg);
         -webkit-transform: rotateY(-360deg);
     }
 }

 @keyframes spin {
     from {
         transform: rotateY(0);
         -webkit-transform: rotateY(0);
     }

     to {
         transform: rotateY(-360deg);
         -webkit-transform: rotateY(-360deg);
     }
 }

 #testi-3d-spinner {
     margin: 0 auto;
     height: 150px;
     width: 200px;
     transform-style: preserve-3d;
     -webkit-transform-style: preserve-3d;
     animation: spin 24s infinite linear;
     -webkit-animation: spin 24s infinite linear;
     position: relative;
 }

 .testi-3d-item {
     position: absolute;
     height: 150px;
     width: 200px;
     border-radius: 15px;
     text-align: center;
     overflow: hidden;
     box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
     border: 2px solid rgba(255, 255, 255, 0.2);
     background: #000;
 }

 .testi-3d-item img {
     width: 100%;
     height: 100%;
     object-fit: cover;
     border-radius: 13px;
     opacity: 0.9;
     transition: opacity 0.3s;
 }

 .testi-3d-item img:hover {
     opacity: 1;
 }

 /* 8 images, 360 / 8 = 45deg steps */
 /* Translate Z distance approx: (width / 2) / tan(22.5) ~= 100 / 0.414 = 241px */
 /* Let's try 280px to be safe */

 #testi-3d-spinner>.i1 {
     transform: translateZ(280px);
     -webkit-transform: translateZ(280px);
 }

 #testi-3d-spinner>.i2 {
     transform: rotateY(45deg) translateZ(280px);
     -webkit-transform: rotateY(45deg) translateZ(280px);
 }

 #testi-3d-spinner>.i3 {
     transform: rotateY(90deg) translateZ(280px);
     -webkit-transform: rotateY(90deg) translateZ(280px);
 }

 #testi-3d-spinner>.i4 {
     transform: rotateY(135deg) translateZ(280px);
     -webkit-transform: rotateY(135deg) translateZ(280px);
 }

 #testi-3d-spinner>.i5 {
     transform: rotateY(180deg) translateZ(280px);
     -webkit-transform: rotateY(180deg) translateZ(280px);
 }

 #testi-3d-spinner>.i6 {
     transform: rotateY(225deg) translateZ(280px);
     -webkit-transform: rotateY(225deg) translateZ(280px);
 }

 #testi-3d-spinner>.i7 {
     transform: rotateY(270deg) translateZ(280px);
     -webkit-transform: rotateY(270deg) translateZ(280px);
 }

 #testi-3d-spinner>.i8 {
     transform: rotateY(315deg) translateZ(280px);
     -webkit-transform: rotateY(315deg) translateZ(280px);
 }

 @media (max-width: 768px) {
     #testi-3d-wrapper {
         transform: scale(0.6);
         margin: 1rem auto 2rem auto;
     }
 }