@media (prefers-reduced-motion: no-preference) {
    .hero {
        cursor: grab;
        --ambient-shift-x: 0px;
        --ambient-shift-y: 0px;
    }

    .hero.is-dragging {
        cursor: grabbing;
    }

    .hero-slide {
        transition: opacity 0.95s ease, visibility 0s linear 0.95s;
    }

    .hero-slide.active {
        visibility: visible;
        transition: opacity 0.95s ease;
    }

    .hero-slide .hero-bg {
        --hero-shift-x: 0px;
        --hero-shift-y: 0px;
        --hero-rotate: 0deg;
        --hero-scale-bump: 0;
        transform: translate3d(var(--hero-shift-x), var(--hero-shift-y), 0) scale(calc(1.06 + var(--hero-scale-bump))) rotate(var(--hero-rotate));
        transition: transform 7s ease, filter 1.1s ease;
        filter: saturate(0.95) contrast(1.03);
        will-change: transform;
    }

    .hero-slide.active .hero-bg {
        filter: saturate(1.02) contrast(1.08);
    }

    .hero-overlay {
        --hero-overlay-shift-x: 0px;
        --hero-overlay-shift-y: 0px;
        transform: translate3d(var(--hero-overlay-shift-x), var(--hero-overlay-shift-y), 0);
        transition: transform 0.8s ease, opacity 0.8s ease;
        will-change: transform;
    }

    .hero-grid {
        --hero-grid-shift-x: 0px;
        --hero-grid-shift-y: 0px;
        transform: translate3d(var(--hero-grid-shift-x), var(--hero-grid-shift-y), 0);
        transition: transform 0.8s ease, opacity 0.8s ease;
        will-change: transform;
    }

    .hero-grid::after {
        content: '';
        position: absolute;
        inset: -12%;
        background: radial-gradient(circle at center, rgba(6, 182, 212, 0.18), transparent 45%);
        opacity: 0;
        transform: scale(0.8);
        transition: opacity 0.45s ease, transform 0.45s ease;
    }

    .hero:hover .hero-grid::after,
    .hero.is-dragging .hero-grid::after {
        opacity: 1;
        transform: scale(1);
    }

    .hero-copy {
        --hero-copy-shift-x: 0px;
        --hero-copy-shift-y: 0px;
        --hero-copy-rotate: 0deg;
        transform: translate3d(var(--hero-copy-shift-x), var(--hero-copy-shift-y), 0) rotate(var(--hero-copy-rotate));
        transition: transform 0.8s ease;
        will-change: transform;
    }

    .hero-copy::after {
        content: '';
        position: absolute;
        inset: auto auto -14% -3%;
        width: 260px;
        height: 260px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(249, 115, 22, 0.22), transparent 70%);
        filter: blur(16px);
        opacity: 0;
        transition: opacity 0.45s ease;
        pointer-events: none;
    }

    .hero:hover .hero-copy::after,
    .hero.is-dragging .hero-copy::after {
        opacity: 1;
    }

    .hero-slide.is-entering .hero-copy {
        animation: hero-copy-in 0.8s ease both;
    }

    .hero-slide.is-leaving .hero-copy {
        animation: hero-copy-out 0.45s ease both;
    }

    .hero-copy > * {
        opacity: 0;
        transform: translateY(12px);
        animation: hero-copy-item-in 0.6s ease forwards;
    }

    .hero-copy > *:nth-child(1) { animation-delay: 0.12s; }
    .hero-copy > *:nth-child(2) { animation-delay: 0.2s; }
    .hero-copy > *:nth-child(3) { animation-delay: 0.28s; }
    .hero-copy > *:nth-child(4) { animation-delay: 0.36s; }

    [data-reveal] {
        opacity: 0;
        transform: translateY(24px) scale(0.99);
        transition: opacity 0.7s ease, transform 0.7s ease;
        transition-delay: var(--reveal-delay, 0s);
    }

    [data-reveal].revealed {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    .hero-dot {
        position: relative;
        overflow: hidden;
        transition: transform 0.25s ease, background 0.25s ease;
    }

    .hero-dot:hover {
        transform: translateY(-2px) scale(1.05);
    }

    .hero-dot::after {
        content: '';
        position: absolute;
        inset: 0;
        transform: scaleX(0);
        transform-origin: left;
        background: rgba(103, 232, 249, 0.45);
        transition: transform 0.35s ease;
    }

    .hero-dot.active::after {
        transform: scaleX(1);
    }

    .floating-card.is-floating {
        animation: float-card 5.2s ease-in-out infinite;
    }

    .about-visual {
        isolation: isolate;
    }

    .about-visual > img[data-about-image] {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0;
        transform: scale(1.05);
        transition: opacity 0.7s ease, transform 1.8s ease;
    }

    .about-visual > img[data-about-image].active {
        opacity: 1;
        transform: scale(1);
    }

    .about-visual-dots {
        position: absolute;
        left: 24px;
        bottom: 24px;
        z-index: 3;
        display: flex;
        gap: 10px;
    }

    .about-visual-dot {
        width: 12px;
        height: 12px;
        border: 0;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.44);
        box-shadow: 0 10px 24px rgba(8, 26, 51, 0.22);
        cursor: pointer;
        transition: transform 0.25s ease, background 0.25s ease, width 0.25s ease;
    }

    .about-visual-dot.active {
        width: 34px;
        background: linear-gradient(135deg, var(--orange), #fb923c);
    }

    .about-visual-dot:hover {
        transform: translateY(-2px);
    }

    [data-tilt-card] {
        --card-rotate-x: 0deg;
        --card-rotate-y: 0deg;
        --card-glow-x: 50%;
        --card-glow-y: 50%;
        transform: perspective(1200px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)) translateY(0);
        transform-style: preserve-3d;
        transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
        will-change: transform;
    }

    [data-tilt-card]::before {
        content: '';
        position: absolute;
        inset: 0;
        border-radius: inherit;
        background: radial-gradient(circle at var(--card-glow-x) var(--card-glow-y), rgba(255, 255, 255, 0.34), transparent 42%);
        opacity: 0;
        transition: opacity 0.25s ease;
        pointer-events: none;
    }

    [data-tilt-card]:hover::before {
        opacity: 1;
    }

    .service-card[data-tilt-card]:hover,
    .content-card[data-tilt-card]:hover {
        transform: perspective(1200px) rotateX(var(--card-rotate-x)) rotateY(var(--card-rotate-y)) translateY(-10px);
        box-shadow: 0 28px 70px rgba(8, 26, 51, 0.18);
    }

    [data-ambient-motion] {
        --ambient-shift-x: 0px;
        --ambient-shift-y: 0px;
        transition: transform 0.5s ease, box-shadow 0.5s ease;
    }

    .network-panel[data-ambient-motion] {
        transform: translate3d(calc(var(--ambient-shift-x) * 0.35), calc(var(--ambient-shift-y) * 0.35), 0);
    }

    .network-panel[data-ambient-motion] .network-lines {
        transform: translate3d(calc(var(--ambient-shift-x) * -0.45), calc(var(--ambient-shift-y) * -0.45), 0);
        transition: transform 0.45s ease;
    }

    .map-orbit {
        animation: orbit-breathe 7s ease-in-out infinite;
        transition: transform 0.45s ease;
    }

    .network-panel[data-ambient-motion]:hover .map-orbit {
        transform: translate3d(calc(var(--ambient-shift-x) * 0.28), calc(var(--ambient-shift-y) * 0.28), 0) scale(1.02);
    }

    .map-node {
        animation: node-pulse 3.4s ease-in-out infinite;
    }

    .map-node:nth-child(2) {
        animation-delay: 0.6s;
    }

    .map-node:nth-child(3) {
        animation-delay: 1.2s;
    }

    .cta[data-ambient-motion] {
        position: relative;
        overflow: hidden;
        transform: translate3d(calc(var(--ambient-shift-x) * 0.25), calc(var(--ambient-shift-y) * 0.25), 0);
    }

    .cta[data-ambient-motion]::before {
        content: '';
        position: absolute;
        inset: -30% auto auto -12%;
        width: 300px;
        height: 300px;
        border-radius: 50%;
        background: radial-gradient(circle, rgba(255, 255, 255, 0.28), transparent 68%);
        transform: translate3d(calc(var(--ambient-shift-x) * 0.45), calc(var(--ambient-shift-y) * 0.45), 0);
        transition: transform 0.4s ease, opacity 0.4s ease;
        opacity: 0.85;
        pointer-events: none;
    }

    .page-loaded .cta {
        animation: cta-in 0.9s ease both;
    }
}

@keyframes hero-copy-in {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes hero-copy-out {
    from { opacity: 1; transform: translateY(0); }
    to { opacity: 0; transform: translateY(-10px); }
}

@keyframes hero-copy-item-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes float-card {
    0% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0); }
}

@keyframes orbit-breathe {
    0% { transform: scale(1) rotate(0deg); }
    50% { transform: scale(1.02) rotate(1deg); }
    100% { transform: scale(1) rotate(0deg); }
}

@keyframes node-pulse {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.22); }
    50% { transform: scale(1.16); box-shadow: 0 0 0 14px rgba(249, 115, 22, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}

@keyframes cta-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}