/* Base Settings */
body {
    font-family: 'Inter', sans-serif;
    background-color: #ffffff;
    color: #09090b;
}

/* Text Flip Animation for CTA Button */
.text-flip-container {
    display: inline-block;
    height: 1.2em;
    overflow: hidden;
    vertical-align: middle;
}

.text-flip {
    display: flex;
    flex-direction: column;
    animation: textFlip 6s ease-in-out infinite;
}

.text-flip-item {
    height: 1.2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

@keyframes textFlip {
    0%, 20% {
        transform: translateY(0);
    }
    25%, 45% {
        transform: translateY(-1.2em);
    }
    50%, 70% {
        transform: translateY(-2.4em);
    }
    75%, 95% {
        transform: translateY(-1.2em);
    }
    100% {
        transform: translateY(0);
    }
}

/* CTA Word Rotator Animation */
.cta-word-rotator {
    display: inline-block;
    height: 1.15em;
    overflow: hidden;
    vertical-align: bottom;
    position: relative;
}

.cta-word-container {
    display: flex;
    flex-direction: column;
    animation: ctaWordRotate 6s ease-in-out infinite;
}

.cta-word {
    height: 1.15em;
    display: flex;
    align-items: center;
}

@keyframes ctaWordRotate {
    0%, 25% {
        transform: translateY(0);
    }
    30%, 55% {
        transform: translateY(-1.15em);
    }
    60%, 85% {
        transform: translateY(-2.3em);
    }
    90%, 100% {
        transform: translateY(0);
    }
}

:root {
    --accent: #7c3aed;
}

.text-accent {
    color: var(--accent);
}

.bg-accent {
    background-color: var(--accent);
}

.border-accent {
    border-color: var(--accent);
}

.card-hover {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.card-hover:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(9, 9, 11, 0.08);
    border-color: #a1a1aa;
}

/* Button micro-interactions */
button, a.btn, [role="button"] {
    transition: all 0.15s ease;
}

button:active:not(:disabled), a.btn:active, [role="button"]:active {
    transform: scale(0.98);
}

/* Input focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--accent) !important;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1);
}

/* Radio/checkbox custom styling */
input[type="radio"], input[type="checkbox"] {
    accent-color: var(--accent);
}

/* FAQ details animation */
details summary {
    transition: color 0.15s ease;
}

details[open] summary {
    color: var(--accent);
}

/* FAQ Plus/X Icon */
.faq-icon {
    position: relative;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.faq-icon::before,
.faq-icon::after {
    content: '';
    position: absolute;
    background-color: #a1a1aa;
    transition: transform 0.3s ease, background-color 0.3s ease;
}

/* Horizontal bar */
.faq-icon::before {
    width: 14px;
    height: 2px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* Vertical bar */
.faq-icon::after {
    width: 2px;
    height: 14px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

/* When open, rotate to X */
details[open] .faq-icon::before {
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: var(--accent);
}

details[open] .faq-icon::after {
    transform: translate(-50%, -50%) rotate(45deg);
    background-color: var(--accent);
}

/* Price display transitions */
.price-primary {
    transition: opacity 0.2s ease;
}

/* Currency toggle buttons */
#currency-usd, #currency-ngn {
    color: #71717a;
}

#currency-usd.active, #currency-ngn.active {
    background-color: #18181b;
    color: #ffffff;
}

/* Link hover effects */
a:not([class]) {
    transition: color 0.15s ease;
}

/* Modal backdrop animation */
#contact-modal, #selection-modal {
    transition: opacity 0.3s ease;
}

#contact-modal > div, #selection-modal > div {
    transition: transform 0.3s ease;
}

/* Nav link underline effect */
nav a {
    position: relative;
}

nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--accent);
    transition: width 0.2s ease;
}

nav a:hover::after {
    width: 100%;
}

iconify-icon {
    display: inline-flex;
    vertical-align: middle;
    width: 1em;
    height: 1em;
}

