.fa-icon {
    display: inline-block;
    line-height: 1;
}

.fa-icon.size-4 {
    font-size: 1rem;
}

.fa-icon.size-5 {
    font-size: 1.25rem;
}

.fa-icon.size-6 {
    font-size: 1.5rem;
}

header[data-header-page="contact"] a.bg-gradient-gold {
    display: none;
}

.home-scroll-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    width: fit-content;
    margin: clamp(1.5rem, 4vw, 2.5rem) auto 0;
    color: var(--muted-foreground);
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-decoration: none;
    text-transform: uppercase;
    transition: color 0.2s ease;
}

.home-scroll-indicator:hover,
.home-scroll-indicator:focus-visible {
    color: var(--primary);
}

.home-scroll-arrow {
    width: 0.8rem;
    height: 0.8rem;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    animation: home-scroll-bounce 1.4s ease-in-out infinite;
}

@keyframes home-scroll-bounce {
    0%,
    100% {
        transform: translateY(-3px) rotate(45deg);
    }

    50% {
        transform: translateY(4px) rotate(45deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-scroll-arrow,
    .home-portrait-card,
    .home-hero-cta::before {
        animation: none;
    }

    .home-portrait-card {
        transform: none;
        transition: none;
    }
}

.about-title-label {
    color: var(--muted-foreground);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.about-title-name {
    color: var(--primary);
    background: none;
    -webkit-text-fill-color: currentColor;
}

.home-portrait-card {
    transform: perspective(1100px) translateZ(0);
    transform-style: preserve-3d;
    transition: transform 450ms cubic-bezier(.2, .7, .2, 1), box-shadow 450ms ease;
}

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .home-portrait-card:hover {
        transform: perspective(1100px) rotateX(3deg) rotateY(-5deg) translateZ(14px);
        box-shadow: 0 24px 55px color-mix(in oklab, var(--primary) 22%, transparent);
    }

    [dir="rtl"] .home-portrait-card:hover {
        transform: perspective(1100px) rotateX(3deg) rotateY(5deg) translateZ(14px);
    }
}

@property --home-cta-angle {
    syntax: "<angle>";
    inherits: false;
    initial-value: 0deg;
}

.home-hero-cta[href$="/pricing"] {
    --home-cta-dark: color-mix(in oklab, var(--primary) 88%, black);
    --home-cta-light: color-mix(in oklab, var(--primary) 88%, white);
    position: relative;
    isolation: isolate;
}

.home-hero-cta[href$="/pricing"]::before,
.home-hero-cta[href$="/pricing"]::after {
    position: absolute;
    z-index: -1;
    inset: -1px;
    border: 1px solid transparent;
    border-radius: inherit;
    padding: 1px;
    content: "";
    pointer-events: none;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
}

.home-hero-cta[href$="/pricing"]::before {
    background: conic-gradient(
        from var(--home-cta-angle),
        var(--home-cta-dark) 0deg,
        var(--primary) 18deg,
        var(--home-cta-light) 36deg,
        var(--primary) 48deg,
        var(--home-cta-dark) 58deg,
        transparent 58deg,
        transparent 360deg
    );
    opacity: 0;
    filter:
        drop-shadow(0 0 5px color-mix(in oklab, var(--primary) 85%, transparent))
        drop-shadow(0 0 9px color-mix(in oklab, var(--primary) 65%, transparent))
        drop-shadow(0 0 14px color-mix(in oklab, var(--primary) 45%, transparent));
}

.home-hero-cta[href$="/pricing"]::after {
    background: conic-gradient(
        var(--home-cta-dark),
        var(--primary),
        var(--home-cta-light),
        var(--primary),
        var(--home-cta-dark)
    );
    opacity: 0;
    filter:
        drop-shadow(0 0 6px color-mix(in oklab, var(--primary) 85%, transparent))
        drop-shadow(0 0 12px color-mix(in oklab, var(--primary) 65%, transparent))
        drop-shadow(0 0 20px color-mix(in oklab, var(--primary) 45%, transparent));
}

.home-hero-cta[href$="/pricing"]:hover,
.home-hero-cta[href$="/pricing"]:focus-visible {
    border-color: transparent !important;
    background: transparent !important;
    color: var(--primary) !important;
    outline: none !important;
    box-shadow: none;
    animation: home-neon-button-glow 160ms ease-out 1.65s forwards;
}

.home-hero-cta[href$="/pricing"]:hover::before,
.home-hero-cta[href$="/pricing"]:focus-visible::before {
    opacity: 1;
    animation: home-neon-sweep 1.8s linear forwards;
}

.home-hero-cta[href$="/pricing"]:hover::after,
.home-hero-cta[href$="/pricing"]:focus-visible::after {
    animation: home-neon-complete 160ms linear 1.65s forwards;
}

@keyframes home-neon-sweep {
    to {
        --home-cta-angle: 1turn;
        opacity: 0;
    }
}

@keyframes home-neon-complete {
    to {
        opacity: 1;
    }
}

@keyframes home-neon-button-glow {
    to {
        box-shadow:
            0 0 6px color-mix(in oklab, var(--primary) 85%, transparent),
            0 0 14px color-mix(in oklab, var(--primary) 65%, transparent),
            0 0 24px color-mix(in oklab, var(--primary) 45%, transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .home-hero-cta[href$="/pricing"]:hover::before,
    .home-hero-cta[href$="/pricing"]:focus-visible::before {
        display: none;
    }

    .home-hero-cta[href$="/pricing"]:hover::after,
    .home-hero-cta[href$="/pricing"]:focus-visible::after {
        opacity: 1;
        animation: none;
    }

    .home-hero-cta[href$="/pricing"]:hover,
    .home-hero-cta[href$="/pricing"]:focus-visible {
        box-shadow:
            0 0 6px color-mix(in oklab, var(--primary) 85%, transparent),
            0 0 14px color-mix(in oklab, var(--primary) 65%, transparent),
            0 0 24px color-mix(in oklab, var(--primary) 45%, transparent);
        animation: none;
    }
}