html, body {
    overflow-x: hidden;
}


/* =====================================================
SERVICES HERO — FINAL BALANCED FIX (SMOOTH FIXED)
===================================================== */

.services-hero {
    position: relative;
    overflow: hidden;
}

/* GRID */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 80px;

    min-height: 85vh;
}

/* ================= TEXT FIX ================= */

.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;

    margin-top: -60px;
}

/* TITLE */
.hero-content h1 {
    font-size: 64px;
    line-height: 1.1;

    opacity: 0;
    transform: translate3d(0,40px,0);

    animation: heroFadeUp 0.8s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: 0.2s;
}

/* SUBTEXT */
.hero-subtext {
    margin-top: 18px;
    font-size: 18px;

    opacity: 0;
    transform: translate3d(0,40px,0);

    animation: heroFadeUp 0.8s cubic-bezier(.22,.61,.36,1) forwards;
    animation-delay: 0.35s;
}

/* ================= ANIMATION ================= */

@keyframes heroFadeUp {
    0% {
        opacity: 0;
        transform: translate3d(0,40px,0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0,0,0);
    }
}

/* =====================================================
📱 3D PHONE — CLEAN (NO BROKEN SIDES)
===================================================== */

.phone-3d {
    perspective: 1600px;

    width: 260px;
    height: 540px;

    margin: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    opacity: 0; /* 🔥 ADD */
    transform: translateX(80px) scale(0.95); /* 🔥 ADD */
    animation: slideInPhone 1.2s ease-out forwards; /* 🔥 ADD */
    animation-delay: 0.3s; /* 🔥 ADD */
}

.phone {
    width: 100%;
    height: 100%;
    position: relative;

    transform-style: preserve-3d;
    animation: phoneRotate 10s infinite ease-in-out;

    will-change: transform;
}

/* BASE */
.face {
    position: absolute;
    border-radius: 42px;
    overflow: hidden;

    background: #0a0d14;
    border: 1px solid rgba(255,255,255,0.08);
}

/* ================= FRONT ================= */
.front {
    width: 100%;
    height: 100%;

    transform: translateZ(20px);

    box-shadow:
        inset 0 0 0 7px #000,
        inset 0 0 0 9px rgba(255,255,255,0.04),
        0 30px 80px rgba(0,0,0,0.9);
}

/* SCREEN */
.front img {
    position: absolute;

    top: 10px;
    left: 10px;
    right: 10px;
    bottom: 10px;

    border-radius: 30px;

    width: calc(100% - 20px);
    height: calc(100% - 20px);

    object-fit: cover;
}

/* ================= BACK ================= */
.back {
    width: 100%;
    height: 100%;

    transform: rotateY(180deg) translateZ(20px);
    background: linear-gradient(180deg, #111, #000);
}

/* ❌ REMOVE ALL SIDES (CAUSE PROBLEM) */
.left,
.right,
.top,
.bottom {
    display: none;
}

/* ================= ROTATION ================= */

@keyframes phoneRotate {
    0% {
        transform: rotateY(-30deg) rotateX(6deg);
    }
    50% {
        transform: rotateY(30deg) rotateX(-5deg);
    }
    100% {
        transform: rotateY(-30deg) rotateX(6deg);
    }
}

/* ================= SLIDE IN (NEW) ================= */

@keyframes slideInPhone {
    0% {
        opacity: 0;
        transform: translateX(120px) scale(0.9);
    }
    60% {
        opacity: 1;
        transform: translateX(-10px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}

/* =====================================================
RESPONSIVE
===================================================== */

@media (max-width: 992px) {

.hero-grid {
    grid-template-columns: 1fr;
    text-align: center;
}

.hero-content {
    margin-top: 0;
}

.phone-3d {
    margin-top: 40px;
}

}

/* =====================================================
SERVICES LIST
===================================================== */

.services-list {
    text-align: center;
}

.list-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    margin-top: 40px;
}

.service-item {
    font-size: 28px;
    font-weight: 600;
    padding: 20px;
    border-radius: var(--radius-xl);
    background: var(--bg-elevated);
    border: 1px solid var(--border-color);
    transition: var(--transition-normal);
    cursor: pointer;
}

.service-item:hover {
    transform: translateX(10px);
    background: var(--bg-secondary);
}

.service-item:nth-child(even):hover {
    transform: translateX(-10px);
}

/* =====================================================
HOOK
===================================================== */

.services-hook {
    position: relative;
}

.services-hook h2 {
    font-size: 40px;
    max-width: 700px;
    margin: auto;
}

/* =====================================================
SERVICE DETAIL
===================================================== */

.split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}

.split.reverse {
    direction: rtl;
}

.split.reverse .service-text,
.split.reverse .service-image {
    direction: ltr;
}

.service-text h3 {
    font-size: 32px;
    margin-bottom: 16px;
}

.service-text p {
    font-size: 16px;
    opacity: 0.75;
    max-width: 420px;
}

.service-image img {
    width: 100%;
    border-radius: var(--radius-2xl);
    box-shadow: var(--shadow-lg);
    transition: var(--transition-slow);
}

.service-image img:hover {
    transform: scale(1.05);
}



/* =====================================================
🔥 NAVBAR FIX (SERVICES OVERRIDE)
===================================================== */

.navbar {
    will-change: transform;
}

/* elak glitch masa scroll heavy */
.navbar.hide {
    transform: translate(-50%, -140%) !important;
}