iconify-icon.w-3 { width: 0.75rem; height: 0.75rem; }
iconify-icon.w-4 { width: 1rem; height: 1rem; }
iconify-icon.w-5 { width: 1.25rem; height: 1.25rem; }
iconify-icon.w-6 { width: 1.5rem; height: 1.5rem; }
iconify-icon.w-7 { width: 1.75rem; height: 1.75rem; }
iconify-icon.w-8 { width: 2rem; height: 2rem; }

/* Utility for the grid background lines */
.bg-grid-slate-100 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(241 245 249 / 0.8)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}

.bg-grid-slate-900 {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32' width='32' height='32' fill='none' stroke='rgb(15 23 42 / 0.1)'%3e%3cpath d='M0 .5H31.5V32'/%3e%3c/svg%3e");
}

/* Confetti feedback */
.confetti-container {
    position: fixed;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 70;
}

.confetti-piece {
    position: absolute;
    top: -12px;
    width: 6px;
    height: 10px;
    background: #111111;
    animation: confetti-fall 1.4s ease-in forwards;
}

@keyframes confetti-fall {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #d4d4d8;
    border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a1a1aa;
}

/* Logo Font Class */
.font-serif-logo {
    font-family: 'Playfair Display', serif;
}

/* Font Overrides from HTML */
.font-geist {
    font-family: 'Geist', sans-serif !important;
}

.font-roboto {
    font-family: 'Roboto', sans-serif !important;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif !important;
}

.font-poppins {
    font-family: 'Poppins', sans-serif !important;
}

.font-playfair {
    font-family: 'Playfair Display', serif !important;
}

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

.font-merriweather {
    font-family: 'Merriweather', serif !important;
}

.font-bricolage {
    font-family: 'Bricolage Grotesque', sans-serif !important;
}

.font-jakarta {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.font-manrope {
    font-family: 'Manrope', sans-serif !important;
}

.font-space-grotesk {
    font-family: 'Space Grotesk', sans-serif !important;
}

.font-work-sans {
    font-family: 'Work Sans', sans-serif !important;
}

.font-pt-serif {
    font-family: 'PT Serif', serif !important;
}

.font-geist-mono {
    font-family: 'Geist Mono', monospace !important;
}

.font-space-mono {
    font-family: 'Space Mono', monospace !important;
}

.font-quicksand {
    font-family: 'Quicksand', sans-serif !important;
}

.font-nunito {
    font-family: 'Nunito', sans-serif !important;
}

/* ======================================================
   MICRO-ANIMATIONS: Feature Cards & How It Works Section
   ====================================================== */

/* ----- SCROLL REVEAL SYSTEM ----- */

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
    will-change: transform, opacity;
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}

.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ----- FEATURE CARDS (FAST & AFFORDABLE SECTION) ----- */

.feature-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.feature-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(9, 9, 11, 0.08);
    border-color: #a1a1aa;
}

.feature-icon {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.feature-card:hover .feature-icon {
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.feature-icon i,
.feature-icon svg {
    transition: transform 0.2s ease;
}

.feature-card:hover .feature-icon i,
.feature-card:hover .feature-icon svg {
    animation: iconBounce 0.4s ease;
}

@keyframes iconBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-3px); }
}

/* List item staggered reveal */
.feature-card.reveal ul li {
    opacity: 0;
    transform: translateX(-10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.feature-card.reveal.revealed ul li {
    opacity: 1;
    transform: translateX(0);
}

.feature-card.reveal.revealed ul li:nth-child(1) { transition-delay: 0.3s; }
.feature-card.reveal.revealed ul li:nth-child(2) { transition-delay: 0.4s; }
.feature-card.reveal.revealed ul li:nth-child(3) { transition-delay: 0.5s; }

/* Check icon hover */
.feature-card ul li i,
.feature-card ul li svg {
    transition: transform 0.15s ease;
}

.feature-card:hover ul li i,
.feature-card:hover ul li svg {
    transform: scale(1.1);
}

/* ----- STEP CARDS (HOW IT WORKS SECTION) ----- */

/* Step wrapper for staggered animations */
.step-wrapper {
    --step-index: 0;
}

/* Main card styling with enhanced transitions */
.step-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Subtle gradient overlay on hover */
.step-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(124, 58, 237, 0.03) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    border-radius: inherit;
}

.step-card:hover::before {
    opacity: 1;
}

.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(9, 9, 11, 0.12), 0 8px 16px rgba(124, 58, 237, 0.08);
    border-color: #a1a1aa;
}

