:root {
        --primary: #2563eb;
        --primary-light: #60a5fa;
        --primary-dark: #1e3a8a;
        --secondary: #0ea5e9;
        --background-light: #f8fafc;
        --background-dark: #121212;
        --surface-light: #ffffff;
        --surface-dark: #1a1a1a;
        --text-primary-dark: #121212;
        --text-primary-light: #f8fafc;
        --text-secondary-dark: #64748b;
        --text-secondary-light: #94a3b8;
        --border-color-light: #e2e8f0;
        --border-color-dark: #333333;
        --font-heading: 'Poppins', sans-serif;
        --font-body: 'Inter', sans-serif;
        --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.07), 0 4px 6px -2px rgba(0, 0, 0, 0.05)
    }

    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        text-decoration: none;
        outline: none;
        border: none
    }

    html {
        scroll-behavior: smooth
    }

    body {
        font-family: var(--font-body);
        background-color: var(--background-light);
        color: var(--text-primary-dark);
        overflow-x: hidden
    }

    .container {
        max-width: 1200px;
        width: 100%;
        margin: 0 auto;
        padding: 0 1.5rem
    }

    .dark-section {
        background-color: var(--background-dark);
        color: var(--text-primary-light)
    }

    .light-section {
        background-color: var(--background-light);
        color: var(--text-primary-dark)
    }

    section {
        padding: 6rem 0
    }

    h1,
    h2,
    h3,
    h4 {
        font-family: var(--font-heading);
        font-weight: 700
    }

    h1 {
        font-size: 2.8rem;
        line-height: 1.2
    }

    h2 {
        font-size: 2rem
    }

    p {
        font-size: 1rem;
        color: var(--text-secondary-dark);
        line-height: 1.6
    }

    .dark-section p,
    .dark-section .client-trust h2,
    .dark-section .statistika .keterangan,
    .dark-section .web-detail>p {
        color: var(--text-secondary-light)
    }

    .btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: .5rem;
        padding: 14px 28px;
        border-radius: 12px;
        font-weight: 600;
        font-family: var(--font-heading);
        cursor: pointer;
        transition: all .3s ease
    }

    .btn-primary {
        background: var(--primary);
        color: #fff
    }

    .btn-primary:hover {
        background: var(--primary-light);
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        color: #fff
    }

    .btn-wa {
        background-color: #25d366;
        color: #fff
    }

    .btn-wa:hover {
        background-color: #1ebe57;
        transform: translateY(-3px);
        box-shadow: var(--shadow-md);
        color: #fff
    }

    .seo-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0
    }

    .navbar {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 80px;
        display: flex;
        align-items: center;
        z-index: 1000;
        transition: background-color .3s ease, box-shadow .3s ease
    }

    .navbar.scrolled {
        background-color: rgba(18, 18, 18, .95);
        backdrop-filter: blur(15px);
        box-shadow: 0 4px 10px rgba(0, 0, 0, .2)
    }

    .navbar .nav {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%
    }

    .navbar .logo img {
        height: 160px;
        width: auto;
        object-fit: contain;
        transition: transform .3s ease;
        display: block
    }

    .navbar .logo:hover img {
        transform: scale(1.05)
    }

    .navbar-nav {
        display: flex;
        align-items: center;
        gap: 2.5rem
    }

    .navbar-nav a {
        color: var(--text-primary-light);
        font-weight: 600;
        position: relative;
        padding: .5rem 0;
        transition: color .3s ease;
        font-size: .95rem
    }

    .navbar-nav a:hover {
        color: var(--primary-light)
    }

    .navbar-nav a::after {
        content: '';
        position: absolute;
        bottom: -5px;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: var(--primary-light);
        transform: scaleX(0);
        transition: transform .3s ease
    }

    .navbar-nav a:hover::after {
        transform: scaleX(1)
    }

    .btn-nav-special {
        background: var(--primary);
        padding: 10px 20px !important;
        border-radius: 8px;
        color: #fff !important;
        border: 1px solid rgba(255, 255, 255, .1)
    }

    .btn-nav-special:hover {
        background: var(--primary-light)
    }

    .btn-nav-special::after {
        display: none
    }

    #toogle-nav {
        display: none;
        color: var(--text-primary-light);
        font-size: 1.8rem;
        cursor: pointer;
        z-index: 1002;
        transition: color .3s ease
    }

    .mobile-nav-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .6);
        backdrop-filter: blur(8px);
        z-index: 1000;
        opacity: 0;
        visibility: hidden;
        transition: opacity .3s ease
    }

    .mobile-nav-overlay.active {
        opacity: 1;
        visibility: visible
    }

    .mobile-nav-menu {
        display: flex;
        position: fixed;
        top: 0;
        right: 0;
        transform: translateX(100%);
        width: 280px;
        height: 100vh;
        background-color: var(--surface-dark);
        box-shadow: -10px 0 30px rgba(0, 0, 0, .5);
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 2rem;
        transition: transform .4s cubic-bezier(.23, 1, .32, 1);
        z-index: 2000;
        padding-top: 2rem
    }

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

    .mobile-nav-menu a {
        color: var(--text-primary-light);
        font-size: 1.2rem;
        font-weight: 700;
        letter-spacing: 1px
    }

    .close-btn {
        position: absolute;
        top: 20px;
        right: 20px;
        font-size: 2.5rem;
        color: var(--text-primary-light);
        cursor: pointer;
        z-index: 1005;
        line-height: 1
    }

    .hero.hero-dark {
        background-color: #121212;
        background-image: radial-gradient(circle at top left, rgba(37, 99, 235, .15), transparent 50%), radial-gradient(circle at bottom right, rgba(14, 165, 233, .1), transparent 50%);
        padding-top: 140px;
        padding-bottom: 60px;
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .hero-content-wrapper {
        display: flex;
        align-items: center;
        gap: 4rem;
        position: relative;
        z-index: 2
    }

    .hero-dark-text {
        flex: 1;
        max-width: 550px
    }

    .hero-badge {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        background-color: rgba(37, 99, 235, .15);
        color: var(--primary-light);
        padding: 6px 16px;
        border-radius: 50px;
        font-size: .85rem;
        font-weight: 600;
        margin-bottom: 1.5rem;
        border: 1px solid rgba(37, 99, 235, .3)
    }

    .hero-dark-text h1 {
        font-size: 3.5rem;
        font-weight: 800;
        line-height: 1.2;
        margin-bottom: 1.5rem;
        color: #fff;
        font-family: var(--font-heading)
    }

    .text-blue-solid {
        color: var(--primary-light)
    }

    .hero-checklist {
        list-style: none;
        padding: 0;
        margin-bottom: 2.5rem
    }

    .hero-checklist li {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        margin-bottom: 1.2rem;
        font-size: 1rem;
        color: #cbd5e1;
        line-height: 1.6
    }

    .check-circle {
        background-color: rgba(37, 99, 235, .2);
        color: var(--primary-light);
        width: 22px;
        height: 22px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: .7rem;
        margin-top: 4px;
        flex-shrink: 0
    }

    .hero-checklist li strong {
        color: #fff
    }

    .btn-blue-flat {
        background-color: var(--primary);
        color: #fff;
        padding: 16px 36px;
        border-radius: 10px;
        font-weight: 800;
        font-family: var(--font-heading);
        font-size: 1.1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-flex;
        align-items: center;
        gap: 10px;
        transition: all .3s ease;
        text-decoration: none;
        margin-bottom: 1.5rem;
        box-shadow: 0 10px 20px rgba(37, 99, 235, .3)
    }

    .btn-blue-flat:hover {
        background-color: var(--primary-light);
        transform: translateY(-2px);
        color: #fff
    }

    .hero-sub-benefits {
        display: flex;
        flex-wrap: wrap;
        gap: 16px;
        font-size: .85rem;
        color: #94a3b8
    }

    .hero-sub-benefits span {
        display: flex;
        align-items: center;
        gap: 6px
    }

    .hero-sub-benefits span i {
        color: var(--primary-light)
    }

    .hero-dark-visual {
        flex: 1;
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center
    }

    .hero-slider-container {
        position: relative;
        width: 100%;
        max-width: 600px;
        z-index: 2;
        height: 380px
    }

    .slide-img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        position: absolute;
        top: 0;
        left: 0;
        opacity: 0;
        transition: opacity .8s ease-in-out;
        filter: drop-shadow(0 20px 30px rgba(0, 0, 0, .5))
    }

    .slide-img.active {
        opacity: 1;
        position: relative
    }

    .btn-demo-floating {
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        background-color: var(--primary-light);
        color: var(--background-dark);
        padding: 10px 24px;
        border-radius: 50px;
        font-weight: 700;
        font-size: .9rem;
        display: flex;
        align-items: center;
        gap: 8px;
        z-index: 10;
        box-shadow: 0 5px 15px rgba(0, 0, 0, .3);
        transition: all .3s ease
    }

    .btn-demo-floating:hover {
        background-color: #fff;
        transform: translateX(-50%) scale(1.05)
    }

    .slider-dots {
        position: absolute;
        bottom: -30px;
        left: 50%;
        transform: translateX(-50%);
        display: flex;
        gap: 8px;
        z-index: 3
    }

    .slider-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: rgba(255, 255, 255, .3);
        cursor: pointer;
        transition: all .3s ease
    }

    .slider-dot.active {
        background-color: var(--primary-light);
        width: 24px;
        border-radius: 5px
    }

    .float-badge {
        position: absolute;
        background: rgba(18, 18, 18, .85);
        backdrop-filter: blur(8px);
        border: 1px solid rgba(255, 255, 255, .1);
        color: #fff;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: .75rem;
        font-weight: 600;
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
        z-index: 3;
        white-space: nowrap
    }

    .float-badge i {
        color: var(--primary-light)
    }

    .b-top-left {
        top: 5%;
        left: -5%;
        animation: floatY 4s ease-in-out infinite
    }

    .b-mid-right {
        top: 10%;
        right: 5%;
        border-color: var(--primary);
        animation: floatY 4.8s ease-in-out infinite .8s
    }

    .b-mid-left {
        top: 95%;
        right: 70%;
        border-color: var(--primary);
        animation: floatY 4.8s ease-in-out infinite .8s
    }

    .b-top-right {
        top: 50%;
        right: 90%;
        border-color: var(--primary);
        animation: floatY 4.8s ease-in-out infinite .8s
    }

    .b-bottom-left {
        bottom: 0%;
        left: 65%;
        animation: floatY 4.5s ease-in-out infinite .5s
    }

    @keyframes floatY {

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

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

    .wof-section {
        padding: 2.5rem 0;
        background-color: var(--background-light);
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid var(--border-color-light)
    }

    .wof-title {
        text-align: center;
        color: var(--text-primary-dark);
        font-size: 1.1rem;
        font-weight: 800;
        margin-bottom: 1.5rem;
        font-family: var(--font-heading);
        letter-spacing: .5px
    }

    .wof-wrapper {
        display: flex;
        overflow: hidden;
        width: 100%;
        mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent)
    }

    .wof-track {
        display: flex;
        gap: 1rem;
        width: max-content;
        animation: scrollWof 35s linear infinite;
        will-change: transform
    }

    .wof-track:hover {
        animation-play-state: paused
    }

    @keyframes scrollWof {
        0% {
            transform: translate3d(0, 0, 0)
        }

        100% {
            transform: translate3d(calc(-50% - .5rem), 0, 0)
        }
    }

    .wof-card {
        display: flex;
        align-items: center;
        gap: .8rem;
        background: #fff;
        border: 1px solid var(--border-color-light);
        padding: .5rem 1rem;
        border-radius: 10px;
        min-width: 210px;
        box-shadow: var(--shadow-md);
        transition: .3s;
        cursor: default
    }

    .wof-card:hover {
        border-color: var(--primary);
        transform: translateY(-3px)
    }

    .wof-avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        object-fit: cover
    }

    .wof-info {
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .wof-name {
        color: var(--text-secondary-dark);
        font-size: .75rem;
        margin-bottom: 2px;
        white-space: nowrap
    }

    .wof-omzet {
        color: var(--primary);
        font-size: 1rem;
        font-weight: 800;
        font-family: var(--font-heading)
    }

    #domain {
        background-color: #121212;
        text-align: center;
        padding: 5rem 0;
        border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    #domain h2 {
        color: var(--text-primary-light);
        font-size: 2.2rem
    }

    .search-domain {
        display: flex;
        flex-wrap: wrap;
        gap: 1rem;
        background: rgba(255, 255, 255, .05);
        padding: 1.5rem;
        border-radius: 16px;
        max-width: 800px;
        margin: 2rem auto;
        border: 1px solid rgba(255, 255, 255, .1);
        align-items: center;
        backdrop-filter: blur(10px)
    }

    .domain-choosed {
        flex: 1 1 250px;
        background: 0 0;
        color: #fff;
        font-size: 1rem;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, .2)
    }

    .domain-choosed::placeholder {
        color: rgba(255, 255, 255, .5)
    }

    .domain-tld {
        background: var(--surface-dark);
        color: #fff;
        font-size: 1rem;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid rgba(255, 255, 255, .2);
        cursor: pointer
    }

    #btn-domain {
        display: flex;
        align-items: center;
        gap: .5rem;
        flex-grow: 1;
        justify-content: center;
        padding: 12px 24px;
        font-size: 1rem
    }

    .alert-domain div {
        padding: 1rem;
        border-radius: 8px;
        max-width: 800px;
        margin: 1rem auto;
        display: none;
        text-align: center;
        font-weight: 600
    }

    .alert-not-available,
    .alert-min-input {
        background: rgba(239, 68, 68, .1);
        color: #f87171;
        border: 1px solid #ef4444
    }

    .alert-available {
        background: rgba(34, 197, 94, .1);
        color: #4ade80;
        border: 1px solid #22c55e
    }

    .client-trust {
        padding: 4rem 0;
        text-align: center;
        background: var(--background-light);
        border-bottom: 1px solid var(--border-color-light)
    }

    .client-trust h2 {
        font-size: 1.5rem;
        color: var(--text-secondary-dark);
        margin-bottom: 2rem;
        font-weight: 700
    }

    .marquee {
        overflow: hidden;
        position: relative;
        width: 100%;
        mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
        -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent)
    }

    .marquee-content {
        display: flex;
        align-items: center;
        width: max-content;
        animation: marquee 30s linear infinite
    }

    .marquee-content img {
        height: 40px;
        width: auto;
        max-width: 150px;
        object-fit: contain;
        margin: 0 2.5rem;
        filter: grayscale(1);
        opacity: .6;
        transition: all .3s ease
    }

    .marquee-content:hover {
        animation-play-state: paused
    }

    .marquee-content img:hover {
        filter: grayscale(0);
        opacity: 1;
        transform: scale(1.1)
    }

    @keyframes marquee {
        from {
            transform: translateX(0)
        }

        to {
            transform: translateX(-50%)
        }
    }

    .tema-baru-section {
        background-color: #fff;
        padding: 6rem 0;
        border-bottom: 1px solid var(--border-color-light)
    }

    .tema-header {
        text-align: center;
        max-width: 800px;
        margin: 0 auto 3rem
    }

    .tema-header h2 {
        font-size: 2.5rem;
        color: var(--text-primary-dark);
        margin-bottom: 1rem;
        font-weight: 800
    }

    .tema-header p {
        color: var(--text-secondary-dark);
        font-size: 1.05rem
    }

    .tabs-nav {
        display: flex;
        justify-content: center;
        gap: 1rem;
        margin-bottom: 3rem;
        flex-wrap: wrap
    }

    .tab-btn {
        padding: 12px 24px;
        font-size: 1rem;
        font-weight: 600;
        font-family: var(--font-heading);
        color: var(--text-secondary-dark);
        background-color: transparent;
        border-radius: 8px;
        cursor: pointer;
        transition: all .3s ease;
        border: 1px solid var(--border-color-light);
        display: flex;
        align-items: center;
        gap: .75rem
    }

    .tab-btn:hover {
        color: var(--primary);
        border-color: var(--primary-light)
    }

    .tab-btn.active {
        background-color: var(--primary);
        color: #fff;
        border-color: var(--primary);
        box-shadow: 0 4px 20px rgba(37, 99, 235, .4)
    }

    .tab-pane {
        display: none;
        animation: fadeInTab .5s ease forwards
    }

    .tab-pane.active {
        display: block
    }

    @keyframes fadeInTab {
        from {
            opacity: 0;
            transform: translateY(20px)
        }

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

    .tema-scroll-wrapper {
        display: flex;
        gap: 2rem;
        flex-wrap: nowrap;
        overflow-x: auto;
        padding: 1rem 1.5rem 2.5rem 1.5rem;
        justify-content: flex-start;
        max-width: max-content;
        margin: 0 auto;
        -ms-overflow-style: none;
        scrollbar-width: none
    }

    .tema-scroll-wrapper::-webkit-scrollbar {
        display: none
    }

    .tema-card {
        flex: 0 0 auto;
        width: 220px;
        text-align: center;
        transition: transform .3s ease;
        cursor: pointer;
        text-decoration: none
    }

    .mockup-wrapper {
        position: relative;
        overflow: hidden;
        border-radius: 20px;
        border: 4px solid var(--surface-light);
        margin-bottom: 1rem;
        height: 420px;
        background-color: var(--background-light)
    }

    .tema-mockup {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform .5s
    }

    .mockup-overlay {
        position: absolute;
        inset: 0;
        background: rgba(18, 18, 18, .7);
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0;
        transition: opacity .3s
    }

    .tema-card:hover .mockup-overlay {
        opacity: 1
    }

    .tema-card:hover .tema-mockup {
        transform: scale(1.05)
    }

    .btn-look {
        background: var(--primary);
        color: #fff;
        padding: 8px 16px;
        border-radius: 50px;
        font-size: .85rem;
        font-weight: 700;
        transform: translateY(20px);
        transition: all .3s
    }

    .tema-card:hover .btn-look {
        transform: translateY(0)
    }

    .glow-blue {
        box-shadow: 0 20px 40px -10px rgba(37, 99, 235, .3)
    }

    .glow-red {
        box-shadow: 0 20px 40px -10px rgba(239, 68, 68, .3)
    }

    .glow-green {
        box-shadow: 0 20px 40px -10px rgba(34, 197, 94, .3)
    }

    .glow-purple {
        box-shadow: 0 20px 40px -10px rgba(168, 85, 247, .3)
    }

    .glow-orange {
        box-shadow: 0 20px 40px -10px rgba(249, 115, 22, .3)
    }

    .glow-dark {
        box-shadow: 0 20px 40px -10px rgba(18, 18, 18, .2)
    }

    .tema-title {
        font-family: var(--font-heading);
        font-weight: 700;
        font-size: 1.05rem;
        color: var(--text-primary-dark);
        display: block;
        margin-top: .5rem
    }

    .customizer-box {
        background: var(--background-light);
        border: 1px solid var(--border-color-light);
        border-radius: 16px;
        padding: 2.5rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 2rem;
        margin-top: 3rem
    }

    .custom-text h3 {
        font-size: 1.5rem;
        color: var(--text-primary-dark);
        margin-bottom: .5rem
    }

    .custom-text p {
        color: var(--text-secondary-dark);
        font-size: .95rem
    }

    .color-swatches {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap
    }

    .swatch-item {
        text-align: center
    }

    .color-circle {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        margin: 0 auto 8px;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .1)
    }

    .cuan-section {
        padding: 5rem 0;
        background-color: var(--background-light);
        border-bottom: 1px solid var(--border-color-light)
    }

    .cuan-header {
        text-align: center;
        margin-bottom: 3rem
    }

    .cuan-header h2 {
        font-size: 2.5rem;
        color: var(--text-primary-dark);
        margin-bottom: 1rem;
        font-family: var(--font-heading);
        font-weight: 800
    }

    .cuan-container {
        display: flex;
        align-items: center;
        gap: 3rem;
        flex-wrap: wrap
    }

    .cuan-image {
        flex: 1;
        min-width: 300px
    }

    .cuan-image img {
        width: 100%;
        border-radius: 20px;
        box-shadow: var(--shadow-md)
    }

    .cuan-card {
        flex: 1;
        min-width: 350px;
        background: #fff;
        border: 1px solid var(--border-color-light);
        border-radius: 20px;
        padding: 2.5rem;
        box-shadow: var(--shadow-md)
    }

    .cuan-tabs {
        display: flex;
        gap: .5rem;
        margin-bottom: 2rem;
        flex-wrap: wrap
    }

    .cuan-tab-btn {
        padding: 8px 16px;
        border-radius: 8px;
        font-weight: 700;
        font-size: .85rem;
        cursor: pointer;
        border: none;
        background-color: var(--background-light);
        color: var(--text-secondary-dark);
        transition: all .3s ease
    }

    .cuan-tab-btn.active {
        background-color: var(--primary);
        color: #fff;
        box-shadow: 0 4px 10px rgba(37, 99, 235, .3)
    }

    .slider-group {
        margin-bottom: 2rem
    }

    .slider-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 1rem
    }

    .slider-label {
        font-weight: 600;
        color: var(--text-primary-dark);
        font-size: .95rem
    }

    .slider-value {
        font-weight: 800;
        color: var(--primary);
        font-size: 1.1rem
    }

    input[type=range].cuan-slider {
        -webkit-appearance: none;
        width: 100%;
        height: 6px;
        background: var(--border-color-light);
        border-radius: 5px;
        outline: none
    }

    input[type=range].cuan-slider::-webkit-slider-thumb {
        -webkit-appearance: none;
        appearance: none;
        width: 22px;
        height: 22px;
        border-radius: 50%;
        background: var(--primary);
        cursor: pointer;
        box-shadow: 0 0 0 4px rgba(37, 99, 235, .2);
        transition: transform .1s
    }

    input[type=range].cuan-slider::-webkit-slider-thumb:hover {
        transform: scale(1.2)
    }

    .slider-limits {
        display: flex;
        justify-content: space-between;
        margin-top: .5rem;
        font-size: .8rem;
        color: var(--text-secondary-light);
        font-weight: 500
    }

    .cuan-results {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 1rem;
        margin-top: 2rem;
        margin-bottom: 1.5rem
    }

    .result-box {
        background: var(--background-light);
        border-radius: 12px;
        padding: 1rem .5rem;
        text-align: center;
        border: 1px solid var(--border-color-light)
    }

    .result-label {
        font-size: .75rem;
        color: var(--text-secondary-dark);
        margin-bottom: .5rem;
        font-weight: 600
    }

    .result-val {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--primary-dark);
        font-family: var(--font-heading)
    }

    .cuan-footer {
        text-align: center;
        font-size: .9rem;
        color: var(--text-secondary-dark);
        margin-top: 1rem
    }

    .cuan-footer .highlight-blue {
        color: var(--primary);
        font-weight: 800
    }

    .pricelist-section {
        padding: 4rem 0;
        background: #121212;
        border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .pricelist-container {
        background: rgba(26, 26, 26, .5);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 24px;
        padding: 2.5rem
    }

    .pricelist-header {
        display: flex;
        align-items: center;
        gap: 1.5rem;
        margin-bottom: 2rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, .1)
    }

    .pricelist-header .header-icon {
        flex-shrink: 0;
        width: 60px;
        height: 60px;
        border-radius: 16px;
        display: grid;
        place-items: center;
        background: linear-gradient(45deg, #2563eb, #60a5fa);
        font-size: 1.8rem;
        color: #fff;
        box-shadow: 0 8px 20px rgba(37, 99, 235, .3)
    }

    .pricelist-header .header-text h2 {
        font-size: 1.8rem;
        font-weight: 700;
        color: #fff;
        margin: 0
    }

    .pricelist-header .header-text p {
        font-size: 1rem;
        color: #94a3b8;
        margin: .25rem 0 0 0
    }

    .table-controls {
        display: grid;
        grid-template-columns: 1fr;
        gap: 1.5rem;
        max-width: 450px;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2rem
    }

    .btn-filter {
        background: 0 0;
        border: none;
        border-bottom: 1px solid rgba(255, 255, 255, .2);
        font-size: 1.1rem;
        font-weight: 600;
        letter-spacing: .5px;
        text-transform: uppercase;
        padding: 14px 10px;
        justify-content: center;
        gap: .5rem;
        width: 100%;
        display: flex;
        align-items: center;
        color: #fff;
        cursor: pointer;
        transition: color .3s ease
    }

    .btn-filter:hover {
        color: #60a5fa
    }

    .filter-wrapper {
        position: relative
    }

    .dropdown-filter {
        display: block;
        position: absolute;
        top: 115%;
        right: 0;
        width: 100%;
        max-height: 300px;
        overflow-y: auto;
        background: #121212;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 8px;
        z-index: 10;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: all .3s ease
    }

    .dropdown-filter.active {
        opacity: 1;
        visibility: visible;
        transform: translateY(0)
    }

    .search-input {
        width: calc(100% - 20px);
        margin: 10px;
        padding: 10px;
        background-color: rgba(26, 26, 26, .8);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 4px;
        color: #fff
    }

    .dropdown-item {
        padding: 12px 16px;
        cursor: pointer;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        font-size: .9rem;
        color: #cbd5e1
    }

    .dropdown-item:hover {
        background-color: #2563eb;
        color: #fff
    }

    .search-wrapper {
        position: relative
    }

    .search-wrapper .search-icon {
        position: absolute;
        left: 18px;
        top: 50%;
        transform: translateY(-50%);
        color: #64748b
    }

    #layanan-search-input {
        width: 100%;
        background-color: rgba(26, 26, 26, .8);
        border: 1px solid rgba(255, 255, 255, .1);
        color: #fff;
        padding: 14px 18px 14px 50px;
        border-radius: 12px;
        font-size: 1rem;
        transition: border-color .3s ease
    }

    #layanan-search-input:focus {
        border-color: #60a5fa
    }

    .table-wrapper {
        overflow: hidden;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 16px;
        background: #121212
    }

    table.dataTable {
        border-collapse: separate !important;
        border-spacing: 0;
        width: 100%
    }

    table.dataTable thead th {
        background-color: rgba(26, 26, 26, .9) !important;
        font-size: .9rem;
        font-weight: 600;
        text-transform: uppercase;
        color: #fff !important;
        border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
        padding: 1rem
    }

    table.dataTable tbody tr {
        background-color: transparent !important;
        transition: background-color .3s ease
    }

    table.dataTable tbody tr:nth-child(odd) {
        background-color: rgba(26, 26, 26, .4) !important
    }

    table.dataTable tbody tr:hover {
        background-color: rgba(255, 255, 255, .05) !important
    }

    table.dataTable tbody td {
        color: #cbd5e1;
        border-top: 1px solid rgba(255, 255, 255, .05);
        padding: .9rem
    }

    table.dataTable tbody td:nth-child(2),
    table.dataTable tbody td:nth-child(3) {
        font-weight: 600;
        color: #60a5fa;
        font-family: var(--font-heading)
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button {
        padding: .6em 1em !important;
        border-radius: 8px;
        margin-left: .2em;
        margin-right: .2em;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        color: #fff !important
    }

    .dataTables_wrapper .dataTables_paginate .paginate_button.current,
    .dataTables_wrapper .dataTables_paginate .paginate_button:hover {
        background: #2563eb !important;
        color: #fff !important;
        border-color: #2563eb !important
    }

    .dataTables_info {
        color: #94a3b8 !important;
        font-size: .95rem
    }

    .dataTables_length,
    .dataTables_filter {
        display: none
    }

    .pricelist-footer {
        margin-top: 1.5rem;
        text-align: center
    }

    .pricelist-footer p {
        font-size: .9rem;
        color: #94a3b8
    }

    .pricelist-footer a {
        color: #60a5fa;
        font-weight: 600;
        text-decoration: underline
    }

    .comparison-section {
        padding: 6rem 0;
        background-color: #121212;
        font-family: var(--font-body);
        color: #fff;
        position: relative;
        border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .cmp-header {
        text-align: center;
        margin-bottom: 3.5rem;
        padding: 0 1rem
    }

    .cmp-header h2 {
        font-size: 2.8rem;
        color: #fff;
        font-family: var(--font-heading);
        font-weight: 800;
        margin-bottom: 1rem;
        line-height: 1.2
    }

    .cmp-header p {
        color: #94a3b8;
        max-width: 650px;
        margin: 0 auto;
        font-size: 1.05rem;
        line-height: 1.6
    }

    .cmp-table-desktop {
        max-width: 1050px;
        margin: 0 auto;
        background: rgba(26, 26, 26, .4);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, .2);
        display: block
    }

    .tbl-row {
        display: grid;
        grid-template-columns: 1.5fr 1fr 1.2fr;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        transition: background .3s ease
    }

    .tbl-row:hover {
        background: rgba(255, 255, 255, .05)
    }

    .tbl-head {
        background: rgba(18, 18, 18, .9);
        font-weight: 700;
        font-size: .85rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        color: #94a3b8
    }

    .t-cell {
        padding: 1.8rem 1.5rem;
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        font-size: .95rem
    }

    .t-cell:first-child {
        justify-content: flex-start;
        text-align: left;
        font-weight: 600;
        color: #fff;
        font-size: 1rem;
        border-right: 1px solid rgba(255, 255, 255, .05)
    }

    .t-cell:nth-child(2) {
        border-right: 1px solid rgba(255, 255, 255, .05)
    }

    .c-bad {
        color: #ef4444;
        font-weight: 600
    }

    .c-good {
        color: #fbbf24;
        font-weight: 800;
        background: rgba(251, 191, 36, .05);
        font-family: var(--font-heading)
    }

    .tbl-head .c-good {
        background: rgba(251, 191, 36, .1);
        color: #fbbf24;
        gap: 8px;
        font-size: .9rem
    }

    .tbl-total {
        background: rgba(18, 18, 18, .8);
        border-top: 1px solid rgba(251, 191, 36, .3)
    }

    .tbl-total .t-cell:first-child {
        text-transform: uppercase;
        font-size: .85rem;
        color: #94a3b8;
        letter-spacing: 1px
    }

    .tbl-total .c-bad {
        text-decoration: line-through;
        opacity: .7
    }

    .tbl-total .c-good {
        font-size: 1.15rem;
        color: #fbbf24;
        background: rgba(251, 191, 36, .15)
    }

    .cmp-cards-mobile {
        display: none
    }

    .cmp-cards-container {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        max-width: 900px;
        margin: 0 auto;
        padding: 0 1rem
    }

    .cmp-card {
        background: rgba(26, 26, 26, .4);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 12px;
        overflow: hidden
    }

    .cmp-card-header {
        background: rgba(18, 18, 18, .8);
        padding: 1.2rem;
        text-align: center;
        font-weight: 700;
        font-size: 1.1rem;
        color: #fff;
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        text-transform: uppercase;
        letter-spacing: 1px;
        font-family: var(--font-heading)
    }

    .cmp-card-body {
        display: flex
    }

    .cmp-col {
        flex: 1;
        padding: 1.5rem;
        text-align: center;
        display: flex;
        flex-direction: column;
        justify-content: center
    }

    .cmp-col:first-child {
        border-right: 1px solid rgba(255, 255, 255, .05)
    }

    .cmp-label {
        font-size: .85rem;
        color: #94a3b8;
        margin-bottom: .8rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 1px
    }

    .cmp-label.gold-label {
        color: #fbbf24
    }

    .cmp-val-bad {
        color: #ef4444;
        font-weight: 700;
        font-size: 1.1rem;
        font-family: var(--font-heading)
    }

    .cmp-val-good {
        color: #fbbf24;
        font-weight: 800;
        font-size: 1.2rem;
        font-family: var(--font-heading)
    }

    .feature-showcase {
        padding: 4rem 0;
        background-color: var(--background-light);
        font-family: var(--font-body);
        overflow: hidden;
        color: var(--text-secondary-dark);
        border-bottom: 1px solid var(--border-color-light)
    }

    .content-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
        align-items: center;
        max-width: 1140px;
        margin: 0 auto;
        padding: 0 1rem
    }

    .info-block {
        max-width: 500px
    }

    .tagline {
        color: var(--primary);
        font-size: .85rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 2px;
        margin-bottom: .5rem;
        display: inline-block
    }

    .info-block h2 {
        font-size: 2.4rem;
        font-weight: 800;
        color: var(--text-primary-dark);
        line-height: 1.2;
        margin-bottom: 1rem;
        font-family: var(--font-heading)
    }

    .info-block p {
        color: var(--text-secondary-dark);
        font-size: .95rem;
        line-height: 1.6
    }

    .btn-outline-blue {
        display: inline-block;
        margin-top: 1.5rem;
        padding: 10px 24px;
        border: 2px solid var(--border-color-light);
        border-radius: 50px;
        color: var(--text-primary-dark);
        font-weight: 700;
        font-size: .85rem;
        text-decoration: none;
        transition: all .3s ease;
        font-family: var(--font-heading)
    }

    .btn-outline-blue:hover {
        border-color: var(--primary);
        background-color: var(--primary);
        color: #fff
    }

    .btn-solid-blue {
        display: inline-block;
        margin-top: 1.5rem;
        padding: 10px 24px;
        background-color: var(--primary);
        border-radius: 8px;
        color: #fff;
        font-weight: 700;
        font-size: .85rem;
        text-decoration: none;
        transition: all .3s ease;
        font-family: var(--font-heading)
    }

    .btn-solid-blue:hover {
        background-color: var(--primary-light);
        transform: translateY(-2px);
        box-shadow: 0 10px 20px rgba(37, 99, 235, .2)
    }

    .visual-block.stacked-img {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 250px
    }

    .visual-block.stacked-img .img-base {
        position: absolute;
        max-width: 80%;
        height: auto;
        z-index: 1;
        opacity: .8
    }

    .visual-block.stacked-img .img-float {
        position: absolute;
        max-width: 60%;
        height: auto;
        z-index: 2;
        filter: drop-shadow(0 15px 25px rgba(255, 255, 255, .1))
    }

    @keyframes spin {
        100% {
            transform: rotate(360deg)
        }
    }

    @keyframes anti-spin {
        100% {
            transform: rotate(-360deg)
        }
    }

    .orbit-container {
        position: relative;
        width: 320px;
        height: 320px;
        margin: 0 auto;
        display: flex;
        align-items: center;
        justify-content: center
    }

    .orbit-center {
        width: 70px;
        height: 70px;
        background: var(--primary-dark);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #fff;
        z-index: 10;
        box-shadow: 0 8px 20px rgba(18, 18, 18, .3);
        font-family: var(--font-heading);
        border: 2px solid var(--primary);
        padding: 8px
    }

    .orbit-center img {
        max-width: 100%;
        height: auto;
        object-fit: contain
    }

    .orbit-ring {
        position: absolute;
        border-radius: 50%;
        border: 1px solid var(--border-color-light);
        animation: spin linear infinite
    }

    .orbit-ring-1 {
        width: 180px;
        height: 180px;
        animation-duration: 15s
    }

    .orbit-ring-2 {
        width: 290px;
        height: 290px;
        animation-duration: 25s;
        animation-direction: reverse
    }

    .orbit-item {
        position: absolute;
        width: 40px;
        height: 40px;
        background: #fff;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 4px 10px rgba(0, 0, 0, .1);
        border: 1px solid rgba(255, 255, 255, .2);
        overflow: hidden;
        animation: anti-spin linear infinite;
        padding: 0
    }

    .orbit-item img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 50%
    }

    .orbit-ring-1 .orbit-item:nth-child(1) {
        top: -20px;
        left: calc(50% - 20px)
    }

    .orbit-ring-1 .orbit-item:nth-child(2) {
        bottom: 8%;
        left: 8%
    }

    .orbit-ring-1 .orbit-item:nth-child(3) {
        bottom: 8%;
        right: 8%
    }

    .orbit-ring-2 .orbit-item:nth-child(1) {
        top: calc(50% - 20px);
        left: -20px
    }

    .orbit-ring-2 .orbit-item:nth-child(2) {
        top: calc(50% - 20px);
        right: -20px
    }

    .orbit-ring-2 .orbit-item:nth-child(3) {
        bottom: -20px;
        left: calc(50% - 20px)
    }

    .orbit-ring-1 .orbit-item {
        animation-duration: 15s
    }

    .orbit-ring-2 .orbit-item {
        animation-duration: 25s;
        animation-direction: reverse
    }

    .tech-cards-section {
        padding: 6rem 0;
        background-color: #121212;
        font-family: var(--font-body);
        position: relative;
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .tech-cards-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 2rem;
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 1rem;
        position: relative;
        z-index: 2
    }

    .tech-card-wrapper {
        position: relative;
        padding: 1px;
        transition: all .4s ease;
        cursor: pointer;
        height: 100%
    }

    .tech-card-bg {
        position: absolute;
        inset: 0;
        background-color: var(--surface-dark);
        border: 1px solid rgba(255, 255, 255, .1);
        transition: all .4s ease;
        border-radius: 16px
    }

    .tech-card-wrapper:hover .tech-card-bg {
        border-color: var(--primary-light);
        box-shadow: 0 0 30px -5px rgba(255, 255, 255, .1)
    }

    .tech-card-content {
        position: relative;
        z-index: 10;
        padding: 2.5rem;
        overflow: hidden;
        height: 100%;
        display: flex;
        flex-direction: column
    }

    .tech-icon-box {
        width: 60px;
        height: 60px;
        border-radius: 12px;
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1);
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--primary-light);
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
        transition: all .4s ease
    }

    .tech-card-wrapper:hover .tech-icon-box {
        transform: scale(1.1);
        background: var(--primary);
        color: #fff;
        border-color: var(--primary-light)
    }

    .tech-card-title {
        font-size: 1.15rem;
        font-weight: 800;
        color: #fff;
        font-family: var(--font-heading);
        margin-bottom: .8rem;
        transition: color .4s ease;
        line-height: 1.3
    }

    .tech-card-wrapper:hover .tech-card-title {
        color: var(--primary-light)
    }

    .tech-card-desc {
        color: #94a3b8;
        font-size: .9rem;
        line-height: 1.6;
        margin-bottom: 0;
        flex-grow: 1
    }

    .tech-watermark {
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        font-size: 3.5rem;
        font-weight: 900;
        color: var(--primary-light);
        opacity: .05;
        font-family: var(--font-heading);
        transition: opacity .5s ease;
        pointer-events: none;
        z-index: -1
    }

    .tech-card-wrapper:hover .tech-watermark {
        opacity: .15;
        transform: scale(1.1)
    }

    .crawl-section {
        position: relative;
        padding: 0;
        background-color: #121212;
        min-height: 800px;
        overflow: hidden;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        border-top: 1px solid rgba(255, 255, 255, .05);
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        contain: strict
    }

    .crawl-overlay {
        position: absolute;
        inset: 0;
        z-index: 10;
        pointer-events: none
    }

    .crawl-gradient-t {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 250px;
        background: linear-gradient(to bottom, #121212, transparent)
    }

    .crawl-gradient-b {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 250px;
        background: linear-gradient(to top, #121212, transparent)
    }

    .crawl-gradient-l {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        width: 150px;
        background: linear-gradient(to right, #121212, transparent)
    }

    .crawl-gradient-r {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        width: 150px;
        background: linear-gradient(to left, #121212, transparent)
    }

    .crawl-board-wrapper {
        width: 100%;
        height: 1100px;
        display: flex;
        justify-content: center;
        perspective: 1200px;
        position: absolute;
        top: 0;
        pointer-events: none
    }

    .crawl-perspective {
        display: flex;
        gap: 2rem;
        justify-content: center;
        transform: rotateX(55deg) scale(1.25);
        transform-style: flat;
        will-change: transform
    }

    .crawl-col {
        position: relative;
        height: 3200px;
        width: 180px;
        display: flex;
        flex-direction: column;
        pointer-events: auto
    }

    .crawl-track {
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        will-change: transform;
        transform: translateZ(0)
    }

    @keyframes scrollUp {
        0% {
            transform: translate3d(0, 0, 0)
        }

        100% {
            transform: translate3d(0, -50%, 0)
        }
    }

    @keyframes scrollDown {
        0% {
            transform: translate3d(0, -50%, 0)
        }

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

    .crawl-up {
        animation: scrollUp 40s linear infinite
    }

    .crawl-down {
        animation: scrollDown 40s linear infinite
    }

    .cyber-card {
        position: relative;
        width: 180px;
        height: 250px;
        background: rgba(26, 26, 26, .8);
        border: 2px solid rgba(255, 255, 255, .1);
        clip-path: polygon(15px 0, 100% 0, 100% calc(100% - 15px), calc(100% - 15px) 100%, 0 100%, 0 15px);
        transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 12px;
        overflow: hidden;
        backface-visibility: hidden;
        transform: translateZ(0);
        contain: content
    }

    .cyber-card::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(to bottom, rgba(255, 255, 255, .05), transparent);
        pointer-events: none
    }

    .cyber-card img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 8px;
        transition: transform .3s ease, opacity .3s ease;
        opacity: .9;
        backface-visibility: hidden;
        will-change: transform
    }

    .cyber-card:hover {
        border-color: #333;
        background: rgba(18, 18, 18, .9);
        transform: translate3d(0, 0, 30px) scale(1.05);
        box-shadow: 0 0 20px rgba(255, 255, 255, .1);
        z-index: 5
    }

    .cyber-card:hover img {
        transform: scale(1.05);
        opacity: 1
    }

    .testimonial-section {
        background-color: #121212;
        position: relative;
        padding: 6rem 0;
        overflow: hidden;
        border-bottom: 1px solid rgba(255, 255, 255, .05)
    }

    .testimonial-section::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 150px;
        background: linear-gradient(to top, rgba(255, 255, 255, .05), transparent);
        pointer-events: none
    }

    .testi-header {
        text-align: center;
        margin-bottom: 3rem;
        position: relative;
        z-index: 2;
        padding: 0 1rem
    }

    .testi-subtitle {
        color: var(--primary-light);
        font-size: .9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 1px;
        margin-bottom: .5rem
    }

    .testi-title {
        color: #fff;
        font-size: 2.5rem;
        font-family: var(--font-heading);
        font-weight: 800;
        margin-bottom: 1rem
    }

    .testi-desc {
        color: #cbd5e1;
        font-size: 1rem
    }

    .testi-marquee-wrapper {
        display: flex;
        overflow: hidden;
        position: relative;
        z-index: 2;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent)
    }

    .testi-track {
        display: flex;
        gap: 1.5rem;
        width: max-content;
        animation: scroll-testi 40s linear infinite;
        padding: 1rem 0
    }

    .testi-track:hover {
        animation-play-state: paused
    }

    .testi-card {
        background: rgba(26, 26, 26, .5);
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 16px;
        padding: 2rem;
        width: 380px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        transition: transform .3s ease, box-shadow .3s ease
    }

    .testi-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 10px 25px rgba(255, 255, 255, .05);
        border-color: var(--primary-light)
    }

    .testi-text {
        color: #f8fafc;
        font-size: .95rem;
        line-height: 1.6;
        margin-bottom: 2rem
    }

    .testi-footer {
        display: flex;
        justify-content: space-between;
        align-items: flex-end
    }

    .testi-user h4 {
        color: #94a3b8;
        font-size: 1rem;
        margin-bottom: .2rem;
        font-weight: 700;
        font-family: var(--font-heading)
    }

    .testi-user p {
        color: var(--primary-light);
        font-size: .85rem;
        margin: 0
    }

    .testi-stars {
        color: #fbbf24;
        font-size: .9rem
    }

    @keyframes scroll-testi {
        0% {
            transform: translateX(0)
        }

        100% {
            transform: translateX(-50%)
        }
    }

    #contact .container {
        display: flex;
        align-items: center;
        gap: 3rem
    }

    .contact-img {
        flex: 1;
        text-align: center
    }

    .contact-img img {
        max-width: 100%;
        width: 400px
    }

    .contact-detail {
        flex: 1
    }

    .contact-detail h4 {
        color: var(--primary-light)
    }

    .contact-detail h1 {
        margin: .5rem 0 1.5rem
    }

    #faq {
        text-align: center
    }

    #faq .section-header {
        max-width: 700px;
        margin: 0 auto 3rem auto
    }

    .faq-flex {
        display: flex;
        gap: 2rem;
        margin-top: 3rem;
        text-align: left
    }

    .faq-left,
    .faq-right {
        flex: 1
    }

    .faq-card-native {
        background-color: var(--surface-dark);
        border-radius: 8px;
        margin-bottom: 1rem;
        border: 1px solid rgba(255, 255, 255, .1);
        overflow: hidden;
        transition: all .3s ease
    }

    .faq-card-native[open] {
        border-color: var(--primary);
        background-color: rgba(255, 255, 255, .05)
    }

    .faq-quest {
        padding: 1.5rem;
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-weight: 600;
        list-style: none;
        outline: none
    }

    .faq-quest::-webkit-details-marker {
        display: none
    }

    .faq-quest i {
        transition: transform .3s ease;
        color: var(--text-secondary-light)
    }

    .faq-card-native[open] .faq-quest i {
        transform: rotate(180deg);
        color: var(--primary-light)
    }

    .faq-answer {
        padding: 0 1.5rem 1.5rem 1.5rem;
        color: var(--text-secondary-light);
        line-height: 1.6;
        animation: fadeIn .4s ease
    }

    .web-detail {
        padding: 6rem 0;
        text-align: center
    }

    .web-detail .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center
    }

    .web-detail p:first-of-type {
        color: var(--primary-light);
        font-weight: 600;
        margin-bottom: .5rem
    }

    .web-detail h1 {
        max-width: 800px;
        margin: 0 auto 3rem auto
    }

    .stat {
        display: flex;
        justify-content: center;
        gap: 4rem;
        flex-wrap: wrap;
        margin-bottom: 3rem
    }

    .statistika .jumlah {
        font-size: 3rem;
        font-weight: 800;
        color: var(--primary-light)
    }

    .statistika .keterangan {
        font-size: 1rem;
        color: var(--text-secondary-light)
    }

    .site-footer {
        padding: 4rem 0 0 0;
        background-color: var(--background-light);
        color: var(--text-primary-dark)
    }

    .footer-grid {
        display: grid;
        grid-template-columns: 2fr 1fr 1fr;
        gap: 4rem;
        padding-bottom: 3rem
    }

    .footer-about .logo-footer img {
        height: 50px;
        width: auto;
        object-fit: contain;
        margin-bottom: 1.5rem;
        display: block;
        filter: brightness(0)
    }

    .footer-about p {
        margin-bottom: 1.5rem;
        max-width: 350px;
        color: var(--text-secondary-dark)
    }

    .footer-about p a {
        color: var(--primary)
    }

    .footer-socials {
        display: flex;
        gap: 1rem
    }

    .footer-socials a {
        color: var(--text-secondary-dark);
        font-size: 1.2rem;
        transition: color .3s ease, transform .3s ease
    }

    .footer-socials a:hover {
        color: var(--primary);
        transform: translateY(-3px)
    }

    .footer-links h4 {
        font-size: 1.2rem;
        margin-bottom: 1.5rem;
        color: var(--text-primary-dark)
    }

    .footer-links ul {
        list-style: none
    }

    .footer-links li {
        margin-bottom: 1rem
    }

    .footer-links a {
        color: var(--text-secondary-dark);
        transition: color .3s ease
    }

    .footer-links a:hover {
        color: var(--primary)
    }

    .footer-bottom {
        border-top: 1px solid var(--border-color-light);
        padding: 1.5rem 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        gap: 1rem;
        font-size: .9rem;
        color: var(--text-secondary-dark)
    }

    .footer-bottom-links a {
        color: var(--text-secondary-dark);
        margin-left: 1.5rem;
        transition: color .3s ease
    }

    .footer-bottom-links a:hover {
        color: var(--primary)
    }

    .floating-wa-btn {
        position: fixed;
        bottom: 30px;
        right: 30px;
        z-index: 999;
        background-color: #25d366;
        color: #fff;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: grid;
        place-items: center;
        font-size: 2rem;
        box-shadow: 0 10px 20px rgba(0, 0, 0, .2);
        animation: float-wa 3s ease-in-out infinite
    }

    @keyframes float-wa {

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

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

    .modal-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, .7);
        z-index: 2000;
        display: none;
        align-items: center;
        justify-content: center;
        backdrop-filter: blur(5px)
    }

    .modal-overlay.show {
        display: flex
    }

    .modal-content {
        background-color: var(--surface-dark);
        color: var(--text-primary-light);
        padding: 2.5rem;
        border-radius: 16px;
        max-width: 600px;
        width: 90%;
        max-height: 80vh;
        overflow-y: auto;
        position: relative;
        border: 1px solid var(--border-color-dark);
        box-shadow: 0 10px 30px rgba(0, 0, 0, .5);
        animation: zoomIn .3s ease-out
    }

    @keyframes zoomIn {
        from {
            opacity: 0;
            transform: scale(.9)
        }

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

    .close-modal {
        position: absolute;
        top: 1rem;
        right: 1.5rem;
        font-size: 2.5rem;
        font-weight: 700;
        color: var(--text-secondary-light);
        cursor: pointer;
        transition: color .3s ease
    }

    .close-modal:hover {
        color: var(--text-primary-light)
    }

    .modal-content h2 {
        font-family: var(--font-heading);
        color: var(--primary-light);
        margin-bottom: 1.5rem;
        border-bottom: 1px solid rgba(255, 255, 255, .1);
        padding-bottom: 1rem
    }

    .modal-content #modalBody p,
    .modal-content #modalBody ul {
        color: var(--text-secondary-light);
        line-height: 1.7
    }

    .modal-content #modalBody ul {
        list-style: none;
        padding-left: 0
    }

    .modal-content #modalBody li {
        padding-left: 1.5em;
        position: relative;
        margin-bottom: .75rem
    }

    .modal-content #modalBody li::before {
        content: '';
        color: var(--primary-light);
        position: absolute;
        left: 0;
        font-weight: 700
    }

    @media (max-width:1024px) {
        .tech-cards-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 2rem
        }

        .cuan-results {
            grid-template-columns: repeat(2, 1fr)
        }
    }

    @media (max-width:992px) {
        .navbar-nav {
            display: none
        }

        #toogle-nav {
            display: block
        }

        .hero-content-wrapper {
            flex-direction: column;
            text-align: left;
            gap: 3rem
        }

        .hero-dark-text {
            max-width: 100%
        }

        .float-badge {
            font-size: .65rem !important;
            padding: 6px 12px !important;
            z-index: 5 !important
        }

        .b-top-left {
            display: flex !important;
            top: 20% !important;
            left: 0% !important
        }

        .b-top-right {
            display: flex !important;
            top: 20% !important;
            right: 0% !important;
            left: auto !important
        }

        .b-mid-left {
            display: flex !important;
            top: 50% !important;
            left: 0% !important;
            right: auto !important
        }

        .b-mid-right {
            display: flex !important;
            top: 75% !important;
            right: 0% !important
        }

        .b-bottom-left {
            display: flex !important;
            bottom: -5% !important;
            left: 50% !important;
            transform: translateX(-50%) !important
        }

        .pricing-grid {
            flex-direction: column;
            gap: 3rem
        }

        .crawl-perspective {
            gap: 1.5rem;
            transform: rotateX(50deg) scale(1)
        }

        .cyber-card {
            width: 130px;
            height: 180px
        }

        .crawl-col {
            width: 130px
        }

        .content-wrapper {
            grid-template-columns: 1fr;
            gap: 2.5rem;
            text-align: center
        }

        .info-block {
            margin: 0 auto
        }

        .visual-block.stacked-img {
            order: -1;
            height: 220px
        }

        .orbit-container {
            transform: scale(.85);
            margin-bottom: 1.5rem
        }

        .pricing-card.dark-card {
            transform: scale(1);
            margin: 0;
            z-index: 1;
            padding: 2.5rem 2rem
        }
    }

    @media (max-width:768px) {
        h1 {
            font-size: 2.2rem
        }

        section {
            padding: 4rem 0
        }

        .hero.hero-dark {
            padding-top: 120px
        }

        .hero-dark-text h1 {
            font-size: 2.5rem
        }

        .hero-visuals {
            display: none
        }

        .faq-flex {
            flex-direction: column
        }

        #contact .container {
            flex-direction: column;
            text-align: center
        }

        .footer-grid {
            grid-template-columns: 1fr;
            text-align: left;
            gap: 2rem;
            padding: 0 1rem
        }

        .footer-about .logo-footer img {
            margin: 0 0 1rem 0;
            height: 40px;
            display: block
        }

        .footer-about p {
            margin: 0 0 .5rem 0;
            font-size: .9rem
        }

        .footer-socials {
            justify-content: flex-start;
            margin-top: 1rem
        }

        .footer-links h4 {
            margin-bottom: .8rem;
            font-size: 1.1rem
        }

        .footer-links ul li {
            margin-bottom: .8rem
        }

        .footer-bottom {
            flex-direction: column;
            gap: 1rem;
            text-align: left;
            padding: 1.5rem 1rem
        }

        .footer-bottom-links {
            display: flex;
            flex-direction: row;
            gap: 1rem;
            margin-top: 0;
            justify-content: flex-start
        }

        .footer-bottom-links a {
            margin-left: 0
        }

        .cmp-header h2 {
            font-size: 2rem
        }

        .cmp-table-desktop {
            display: none
        }

        .cmp-cards-mobile {
            display: flex
        }

        .testi-title {
            font-size: 2rem
        }

        .testi-card {
            width: 320px;
            padding: 1.5rem
        }

        .customizer-box {
            flex-direction: column;
            text-align: center
        }

        .color-swatches {
            justify-content: center;
            width: 100%;
            flex-wrap: wrap
        }

        .client-trust h2 {
            font-size: 1.1rem;
            padding: 0 1rem;
            line-height: 1.4
        }

        .domain-luxury {
            padding: 3rem 0 !important
        }

        .search-domain-wrapper {
            flex-direction: column !important;
            padding: 10px !important;
            background: 0 0 !important;
            border: none !important
        }

        .input-group,
        .domain-select,
        .btn-domain-search {
            width: 100% !important;
            background: #121212 !important;
            border: 1px solid rgba(255, 255, 255, .1) !important;
            border-radius: 8px !important;
            margin-bottom: 8px !important;
            padding: 12px !important
        }

        .divider {
            display: none !important
        }

        .domain-select {
            text-align: left !important;
            padding-left: 12px !important
        }

        .domain-card {
            padding: 1rem !important;
            background: 0 0 !important;
            border: none !important;
            box-shadow: none !important
        }

        .domain-luxury h2 {
            font-size: 1.6rem !important
        }

        .premium-pricelist-card .pricelist-header {
            flex-direction: column !important;
            text-align: center !important;
            padding: 1.5rem !important
        }

        .premium-pricelist-card .header-text p {
            justify-content: center !important
        }

        .premium-pricelist-card .table-controls {
            flex-direction: column !important;
            padding: 0 1.2rem 1.2rem 1.2rem !important;
            gap: .8rem !important
        }

        .premium-pricelist-card .table-wrapper {
            padding: 0 1.2rem 1.2rem 1.2rem !important
        }

        .premium-pricelist-card .badge-gold-ui {
            display: inline-block !important;
            margin-top: 6px !important;
            margin-left: 0 !important
        }

        .dark-portfolio {
            padding: 4rem 0
        }

        .dark-portfolio .tema-card {
            width: 220px;
            margin-right: 1.2rem
        }

        .phone-mockup {
            height: 440px;
            border-radius: 30px
        }

        .phone-screen {
            border-radius: 24px
        }

        .dark-customizer {
            flex-direction: column;
            text-align: center
        }

        .color-swatches {
            justify-content: center;
            width: 100%
        }

        .premium-controls {
            flex-direction: column !important;
            padding: 0 1.5rem 1.5rem 1.5rem !important
        }

        .premium-header {
            padding: 1.5rem !important;
            flex-direction: column;
            text-align: center
        }

        .premium-table-wrapper {
            padding: 0 1.5rem 1.5rem 1.5rem !important
        }

        .badge-gold {
            display: inline-block;
            margin-top: 8px;
            margin-left: 0
        }
    }

    @media (max-width:640px) {
        .tech-cards-grid {
            grid-template-columns: 1fr;
            gap: 1.5rem
        }

        .tech-card-content {
            padding: 2rem
        }
    }

    @media (max-width:576px) {
        .navbar .logo img {
            height: 130px
        }

        .hero.hero-dark {
            padding-top: 100px;
            padding-bottom: 40px
        }

        .hero-dark-text h1 {
            font-size: 2rem;
            margin-bottom: 1rem
        }

        .hero-checklist li {
            font-size: .95rem;
            margin-bottom: 1rem
        }

        .btn-blue-flat {
            width: 100%;
            justify-content: center;
            font-size: 1rem;
            padding: 14px 20px
        }

        .hero-sub-benefits {
            justify-content: center;
            text-align: center
        }

        .search-domain {
            flex-direction: column
        }

        .domain-choosed,
        .domain-tld,
        #btn-domain {
            width: 100%;
            flex-basis: auto
        }

        .domain-tld {
            border-left: none;
            border-top: 1px solid rgba(255, 255, 255, .1);
            padding-left: .5rem;
            padding-top: 1rem;
            text-align: left
        }

        .cmp-card-body {
            flex-direction: column
        }

        .cmp-col:first-child {
            border-right: none;
            border-bottom: 1px solid rgba(255, 255, 255, .05)
        }
    }

    .pricing-section {
        padding: 6rem 0;
        background-color: var(--background-light);
        border-bottom: 1px solid var(--border-color-light)
    }

    .pricing-header {
        text-align: center;
        margin-bottom: 4rem;
        padding: 0 1rem
    }

    .pricing-header h2 {
        font-size: 2.5rem;
        color: var(--text-primary-dark);
        font-family: var(--font-heading);
        font-weight: 800;
        margin-bottom: 1rem
    }

    .pricing-grid {
        display: flex;
        justify-content: center;
        align-items: stretch;
        gap: 2rem;
        flex-wrap: wrap;
        padding: 0 1rem
    }

    .pricing-card {
        background: #fff;
        border: 1px solid var(--border-color-light);
        border-radius: 20px;
        padding: 2.5rem 2rem;
        width: 100%;
        max-width: 350px;
        box-shadow: var(--shadow-md);
        position: relative;
        display: flex;
        flex-direction: column;
        transition: transform .3s ease, box-shadow .3s ease;
        height: auto
    }

    .pricing-card.dark-card {
        background: var(--background-dark);
        color: #fff;
        border: none;
        box-shadow: 0 20px 40px rgba(18, 18, 18, .25);
        z-index: 2
    }

    .badge-best-value {
        position: absolute;
        top: -15px;
        left: 50%;
        transform: translateX(-50%);
        background: var(--primary-light);
        color: #fff;
        padding: 6px 20px;
        border-radius: 20px;
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: 1px;
        text-transform: uppercase;
        box-shadow: 0 4px 10px rgba(96, 165, 250, .4);
        white-space: nowrap
    }

    .p-icon {
        width: 40px;
        height: 40px;
        margin-bottom: 1rem;
        border-radius: 8px
    }

    .p-title {
        font-size: 1.2rem;
        font-weight: 700;
        margin-bottom: .5rem;
        color: var(--text-primary-dark)
    }

    .dark-card .p-title {
        color: #fff
    }

    .p-price-box {
        margin-bottom: .2rem;
        display: flex;
        align-items: baseline;
        gap: 4px
    }

    .p-price {
        font-size: 2.5rem;
        font-weight: 800;
        color: var(--text-primary-dark);
        font-family: var(--font-heading);
        line-height: 1
    }

    .dark-card .p-price {
        color: #fff
    }

    .p-strike {
        font-size: .9rem;
        color: #ef4444;
        text-decoration: line-through;
        margin-bottom: .5rem;
        display: block;
        font-weight: 600
    }

    .p-renewal {
        font-size: .85rem;
        color: var(--primary);
        font-weight: 700;
        margin-bottom: 1.5rem;
        display: block;
        background: rgba(255, 255, 255, .1);
        padding: 4px 8px;
        border-radius: 6px;
        width: fit-content
    }

    .dark-card .p-renewal {
        color: var(--primary-light);
        background: rgba(255, 255, 255, .1)
    }

    .p-desc {
        font-size: .9rem;
        color: var(--text-secondary-dark);
        margin-bottom: 1.5rem;
        line-height: 1.5
    }

    .dark-card .p-desc {
        color: var(--text-secondary-light)
    }

    .cuan-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 16px;
        border-radius: 12px;
        margin-bottom: 1.5rem;
        background: #eff6ff;
        border: 1px solid #bfdbfe
    }

    .cuan-box .c-label {
        font-size: .75rem;
        font-weight: 700;
        color: var(--primary)
    }

    .cuan-box .c-value {
        font-size: 1.1rem;
        font-weight: 800;
        color: var(--primary-dark);
        font-family: var(--font-heading)
    }

    .dark-card .cuan-box {
        background: rgba(255, 255, 255, .05);
        border: 1px solid rgba(255, 255, 255, .1)
    }

    .dark-card .cuan-box .c-label {
        color: var(--primary-light)
    }

    .dark-card .cuan-box .c-value {
        color: #fff
    }

    .p-features {
        list-style: none;
        padding: 0;
        margin-bottom: 1rem;
        flex-grow: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 100%
    }

    .p-features li {
        width: 100%;
        max-width: 280px;
        display: flex;
        align-items: flex-start;
        margin-bottom: .8rem;
        font-size: .85rem;
        color: var(--text-primary-dark);
        line-height: 1.5;
        text-align: left
    }

    .dark-card .p-features li {
        color: #f8fafc
    }

    .p-features li i.fa-check {
        color: var(--primary);
        margin-top: 3px;
        margin-right: 8px;
        font-size: .95rem;
        flex-shrink: 0
    }

    .dark-card .p-features li i.fa-check {
        color: var(--primary-light)
    }

    .f-info {
        display: none !important
    }

    .f-text {
        flex: 1;
        position: relative;
        line-height: 1.5
    }

    .f-text[data-tip] {
        cursor: help;
        display: inline-block;
        width: fit-content
    }

    .f-text[data-tip]::after {
        content: attr(data-tip);
        position: absolute;
        bottom: 100%;
        left: 0;
        background: #1e293b;
        color: #f8fafc;
        padding: 8px 14px;
        border-radius: 8px;
        font-size: 12px;
        font-weight: 500;
        white-space: normal;
        width: max-content;
        max-width: 220px;
        opacity: 0;
        visibility: hidden;
        transition: all .3s cubic-bezier(.25, .46, .45, .94);
        box-shadow: 0 10px 25px rgba(0, 0, 0, .3);
        z-index: 20;
        pointer-events: none;
        margin-bottom: 8px;
        line-height: 1.4;
        border: 1px solid rgba(255, 255, 255, .1)
    }

    .f-text[data-tip]::before {
        content: '';
        position: absolute;
        bottom: 100%;
        left: 15px;
        border-width: 6px;
        border-style: solid;
        border-color: #1e293b transparent transparent transparent;
        opacity: 0;
        visibility: hidden;
        transition: all .3s cubic-bezier(.25, .46, .45, .94);
        z-index: 20;
        margin-bottom: -4px
    }

    .f-text[data-tip]:hover::after,
    .f-text[data-tip]:hover::before {
        opacity: 1;
        visibility: visible;
        transform: translateY(-4px)
    }

    .p-features li.hidden-feature {
        display: none
    }

    .show-all-features .p-features li.hidden-feature {
        display: flex
    }

    .btn-toggle-features {
        background: 0 0;
        border: none;
        color: var(--primary);
        font-weight: 700;
        font-size: .9rem;
        cursor: pointer;
        margin-top: auto;
        margin-bottom: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 5px;
        width: 100%;
        transition: color .3s ease;
        padding-top: 1rem
    }

    .btn-toggle-features:hover {
        color: var(--primary-dark);
        text-decoration: underline
    }

    .dark-card .btn-toggle-features {
        color: var(--primary-light)
    }

    .dark-card .btn-toggle-features:hover {
        color: #fff
    }

    .btn-pricing {
        width: 100%;
        padding: 14px;
        border-radius: 12px;
        font-weight: 700;
        font-family: var(--font-heading);
        text-align: center;
        transition: all .3s ease;
        cursor: pointer;
        display: block;
        margin-top: 15px
    }

    .btn-pricing-dark {
        background: var(--background-dark);
        color: #fff
    }

    .btn-pricing-dark:hover {
        background: var(--surface-dark);
        color: #fff
    }

    .btn-pricing-light {
        background: var(--primary);
        color: #fff
    }

    .btn-pricing-light:hover {
        background: var(--primary-light);
        color: #fff
    }

    @media (min-width:993px) {
        .pricing-grid {
            align-items: stretch
        }

        .pricing-card.best-card {
            transform: scale(1.08);
            z-index: 10;
            box-shadow: 0 25px 60px rgba(18, 18, 18, .4);
            margin: 0 -15px;
            padding-top: 3.5rem;
            padding-bottom: 3.5rem;
            border: 1px solid rgba(255, 255, 255, .1)
        }
    }

    .domain-luxury {
        background-color: #121212 !important;
        padding: 3.5rem 0 !important;
        position: relative !important;
        border-bottom: 1px solid rgba(255, 255, 255, .03) !important;
        font-family: var(--font-body) !important
    }

    .domain-header {
        margin-bottom: 2rem !important;
        text-align: center !important
    }

    .domain-subtitle {
        font-size: .7rem !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        color: #64748b !important;
        margin-bottom: .5rem !important;
        display: block !important
    }

    .domain-luxury h2 {
        color: #fff !important;
        font-size: 2rem !important;
        font-weight: 800 !important;
        letter-spacing: -.5px !important;
        margin-bottom: .5rem !important;
        font-family: var(--font-heading) !important
    }

    .text-gradient-gold {
        color: #fbbf24 !important;
        font-weight: 600 !important
    }

    .domain-desc {
        color: #94a3b8 !important;
        font-size: .95rem !important;
        max-width: 550px !important;
        margin: 0 auto !important;
        line-height: 1.5 !important
    }

    .domain-card {
        max-width: 750px !important;
        margin: 0 auto !important;
        background: #181818 !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 12px !important;
        padding: 1rem !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, .5) !important
    }

    .search-domain-wrapper {
        display: flex !important;
        align-items: center !important;
        background: #121212 !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 10px !important;
        padding: 6px !important;
        transition: border-color .3s ease, box-shadow .3s ease !important
    }

    .search-domain-wrapper:focus-within {
        border-color: #3b82f6 !important;
        box-shadow: 0 0 0 3px rgba(59, 130, 246, .15) !important
    }

    .input-group {
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        padding-left: 1rem !important
    }

    .input-icon {
        color: #475569 !important;
        font-size: 1rem !important;
        margin-right: 10px !important
    }

    .domain-input {
        width: 100% !important;
        background: 0 0 !important;
        border: none !important;
        color: #f8fafc !important;
        font-size: .95rem !important;
        padding: 10px 0 !important;
        outline: 0 !important
    }

    .domain-input::placeholder {
        color: #475569 !important
    }

    .divider {
        width: 1px !important;
        height: 20px !important;
        background: rgba(255, 255, 255, .1) !important;
        margin: 0 10px !important
    }

    .domain-select {
        background: 0 0 !important;
        border: none !important;
        color: #cbd5e1 !important;
        font-size: .95rem !important;
        padding: 10px 14px 10px 0 !important;
        outline: 0 !important;
        cursor: pointer !important;
        font-weight: 500 !important
    }

    .domain-select option {
        background: #181818 !important;
        color: #fff !important
    }

    .btn-domain-search {
        background: #2563eb !important;
        color: #fff !important;
        border: none !important;
        padding: 10px 24px !important;
        border-radius: 6px !important;
        font-size: .9rem !important;
        font-weight: 600 !important;
        cursor: pointer !important;
        transition: background .3s ease !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important
    }

    .btn-domain-search:hover {
        background: #1d4ed8 !important
    }

    .btn-buat-sekarang {
        background: #fff !important;
        color: #121212 !important;
        padding: 10px 30px !important;
        border-radius: 50px !important;
        font-weight: 700 !important;
        font-size: .9rem !important;
        text-decoration: none !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        transition: all .3s ease !important;
        border: 1px solid #fff !important;
        display: none;
        margin: 0 auto !important;
        width: fit-content !important
    }

    .btn-buat-sekarang:hover {
        background: 0 0 !important;
        color: #fff !important;
        transform: translateY(-2px) !important
    }

    .premium-pricelist-card {
        background-color: #181818 !important;
        border: 1px solid rgba(255, 255, 255, .05) !important;
        border-radius: 16px !important;
        padding: 0 !important;
        box-shadow: 0 15px 40px -10px rgba(0, 0, 0, .6) !important;
        margin-top: 1.5rem !important
    }

    .premium-pricelist-card .pricelist-header {
        padding: 1.5rem 2rem !important;
        display: flex !important;
        align-items: center !important;
        gap: 1rem !important;
        border-bottom: none !important;
        margin-bottom: 0 !important
    }

    .premium-pricelist-card .header-icon {
        width: 45px !important;
        height: 180px !important;
        background: linear-gradient(135deg, #60a5fa, #3b82f6) !important;
        border-radius: 12px !important;
        color: #fff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1.2rem !important
    }

    .premium-pricelist-card .header-text h2 {
        color: #f8fafc !important;
        font-size: 1.3rem !important;
        font-weight: 700 !important;
        margin-bottom: .2rem !important
    }

    .premium-pricelist-card .header-text p {
        color: #94a3b8 !important;
        font-size: .85rem !important;
        margin: 0 !important
    }

    .premium-pricelist-card .badge-gold-ui {
        background-color: rgba(251, 191, 36, .1) !important;
        color: #fbbf24 !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
        font-size: .7rem !important;
        font-weight: 700 !important;
        border: 1px solid rgba(251, 191, 36, .2) !important;
        margin-left: 8px !important
    }

    .premium-pricelist-card .table-controls {
        display: flex !important;
        flex-direction: row !important;
        gap: 1rem !important;
        padding: 0 2rem 1.5rem 2rem !important;
        border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
        margin-bottom: 0 !important
    }

    .premium-pricelist-card .filter-wrapper,
    .premium-pricelist-card .search-wrapper {
        flex: 1 !important;
        position: relative !important
    }

    .premium-pricelist-card .btn-filter,
    .premium-pricelist-card #layanan-search-input {
        background-color: #1f1f1f !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        color: #f8fafc !important;
        padding: 10px 16px !important;
        border-radius: 8px !important;
        font-size: .9rem !important;
        width: 100% !important;
        outline: 0 !important
    }

    .premium-pricelist-card .btn-filter {
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important
    }

    .premium-pricelist-card #layanan-search-input {
        padding-left: 38px !important
    }

    .premium-pricelist-card #layanan-search-input::placeholder {
        color: #64748b !important
    }

    .premium-pricelist-card .search-icon {
        color: #64748b !important;
        position: absolute !important;
        left: 14px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        font-size: .9rem !important;
        z-index: 2 !important
    }

    .premium-pricelist-card .dropdown-filter {
        background-color: #1f1f1f !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 8px !important;
        top: calc(100% + 5px) !important
    }

    .premium-pricelist-card .search-input {
        background-color: #181818 !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        color: #fff !important;
        padding: 8px !important;
        font-size: .85rem !important
    }

    .premium-pricelist-card .dropdown-item {
        color: #cbd5e1 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
        padding: 10px 14px !important;
        font-size: .85rem !important
    }

    .premium-pricelist-card .dropdown-item:hover {
        background-color: #2a2a2a !important;
        color: #fff !important
    }

    .premium-pricelist-card .table-wrapper {
        padding: 0 2rem 1.5rem 2rem !important;
        border: none !important;
        background: 0 0 !important
    }

    .premium-pricelist-card table.dataTable {
        border-collapse: collapse !important;
        border: none !important;
        width: 100% !important
    }

    .premium-pricelist-card table.dataTable thead th {
        background-color: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, .1) !important;
        color: #e2e8f0 !important;
        font-size: .75rem !important;
        font-weight: 700 !important;
        padding: 1rem .5rem !important
    }

    .premium-pricelist-card table.dataTable thead th.header-gold {
        color: #fbbf24 !important
    }

    .premium-pricelist-card table.dataTable tbody tr {
        background-color: transparent !important
    }

    .premium-pricelist-card table.dataTable tbody tr:nth-child(odd) {
        background-color: transparent !important
    }

    .premium-pricelist-card table.dataTable tbody tr:hover {
        background-color: rgba(255, 255, 255, .05) !important
    }

    .premium-pricelist-card table.dataTable tbody td {
        border-top: 1px solid rgba(255, 255, 255, .05) !important;
        color: #f8fafc !important;
        padding: .8rem .5rem !important;
        font-size: .85rem !important
    }

    .premium-pricelist-card table.dataTable tbody td:nth-child(2) {
        color: #cbd5e1 !important;
        font-weight: 500 !important
    }

    .premium-pricelist-card table.dataTable tbody td:nth-child(3) {
        color: #fbbf24 !important;
        font-weight: 700 !important
    }

    .premium-pricelist-card .pricelist-footer {
        padding: 1rem !important;
        border-top: 1px solid rgba(255, 255, 255, .05) !important;
        background-color: rgba(0, 0, 0, .2) !important;
        margin-top: 0 !important;
        text-align: center !important
    }

    .premium-pricelist-card .pricelist-footer p {
        color: #94a3b8 !important;
        font-size: .85rem !important;
        margin: 0 !important
    }

    .premium-pricelist-card .pricelist-footer a {
        color: #60a5fa !important;
        text-decoration: none !important
    }

    .dark-portfolio {
        background-color: #121212;
        position: relative;
        padding: 6rem 0;
        border-top: 1px solid rgba(255, 255, 255, .05);
        border-bottom: 1px solid rgba(255, 255, 255, .05);
        overflow: hidden
    }

    .portfolio-glow-bg {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: 100%;
        background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, .02) 0, transparent 50%), radial-gradient(circle at 80% 70%, rgba(255, 255, 255, .02) 0, transparent 50%);
        pointer-events: none;
        z-index: 1
    }

    .relative-z {
        position: relative;
        z-index: 2
    }

    .badge-premium {
        display: inline-block;
        padding: 6px 16px;
        background: rgba(255, 255, 255, .05);
        color: #fff;
        border: 1px solid rgba(255, 255, 255, .1);
        border-radius: 50px;
        font-size: .8rem;
        font-weight: 700;
        letter-spacing: 2px;
        margin-bottom: 1rem
    }

    .dark-portfolio .tema-header h2 {
        color: #f8fafc;
        font-size: 2.5rem;
        font-weight: 800
    }

    .text-gradient-blue {
        background: linear-gradient(to right, #fff, #aaa);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent
    }

    .dark-portfolio .tema-header p {
        color: #94a3b8;
        max-width: 650px;
        margin: 1rem auto 0;
        font-size: 1.05rem
    }

    .dark-portfolio .tab-btn {
        background: rgba(18, 18, 18, .6);
        color: #94a3b8;
        border: 1px solid rgba(255, 255, 255, .1);
        backdrop-filter: blur(8px)
    }

    .dark-portfolio .tab-btn:hover {
        color: #f8fafc;
        background: rgba(26, 26, 26, .8);
        border-color: rgba(255, 255, 255, .2)
    }

    .dark-portfolio .tab-btn.active {
        background: #2563eb;
        color: #fff;
        border-color: #2563eb;
        box-shadow: 0 4px 15px rgba(37, 99, 235, .3)
    }

    .dark-portfolio .tema-card {
        width: 240px;
        margin-right: 2rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        position: relative;
        padding: 15px 0
    }

    .phone-mockup {
        width: 100%;
        height: 480px;
        background: #000;
        border-radius: 35px;
        padding: 6px;
        position: relative;
        box-shadow: inset 0 0 0 1px #333, 0 0 0 1px #121212, 0 10px 25px rgba(0, 0, 0, .8);
        transition: all .4s cubic-bezier(.25, .46, .45, .94);
        margin-bottom: 1.2rem;
        z-index: 2
    }

    .phone-glow-effect {
        position: absolute;
        top: 25px;
        left: 50%;
        transform: translateX(-50%);
        width: 88%;
        height: 460px;
        border-radius: 40px;
        background: 0 0;
        z-index: 1;
        filter: blur(22px);
        opacity: 0;
        transition: all .4s cubic-bezier(.25, .46, .45, .94)
    }

    .phone-mockup .physical-buttons::before {
        content: '';
        position: absolute;
        left: -3px;
        top: 100px;
        width: 3px;
        height: 40px;
        background: #333;
        border-radius: 3px 0 0 3px;
        box-shadow: 0 50px 0 0 #333;
        z-index: -1
    }

    .phone-mockup .physical-buttons::after {
        content: '';
        position: absolute;
        right: -3px;
        top: 120px;
        width: 3px;
        height: 50px;
        background: #333;
        border-radius: 0 3px 3px 0;
        z-index: -1
    }

    .phone-dynamic-island {
        position: absolute;
        top: 14px;
        left: 50%;
        transform: translateX(-50%);
        width: 75px;
        height: 20px;
        background: #050505;
        border-radius: 20px;
        z-index: 10;
        box-shadow: inset 0 0 2px rgba(255, 255, 255, .05)
    }

    .phone-screen {
        width: 100%;
        height: 100%;
        background: #0f0f0f;
        border-radius: 28px;
        overflow: hidden;
        position: relative;
        -webkit-mask-image: -webkit-radial-gradient(#fff, #000)
    }

    .dark-portfolio .tema-mockup {
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: top;
        transition: transform .5s cubic-bezier(.25, .46, .45, .94)
    }

    .dark-portfolio .tema-card:hover .phone-mockup {
        transform: translateY(-8px);
        box-shadow: inset 0 0 0 1px #444, 0 0 0 1px #121212, 0 20px 30px rgba(0, 0, 0, .9)
    }

    .dark-portfolio .tema-card:hover .tema-mockup {
        transform: scale(1.03)
    }

    .dark-portfolio .tema-card:hover .phone-glow-effect {
        transform: translate(-50%, -8px)
    }

    .dark-portfolio .tema-card.hover-blue:hover .phone-glow-effect {
        opacity: .85;
        background: #2563eb
    }

    .dark-portfolio .tema-card.hover-cyan:hover .phone-glow-effect {
        opacity: .85;
        background: #0284c7
    }

    .dark-portfolio .tema-card.hover-red:hover .phone-glow-effect {
        opacity: .85;
        background: #dc2626
    }

    .dark-portfolio .tema-card.hover-green:hover .phone-glow-effect {
        opacity: .85;
        background: #16a34a
    }

    .dark-portfolio .tema-card.hover-purple:hover .phone-glow-effect {
        opacity: .85;
        background: #9333ea
    }

    .dark-portfolio .tema-card.hover-orange:hover .phone-glow-effect {
        opacity: .85;
        background: #ea580c
    }

    .dark-portfolio .tema-card.hover-blue:hover .phone-mockup {
        box-shadow: inset 0 0 0 1px #3b82f6, 0 0 0 1px #1d4ed8
    }

    .dark-portfolio .tema-card.hover-cyan:hover .phone-mockup {
        box-shadow: inset 0 0 0 1px #0ea5e9, 0 0 0 1px #0369a1
    }

    .dark-portfolio .tema-card.hover-red:hover .phone-mockup {
        box-shadow: inset 0 0 0 1px #ef4444, 0 0 0 1px #b91c1c
    }

    .dark-portfolio .tema-card.hover-green:hover .phone-mockup {
        box-shadow: inset 0 0 0 1px #22c55e, 0 0 0 1px #15803d
    }

    .dark-portfolio .tema-card.hover-purple:hover .phone-mockup {
        box-shadow: inset 0 0 0 1px #a855f7, 0 0 0 1px #7e22ce
    }

    .dark-portfolio .tema-card.hover-orange:hover .phone-mockup {
        box-shadow: inset 0 0 0 1px #f97316, 0 0 0 1px #c2410c
    }

    .dark-portfolio .mockup-overlay {
        background: rgba(18, 18, 18, .8);
        backdrop-filter: blur(3px)
    }

    .dark-portfolio .btn-look {
        background: #2563eb;
        color: #fff;
        font-weight: 600;
        font-size: .9rem;
        padding: 8px 18px;
        border-radius: 50px;
        transition: all .3s;
        border: none
    }

    .dark-portfolio .btn-look:hover {
        background: #3b82f6;
        box-shadow: 0 4px 12px rgba(37, 99, 235, .4)
    }

    .dark-portfolio .tema-title {
        color: #cbd5e1;
        font-size: 1rem;
        font-weight: 700;
        transition: color .3s ease;
        margin-top: .5rem
    }

    .dark-portfolio .tema-card.hover-blue:hover .tema-title {
        color: #60a5fa
    }

    .dark-portfolio .tema-card.hover-cyan:hover .tema-title {
        color: #38bdf8
    }

    .dark-portfolio .tema-card.hover-red:hover .tema-title {
        color: #f87171
    }

    .dark-portfolio .tema-card.hover-green:hover .tema-title {
        color: #4ade80
    }

    .dark-portfolio .tema-card.hover-purple:hover .tema-title {
        color: #c084fc
    }

    .dark-portfolio .tema-card.hover-orange:hover .tema-title {
        color: #fb923c
    }

    .dark-customizer {
        background: #121212;
        border: 1px solid rgba(255, 255, 255, .1);
        box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
        border-radius: 16px;
        padding: 2rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 2rem;
        margin-top: 3rem
    }

    .dark-customizer .custom-text h3 {
        color: #f8fafc;
        font-size: 1.3rem;
        font-weight: 700;
        margin-bottom: .5rem
    }

    .dark-customizer .custom-text p {
        color: #94a3b8;
        font-size: .9rem
    }

    .dark-customizer .color-swatches span {
        color: #64748b;
        font-weight: 600;
        font-size: .75rem;
        margin-top: 6px;
        display: block;
        text-align: center
    }

    .dark-customizer .color-circle {
        width: 35px;
        height: 35px;
        border-radius: 50%;
        transition: transform .3s ease;
        margin: 0 auto
    }

    .dark-customizer .swatch-item:hover .color-circle {
        transform: scale(1.2)
    }

    .tema-scroll-wrapper::-webkit-scrollbar {
        display: block;
        height: 4px
    }

    .tema-scroll-wrapper::-webkit-scrollbar-track {
        background: rgba(255, 255, 255, .05);
        border-radius: 10px;
        margin: 0 20px
    }

    .tema-scroll-wrapper::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, .2);
        border-radius: 10px
    }

    .tema-scroll-wrapper::-webkit-scrollbar-thumb:hover {
        background: rgba(255, 255, 255, .4)
    }

    .premium-dashboard-card {
        background-color: #121212 !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        border-radius: 20px !important;
        padding: 0 !important;
        box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .5) !important;
        overflow: visible !important;
        margin-top: 2rem !important
    }

    .premium-header {
        padding: 2.5rem 2.5rem 2rem 2.5rem !important;
        border-bottom: none !important;
        margin-bottom: 0 !important
    }

    .premium-icon {
        background: linear-gradient(135deg, #818cf8, #4f46e5) !important;
        color: #fff !important;
        box-shadow: 0 10px 20px rgba(79, 70, 229, .3) !important;
        border-radius: 14px !important
    }

    .premium-controls {
        display: flex !important;
        flex-direction: row !important;
        gap: 1.5rem !important;
        padding: 0 2.5rem 2rem 2.5rem !important;
        max-width: 100% !important;
        border-bottom: 1px solid rgba(255, 255, 255, .05) !important
    }

    .premium-input {
        width: 100% !important;
        background-color: #1a1a1a !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        color: #f8fafc !important;
        padding: 14px 20px !important;
        border-radius: 12px !important;
        font-size: .95rem !important;
        transition: all .3s ease
    }

    .premium-input:focus,
    .premium-input:hover {
        border-color: #4f46e5 !important;
        background-color: #2a2a2a !important
    }

    #layanan-search-input {
        padding-left: 45px !important
    }

    .custom-search-icon {
        left: 15px !important;
        color: #64748b !important
    }

    .dropdown-filter {
        background-color: #1a1a1a !important;
        border: 1px solid rgba(255, 255, 255, .1) !important;
        box-shadow: 0 10px 25px rgba(0, 0, 0, .5) !important;
        top: calc(100% + 5px) !important
    }

    .dropdown-filter .search-input {
        background-color: #121212 !important;
        border: 1px solid rgba(255, 255, 255, .1) !important
    }

    .dropdown-filter .dropdown-item {
        color: #cbd5e1 !important;
        border-bottom: 1px solid rgba(255, 255, 255, .05) !important
    }

    .dropdown-filter .dropdown-item:hover {
        background-color: #2a2a2a !important;
        color: #fff !important
    }

    .premium-table-wrapper {
        padding: 0 2.5rem 2.5rem 2.5rem !important;
        border: none !important;
        border-radius: 0 !important
    }

    table.dataTable thead th {
        background-color: transparent !important;
        border-bottom: 1px solid rgba(255, 255, 255, .05) !important;
        padding: 1.5rem 1rem !important;
        color: #64748b !important
    }

    table.dataTable thead th.text-gold {
        color: #fbbf24 !important
    }

    table.dataTable tbody tr {
        background-color: transparent !important
    }

    table.dataTable tbody tr:nth-child(odd) {
        background-color: transparent !important
    }

    table.dataTable tbody tr:hover {
        background-color: rgba(255, 255, 255, .05) !important
    }

    table.dataTable tbody td {
        border-top: 1px solid rgba(255, 255, 255, .05) !important;
        padding: 1.2rem 1rem !important;
        color: #e2e8f0 !important
    }

    .dataTables_wrapper .dataTables_paginate {
        margin-top: 1.5rem !important
    }

    .hero-button-group {
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        margin-bottom: 2rem;
        align-items: center
    }

    .hero-button-group .btn-blue-flat {
        margin-bottom: 0 !important;
        white-space: nowrap !important;
        padding: 14px 28px !important;
        font-size: 1rem !important
    }

    .btn-outline-white {
        background-color: rgba(255, 255, 255, .05);
        color: #fff;
        border: 2px solid rgba(255, 255, 255, .5);
        padding: 12px 28px;
        border-radius: 10px;
        font-weight: 800;
        font-family: var(--font-heading);
        font-size: 1rem;
        text-transform: uppercase;
        letter-spacing: 1px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        transition: all .3s ease;
        text-decoration: none;
        white-space: nowrap
    }

    .btn-outline-white:hover {
        background-color: rgba(255, 255, 255, .15);
        border-color: #fff;
        transform: translateY(-2px);
        box-shadow: 0 5px 15px rgba(255, 255, 255, .2)
    }

    @media (max-width:576px) {
        .hero-button-group {
            flex-direction: column;
            width: 100%
        }

        .hero-button-group .btn-blue-flat,
        .hero-button-group .btn-outline-white {
            width: 100%;
            justify-content: center
        }
    }