body {
        box-sizing: border-box;
    }

    :root {
        --color-bg: #F8F6F3;
        --color-surface: #FFFFFF;
        --color-text: #1A1A1A;
        --color-primary: #2D4A3E;
        --color-accent: #C4A77D;
    }

    html {
        scroll-behavior: smooth;
    }

    .font-serif {
        font-family: 'Instrument Serif', serif;
    }

    .font-sans {
        font-family: 'Outfit', sans-serif;
    }

    .text-gradient {
        background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
    }

    .line-reveal {
        overflow: hidden;
    }

    .line-reveal span {
        display: inline-block;
        transform: translateY(100%);
    }

    .img-reveal {
        clip-path: inset(100% 0 0 0);
    }

    .card-hover {
        transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1), box-shadow 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .card-hover:hover {
        transform: translateY(-8px);
        box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.15);
    }

    .magnetic-btn {
        transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .nav-link {
        position: relative;
    }

    .nav-link::after {
        content: '';
        position: absolute;
        bottom: -2px;
        left: 0;
        width: 0;
        height: 1px;
        background: var(--color-primary);
        transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
    }

    .nav-link:hover::after {
        width: 100%;
    }

    .parallax-img {
        will-change: transform;
    }

    @keyframes float {

        0%,
        100% {
            transform: translateY(0) rotate(0deg);
        }

        50% {
            transform: translateY(-20px) rotate(3deg);
        }
    }

    @keyframes dash {
        to {
            stroke-dashoffset: 0;
        }
    }

    .logo-path {
        stroke-dasharray: 200;
        stroke-dashoffset: 200;
        animation: dash 2s ease forwards;
    }

    .floating {
        animation: float 6s ease-in-out infinite;
    }

    .cursor-dot {
        width: 8px;
        height: 8px;
        background: var(--color-primary);
        border-radius: 50%;
        position: fixed;
        pointer-events: none;
        z-index: 9999;
        mix-blend-mode: difference;
    }

    .cursor-outline {
        width: 40px;
        height: 40px;
        border: 1px solid var(--color-primary);
        border-radius: 50%;
        position: fixed;
        pointer-events: none;
        z-index: 9998;
        opacity: 0.5;
    }

    .section-number {
        font-size: 8rem;
        font-weight: 600;
        opacity: 0.03;
        position: absolute;
        top: -2rem;
        left: -1rem;
        font-family: 'Outfit', sans-serif;
    }

    .service-icon {
        transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
    }

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

    .marquee {
        display: flex;
        overflow: hidden;
        white-space: nowrap;
    }

    .marquee-content {
        display: flex;
        animation: marquee 30s linear infinite;
    }

    @keyframes marquee {
        0% {
            transform: translateX(0);
        }

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

    .form-input {
        background: transparent;
        border: none;
        border-bottom: 1px solid rgba(26, 26, 26, 0.2);
        padding: 1rem 0;
        width: 100%;
        font-family: 'Outfit', sans-serif;
        font-size: 1rem;
        transition: border-color 0.3s ease;
    }

    .form-input:focus {
        outline: none;
        border-color: var(--color-primary);
    }

    .form-input::placeholder {
        color: rgba(26, 26, 26, 0.4);
    }