/* Step number badge */
.step-number {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                background-color 0.3s ease,
                box-shadow 0.3s ease;
    position: relative;
}

.step-card:hover .step-number {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
    background-color: var(--accent, #7c3aed);
}

/* Green checkmark for final step */
.step-number-complete {
    animation: completePulse 2s ease-in-out infinite;
}

@keyframes completePulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(22, 163, 74, 0.4); }
    50% { box-shadow: 0 0 0 8px rgba(22, 163, 74, 0); }
}

.step-card:hover .step-number-complete {
    background-color: #15803d;
    animation: none;
}

/* Step detail box */
.step-detail {
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.step-card:hover .step-detail {
    background-color: #e4e4e7;
    transform: translateX(4px);
}

/* ----- CONNECTING LINES ----- */

.step-connector {
    transform: translateY(-50%);
    z-index: 10;
}

.connector-line {
    width: 20px;
    height: 2px;
    background: linear-gradient(90deg, #a1a1aa 0%, #d4d4d8 50%, #a1a1aa 100%);
    position: relative;
    overflow: hidden;
}

/* Animated shine effect on connector */
.connector-line::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(124, 58, 237, 0.6), transparent);
    animation: connectorShine 3s ease-in-out infinite;
    animation-delay: calc(var(--step-index) * 0.5s);
}

@keyframes connectorShine {
    0%, 100% { left: -100%; }
    50% { left: 100%; }
}

/* Animated dot at the end of connector */
.connector-dot {
    width: 6px;
    height: 6px;
    background-color: #a1a1aa;
    border-radius: 50%;
    margin-left: 2px;
    transition: transform 0.3s ease, background-color 0.3s ease;
    animation: dotPulse 2s ease-in-out infinite;
    animation-delay: calc(var(--step-index) * 0.3s);
}

@keyframes dotPulse {
    0%, 100% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.3); opacity: 1; }
}

/* Hover effect on connector when hovering adjacent card */
.step-wrapper:hover .connector-dot {
    background-color: var(--accent, #7c3aed);
    transform: scale(1.5);
    animation: none;
}

.step-wrapper:hover .connector-line {
    background: linear-gradient(90deg, var(--accent, #7c3aed), #d4d4d8);
}

/* ----- SCROLL REVEAL ANIMATIONS ----- */

.step-card.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: calc(var(--step-index) * 0.15s);
}

.step-card.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Connector reveal animation */
.step-connector {
    opacity: 0;
    transform: translateY(-50%) scaleX(0);
    transform-origin: left center;
    transition: opacity 0.4s ease, transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: calc(var(--step-index) * 0.15s + 0.3s);
}

.step-card.revealed ~ .step-connector {
    opacity: 1;
    transform: translateY(-50%) scaleX(1);
}

/* Final card special entrance */
.step-card-final.revealed .step-number-complete {
    animation: finalBounce 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards,
               completePulse 2s ease-in-out 0.6s infinite;
}

@keyframes finalBounce {
    0% { transform: scale(0); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* ----- MOBILE OPTIMIZATIONS ----- */

@media (hover: none) {
    .feature-card:hover,
    .step-card:hover {
        transform: none;
        box-shadow: none;
    }

    .feature-card:hover .feature-icon,
    .step-card:hover .step-number {
        transform: none;
    }

    .step-card:hover .step-number {
        background-color: #000;
    }

    .step-card:hover .step-detail {
        transform: none;
        background-color: inherit;
    }

    .feature-card:active,
    .step-card:active {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }

    /* Keep pulse animations on mobile */
    .step-number-complete {
        animation: completePulse 2s ease-in-out infinite;
    }

    .connector-dot {
        animation: dotPulse 2s ease-in-out infinite;
    }
}

@media (max-width: 767px) {
    .reveal {
        transform: translateY(15px);
    }

    .step-card.reveal {
        transform: translateY(20px);
        transition-delay: calc(var(--step-index) * 0.1s);
    }

    .step-connector {
        display: none !important;
    }

    .reveal-delay-1 { transition-delay: 0.05s; }
    .reveal-delay-2 { transition-delay: 0.1s; }
    .reveal-delay-3 { transition-delay: 0.15s; }
}

/* ----- ACCESSIBILITY: Reduced Motion ----- */

@media (prefers-reduced-motion: reduce) {
    .reveal,
    .feature-card,
    .step-card,
    .feature-icon,
    .step-number,
    .step-detail,
    .step-connector,
    .connector-line,
    .connector-dot,
    .step-number-complete {
        transition: none;
        animation: none;
    }

    .step-card::before {
        display: none;
    }

    .connector-line::after {
        animation: none;
    }

    .reveal,
    .feature-card,
    .step-card,
    .feature-icon,
    .step-icon,
    .step-badge {
        transition: none;
        animation: none;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .feature-card.reveal ul li {
        opacity: 1;
        transform: none;
    }
}

/* ======================================================
   MICRO-ANIMATIONS: What's Included & Projects Sections
   ====================================================== */

/* ----- WHAT'S INCLUDED CARDS ----- */

.included-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.included-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(9, 9, 11, 0.08);
}

/* Border color variants matching icon colors */
.included-card[data-accent="green"]:hover {
    border-color: #22c55e;
}

.included-card[data-accent="purple"]:hover {
    border-color: #a855f7;
}

.included-card[data-accent="zinc"]:hover {
    border-color: #71717a;
}

/* Checklist item animations */
.included-card .checklist-item {
    transition: background-color 0.15s ease, padding-left 0.15s ease;
    border-radius: 4px;
    margin-left: -4px;
    padding-left: 4px;
}

.included-card:hover .checklist-item:hover {
    background-color: rgba(9, 9, 11, 0.03);
    padding-left: 8px;
}

/* Check icon scale on card hover */
.included-card .checklist-item i,
.included-card .checklist-item svg {
    transition: transform 0.15s ease;
}

.included-card:hover .checklist-item i,
.included-card:hover .checklist-item svg {
    transform: scale(1.15);
}

/* Staggered reveal for checklist items on scroll */
.included-card.reveal .checklist-item {
    opacity: 0;
    transform: translateX(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, background-color 0.15s ease, padding-left 0.15s ease;
}

.included-card.reveal.revealed .checklist-item {
    opacity: 1;
    transform: translateX(0);
}

.included-card.reveal.revealed .checklist-item:nth-child(1) { transition-delay: 0.15s; }
.included-card.reveal.revealed .checklist-item:nth-child(2) { transition-delay: 0.22s; }
.included-card.reveal.revealed .checklist-item:nth-child(3) { transition-delay: 0.29s; }
.included-card.reveal.revealed .checklist-item:nth-child(4) { transition-delay: 0.36s; }
.included-card.reveal.revealed .checklist-item:nth-child(5) { transition-delay: 0.43s; }
.included-card.reveal.revealed .checklist-item:nth-child(6) { transition-delay: 0.50s; }

/* ----- PROJECTS & PROOF SECTION ----- */

.project-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.project-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(9, 9, 11, 0.1);
    border-color: #a1a1aa;
}

/* Project card icon container */
.project-icon {
    transition: transform 0.3s ease, box-shadow 0.2s ease;
}

.project-card:hover .project-icon {
    transform: scale(1.08);
    box-shadow: 0 4px 12px rgba(124, 58, 237, 0.15);
}

.project-icon i,
.project-icon svg {
    transition: transform 0.2s ease;
}

.project-card:hover .project-icon i,
.project-card:hover .project-icon svg {
    animation: iconBounce 0.4s ease;
}

/* Status badge pulse animation */
@keyframes badgePulse {
    0%, 100% {
        opacity: 1;
        box-shadow: 0 0 0 0 rgba(234, 179, 8, 0.4);
    }
    50% {
        opacity: 0.9;
        box-shadow: 0 0 0 6px rgba(234, 179, 8, 0);
    }
}

.status-badge {
    animation: badgePulse 2.5s ease-in-out infinite;
}

/* Status badge shimmer effect */
@keyframes badgeShimmer {
    0% {
        background-position: -100% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

.status-badge::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.4) 50%,
        transparent 100%
    );
    background-size: 200% 100%;
    animation: badgeShimmer 3s ease-in-out infinite;
    pointer-events: none;
}

/* Tech stack list staggered animation */
.project-card .tech-item {
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.project-card.reveal.revealed .tech-item {
    opacity: 1;
    transform: translateX(0);
}

.project-card.reveal.revealed .tech-item:nth-child(1) { transition-delay: 0.2s; }
.project-card.reveal.revealed .tech-item:nth-child(2) { transition-delay: 0.3s; }
.project-card.reveal.revealed .tech-item:nth-child(3) { transition-delay: 0.4s; }

/* Tech item hover highlight */
.tech-item {
    transition: color 0.15s ease;
    border-radius: 4px;
    padding: 2px 0;
}

.project-card:hover .tech-item:hover {
    color: #3f3f46;
}

.project-card:hover .tech-item:hover i,
.project-card:hover .tech-item:hover svg {
    color: #22c55e;
}

/* CTA button micro-interactions */
.project-cta {
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.project-cta:not(:disabled):hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.project-cta:not(:disabled):active {
    transform: translateY(0) scale(0.98);
}

/* Placeholder card subtle animation */
@keyframes placeholderFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-4px);
    }
}

.placeholder-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.placeholder-card:hover {
    border-color: #d4d4d8;
    box-shadow: 0 8px 20px rgba(9, 9, 11, 0.06);
}

.placeholder-icon {
    animation: placeholderFloat 4s ease-in-out infinite;
}

/* ----- FAB BUTTON MICRO-ANIMATIONS ----- */

.fab-button {
    position: relative;
}

/* Pulse ring animation */
.fab-button::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.15);
    animation: fabPulse 2s ease-in-out infinite;
    z-index: -1;
}

@keyframes fabPulse {
    0%, 100% {
        transform: scale(1);
        opacity: 0.6;
    }
    50% {
        transform: scale(1.15);
        opacity: 0;
    }
}

/* Icon animation */
.fab-icon {
    transition: transform 0.3s ease;
}

.fab-button:hover .fab-icon {
    animation: fabIconBounce 0.5s ease;
}

@keyframes fabIconBounce {
    0%, 100% { transform: scale(1) rotate(0deg); }
    25% { transform: scale(1.1) rotate(-5deg); }
    50% { transform: scale(1.15) rotate(5deg); }
    75% { transform: scale(1.1) rotate(-3deg); }
}

/* Subtle idle animation for the icon */
.fab-icon {
    animation: fabIconIdle 3s ease-in-out infinite;
}

@keyframes fabIconIdle {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

.fab-button:hover .fab-icon {
    animation: fabIconBounce 0.5s ease;
}

/* ----- PROBLEM SECTION ICONS ----- */

.problem-card {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.problem-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(9, 9, 11, 0.08);
    border-color: #fecaca;
}

.problem-icon {
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.problem-card:hover .problem-icon {
    background-color: #fee2e2;
    transform: scale(1.05);
}

/* Subtle shake animation for problem icons */
@keyframes iconShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-2px) rotate(-2deg); }
    40% { transform: translateX(2px) rotate(2deg); }
    60% { transform: translateX(-1px) rotate(-1deg); }
    80% { transform: translateX(1px) rotate(1deg); }
}

.problem-card:hover .problem-icon i,
.problem-card:hover .problem-icon svg {
    animation: iconShake 0.4s ease;
}

/* ----- HANDSHAKE ANIMATION ----- */

@keyframes handshakeShake {
    0%, 100% { transform: rotate(0deg); }
    10% { transform: rotate(8deg); }
    20% { transform: rotate(-6deg); }
    30% { transform: rotate(5deg); }
    40% { transform: rotate(-4deg); }
    50% { transform: rotate(3deg); }
    60% { transform: rotate(-2deg); }
    70% { transform: rotate(1deg); }
    80% { transform: rotate(0deg); }
}

.handshake-icon svg,
.handshake-icon i {
    animation: handshakeShake 1.5s ease-in-out infinite;
    animation-delay: 0.5s;
    transform-origin: center center;
}

/* ----- WHY CHOOSE SECTION ----- */

.why-card {
    transition: transform 0.2s ease;
}

.why-card:hover {
    transform: translateY(-4px);
}

/* Why card icon container */
.why-icon {
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.why-card:hover .why-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Icon colors on hover - match each icon's color */
.why-card[data-accent="blue"]:hover .why-icon {
    border-color: #3b82f6;
}

.why-card[data-accent="green"]:hover .why-icon {
    border-color: #22c55e;
}

.why-card[data-accent="purple"]:hover .why-icon {
    border-color: #a855f7;
}

.why-card[data-accent="orange"]:hover .why-icon {
    border-color: #f97316;
}

.why-card[data-accent="teal"]:hover .why-icon {
    border-color: #14b8a6;
}

/* Icon bounce animation */
.why-icon i,
.why-icon svg {
    transition: transform 0.2s ease;
}

.why-card:hover .why-icon i,
.why-card:hover .why-icon svg {
    animation: iconBounce 0.4s ease;
}

/* Staggered reveal for why cards */
.why-card.reveal {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 0.4s ease, transform 0.4s ease;
}

.why-card.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.why-card.reveal.revealed:nth-child(1) { transition-delay: 0s; }
.why-card.reveal.revealed:nth-child(2) { transition-delay: 0.08s; }
.why-card.reveal.revealed:nth-child(3) { transition-delay: 0.16s; }
.why-card.reveal.revealed:nth-child(4) { transition-delay: 0.24s; }
.why-card.reveal.revealed:nth-child(5) { transition-delay: 0.32s; }

/* Title subtle emphasis on hover */
.why-card h3 {
    transition: color 0.15s ease;
}

.why-card:hover h3 {
    color: #18181b;
}

/* ----- MOBILE OPTIMIZATIONS FOR NEW ANIMATIONS ----- */

@media (hover: none) {
    .included-card:hover,
    .project-card:hover,
    .placeholder-card:hover,
    .why-card:hover,
    .problem-card:hover {
        transform: none;
        box-shadow: none;
    }

    .included-card:hover .checklist-item i,
    .included-card:hover .checklist-item svg,
    .project-card:hover .project-icon,
    .why-card:hover .why-icon,
    .problem-card:hover .problem-icon {
        transform: none;
    }

    .included-card:active,
    .project-card:active,
    .placeholder-card:active,
    .why-card:active,
    .problem-card:active {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }

    /* Keep status badge animation on mobile */
    .status-badge {
        animation: badgePulse 2.5s ease-in-out infinite;
    }

    /* Keep placeholder float on mobile as it's attention-drawing */
    .placeholder-icon {
        animation: placeholderFloat 4s ease-in-out infinite;
    }
}

@media (max-width: 767px) {
    .included-card.reveal.revealed .checklist-item:nth-child(1) { transition-delay: 0.08s; }
    .included-card.reveal.revealed .checklist-item:nth-child(2) { transition-delay: 0.12s; }
    .included-card.reveal.revealed .checklist-item:nth-child(3) { transition-delay: 0.16s; }
    .included-card.reveal.revealed .checklist-item:nth-child(4) { transition-delay: 0.20s; }
    .included-card.reveal.revealed .checklist-item:nth-child(5) { transition-delay: 0.24s; }
    .included-card.reveal.revealed .checklist-item:nth-child(6) { transition-delay: 0.28s; }

    .project-card.reveal.revealed .tech-item:nth-child(1) { transition-delay: 0.1s; }
    .project-card.reveal.revealed .tech-item:nth-child(2) { transition-delay: 0.15s; }
    .project-card.reveal.revealed .tech-item:nth-child(3) { transition-delay: 0.2s; }
}

/* ----- AVAILABILITY DOT PULSE ANIMATION ----- */

.availability-dot {
    position: relative;
}

.availability-dot::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: #22c55e;
    animation: availabilityPulse 2s ease-out infinite;
}

@keyframes availabilityPulse {
    0% {
        transform: scale(1);
        opacity: 0.8;
    }
    70% {
        transform: scale(2.5);
        opacity: 0;
    }
    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}

/* ----- ACCESSIBILITY: Reduced Motion for New Animations ----- */

@media (prefers-reduced-motion: reduce) {
    .included-card,
    .project-card,
    .placeholder-card,
    .project-icon,
    .status-badge,
    .placeholder-icon,
    .why-card,
    .why-icon,
    .problem-card,
    .problem-icon,
    .fab-button,
    .fab-icon,
    .cta-word-container,
    .availability-dot::before,
    .handshake-icon svg,
    .handshake-icon i {
        transition: none;
        animation: none;
    }

    .fab-button::before {
        display: none;
    }

    .included-card.reveal .checklist-item,
    .project-card .tech-item,
    .why-card.reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .status-badge::after {
        animation: none;
    }

    /* Show only first word for reduced motion */
    .cta-word-rotator .cta-word:not(:first-child) {
        display: none;
    }

    /* FAQ icon - no transition for reduced motion */
    .faq-icon::before,
    .faq-icon::after {
        transition: none;
    }
}

/* ======================================================
   MICRO-ANIMATIONS: Old Way vs New Way Comparison Section
   ====================================================== */

/* ----- COMPARISON CARDS ----- */

.comparison-card {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Old Way card hover */
.comparison-card-old:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(239, 68, 68, 0.1), 0 8px 16px rgba(9, 9, 11, 0.08);
    border-color: #fecaca;
}

/* New Way card hover - with glow effect */
.comparison-card-new {
    position: relative;
}

.comparison-card-new::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.1) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.comparison-card-new:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 32px rgba(34, 197, 94, 0.15), 0 8px 16px rgba(0, 0, 0, 0.2);
}

.comparison-card-new:hover::before {
    opacity: 1;
}

/* ----- COMPARISON HEADER ICONS ----- */

.comparison-header-icon {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.3s ease;
}

.comparison-card-old:hover .comparison-header-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.comparison-card-new:hover .comparison-header-icon {
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3);
}

/* Header icon inner icon animation */
.comparison-header-icon i,
.comparison-header-icon svg {
    transition: transform 0.2s ease;
}

.comparison-card-old:hover .comparison-header-icon i,
.comparison-card-old:hover .comparison-header-icon svg {
    animation: iconShake 0.4s ease;
}

.comparison-card-new:hover .comparison-header-icon i,
.comparison-card-new:hover .comparison-header-icon svg {
    animation: iconBounce 0.4s ease;
}

/* ----- COMPARISON LIST ITEMS ----- */

.comparison-list-item {
    transition: transform 0.2s ease, padding-left 0.2s ease;
    border-radius: 6px;
    margin-left: -8px;
    padding-left: 8px;
}

.comparison-card:hover .comparison-list-item:hover {
    transform: translateX(4px);
}

.comparison-card-old:hover .comparison-list-item:hover {
    background-color: rgba(239, 68, 68, 0.05);
}

.comparison-card-new:hover .comparison-list-item:hover {
    background-color: rgba(34, 197, 94, 0.1);
}

/* List item icons */
.comparison-list-item i,
.comparison-list-item svg {
    transition: transform 0.2s ease;
}

.comparison-card-old:hover .comparison-list-item:hover i,
.comparison-card-old:hover .comparison-list-item:hover svg {
    animation: iconShake 0.3s ease;
}

.comparison-card-new:hover .comparison-list-item:hover i,
.comparison-card-new:hover .comparison-list-item:hover svg {
    transform: scale(1.2);
}

/* Staggered reveal for list items on scroll */
.comparison-card.reveal .comparison-list-item {
    opacity: 0;
    transform: translateX(-12px);
    transition: opacity 0.4s ease, transform 0.4s ease, padding-left 0.2s ease;
}

.comparison-card.reveal.revealed .comparison-list-item {
    opacity: 1;
    transform: translateX(0);
}

.comparison-card.reveal.revealed .comparison-list-item:nth-child(1) { transition-delay: 0.15s; }
.comparison-card.reveal.revealed .comparison-list-item:nth-child(2) { transition-delay: 0.25s; }
.comparison-card.reveal.revealed .comparison-list-item:nth-child(3) { transition-delay: 0.35s; }
.comparison-card.reveal.revealed .comparison-list-item:nth-child(4) { transition-delay: 0.45s; }
.comparison-card.reveal.revealed .comparison-list-item:nth-child(5) { transition-delay: 0.55s; }
.comparison-card.reveal.revealed .comparison-list-item:nth-child(6) { transition-delay: 0.65s; }

/* Scroll reveal for cards themselves */
.comparison-card.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.comparison-card.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered card reveal */
.comparison-card-old.reveal { transition-delay: 0s; }
.comparison-card-new.reveal { transition-delay: 0.15s; }

/* ----- COMPARISON SECTION HEADER ----- */

.comparison-header.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.comparison-header.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

/* ----- MOBILE OPTIMIZATIONS ----- */

@media (hover: none) {
    .comparison-card-old:hover,
    .comparison-card-new:hover {
        transform: none;
        box-shadow: none;
    }

    .comparison-card-old:hover .comparison-header-icon,
    .comparison-card-new:hover .comparison-header-icon {
        transform: none;
        box-shadow: none;
    }

    .comparison-card:hover .comparison-list-item:hover {
        transform: none;
        background-color: transparent;
    }

    .comparison-card-old:active,
    .comparison-card-new:active {
        transform: scale(0.98);
        transition-duration: 0.1s;
    }
}

@media (max-width: 767px) {
    .comparison-card.reveal.revealed .comparison-list-item:nth-child(1) { transition-delay: 0.1s; }
    .comparison-card.reveal.revealed .comparison-list-item:nth-child(2) { transition-delay: 0.15s; }
    .comparison-card.reveal.revealed .comparison-list-item:nth-child(3) { transition-delay: 0.2s; }
    .comparison-card.reveal.revealed .comparison-list-item:nth-child(4) { transition-delay: 0.25s; }
    .comparison-card.reveal.revealed .comparison-list-item:nth-child(5) { transition-delay: 0.3s; }
    .comparison-card.reveal.revealed .comparison-list-item:nth-child(6) { transition-delay: 0.35s; }

    .comparison-card.reveal {
        transform: translateY(20px);
    }

    .comparison-card-old.reveal,
    .comparison-card-new.reveal {
        transition-delay: 0s;
    }
}

/* ----- ACCESSIBILITY: Reduced Motion ----- */

@media (prefers-reduced-motion: reduce) {
    .comparison-card,
    .comparison-header-icon,
    .comparison-list-item,
    .comparison-header {
        transition: none;
        animation: none;
    }

    .comparison-card-new::before {
        display: none;
    }

    .comparison-card.reveal,
    .comparison-header.reveal {
        opacity: 1;
        transform: none;
    }

    .comparison-card.reveal .comparison-list-item {
        opacity: 1;
        transform: none;
    }
}

/* ----- ABOUT TEAM STACK CARD ----- */

.stack-card {
    background: #09090b;
    border: 1px solid #27272a;
    border-radius: 1.25rem;
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.stack-card:hover {
    border-color: #4c1d95;
    box-shadow: 0 0 30px rgba(124, 58, 237, 0.12), 0 0 60px rgba(99, 102, 241, 0.06);
}

.stack-card .headshot-placeholder {
    aspect-ratio: 1 / 1;
    border-radius: 1rem;
    background: linear-gradient(135deg, #18181b 0%, #27272a 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.stack-card .trust-badge {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: #18181b;
    border: 1px solid #27272a;
    border-radius: 0.75rem;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.stack-card .trust-badge:hover {
    border-color: #3f3f46;
    background: #1c1c1f;
}

/* Stack card scroll reveal */
.stack-card.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.stack-card.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .stack-card.reveal {
        transform: translateY(20px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .stack-card.reveal {
        opacity: 1;
        transform: none;
    }
}