:root {
    --motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --page-bg: #f8fafc;
    --surface-bg: #ffffff;
    --surface-alt: #f1f5f9;
    --surface-border: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #334155;
    --text-muted: #64748b;
    --text-soft: #94a3b8;
}

body[data-page] {
    background-color: var(--page-bg) !important;
    color: var(--text-secondary) !important;
}

.bg-brand-navy {
    background-color: var(--page-bg) !important;
}

.bg-brand-navylight {
    background-color: var(--surface-bg) !important;
}

.border-brand-navyborder {
    border-color: var(--surface-border) !important;
}

.bg-brand-navyborder {
    background-color: var(--surface-alt) !important;
}

.bg-brand-navy\/90 {
    background-color: rgba(248, 250, 252, 0.9) !important;
}

.hover\:bg-brand-navylight:hover {
    background-color: var(--surface-alt) !important;
}

.hover\:bg-brand-navy:hover {
    background-color: #e2e8f0 !important;
}

.hover\:bg-brand-navyborder:hover {
    background-color: var(--surface-alt) !important;
}

.from-brand-navylight {
    --tw-gradient-from: #ffffff var(--tw-gradient-from-position) !important;
    --tw-gradient-to: rgb(255 255 255 / 0) var(--tw-gradient-to-position) !important;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
}

.to-brand-navy {
    --tw-gradient-to: #f1f5f9 var(--tw-gradient-to-position) !important;
}

.text-slate-900,
.hover\:text-slate-900:hover {
    color: var(--text-primary) !important;
}

.text-slate-800 {
    color: var(--text-primary) !important;
}

.text-slate-700,
.hover\:text-slate-700:hover {
    color: var(--text-secondary) !important;
}

.text-slate-200 {
    color: var(--text-secondary) !important;
}

.text-slate-600,
.hover\:text-slate-600:hover {
    color: var(--text-muted) !important;
}

.text-slate-500,
.hover\:text-slate-500:hover {
    color: var(--text-soft) !important;
}

/* ===== General surface cards (white on white across all pages) ===== */
.bg-brand-navylight.border-brand-navyborder:not(.pricing-card):not(.pricing-card-featured) {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s var(--motion-ease);
}
.bg-brand-navylight.border-brand-navyborder:not(.pricing-card):not(.pricing-card-featured):hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.09);
}

/* ===== Pricing cards ===== */
.pricing-card {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s var(--motion-ease);
}
.pricing-card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}
.pricing-card-featured {
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.pricing-card-featured:hover {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
}

/* ===== Scroll Progress Bar ===== */
#scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, #FF6B6B, #FB923C);
    z-index: 9999;
    width: 0%;
    will-change: width;
}

/* ===== Navbar entrance ===== */
@keyframes nav-slide-down {
    from { transform: translateY(-100%); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
}
#navbar {
    animation: nav-slide-down 0.55s var(--motion-ease) both;
}

/* ===== Animated gradient text ===== */
.gradient-animated {
    background: linear-gradient(90deg, #FF6B6B 0%, #FB923C 50%, #FF6B6B 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: gradient-sweep 3.5s linear infinite;
}
@keyframes gradient-sweep {
    to { background-position: 200% center; }
}

/* ===== Hero direct entrance (CSS, no observer needed above fold) ===== */
.hero-enter {
    opacity: 0;
    transform: translateY(28px);
    animation: hero-fade-up 0.9s var(--motion-ease) forwards;
    animation-delay: var(--hero-delay, 0ms);
}
@keyframes hero-fade-up {
    to { opacity: 1; transform: translateY(0); }
}

/* ===== Standard scroll reveal ===== */
.motion-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition:
        opacity 0.7s var(--motion-ease),
        transform 0.7s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}
.motion-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* Scale-up reveal variant */
.motion-reveal-scale {
    opacity: 0;
    transform: scale3d(0.97, 0.97, 1) translate3d(0, 10px, 0);
    transition:
        opacity 0.8s var(--motion-ease),
        transform 0.8s var(--motion-ease);
    transition-delay: var(--motion-delay, 0ms);
    will-change: opacity, transform;
}
.motion-reveal-scale.is-visible {
    opacity: 1;
    transform: none;
}

/* ===== Button shimmer sweep ===== */
.btn-shimmer {
    position: relative;
    overflow: hidden;
}
.btn-shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 60%
    );
    transform: translateX(-120%);
    pointer-events: none;
}
.btn-shimmer:hover::after {
    transition: transform 0.55s ease;
    transform: translateX(120%);
}

/* ===== Mobile menu slide ===== */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition:
        max-height 0.4s var(--motion-ease),
        opacity 0.3s ease;
}
#mobile-menu.is-open {
    max-height: 400px;
    opacity: 1;
    pointer-events: auto;
}

/* ===== Mobile menu icon ===== */
#mobile-menu-btn i {
    transition: transform 0.25s var(--motion-ease), opacity 0.2s ease;
}
#mobile-menu-btn:active i {
    transform: scale(0.85);
}

/* ===== WhatsApp copy row ===== */
#copy-whatsapp-row {
    transition:
        transform 0.3s var(--motion-ease),
        box-shadow 0.3s var(--motion-ease);
}
#copy-whatsapp-row:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.1);
}

/* ===== Reduced motion ===== */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    #scroll-progress { display: none; }
    #navbar { animation: none; }
    .gradient-animated { animation: none; }
    .hero-enter {
        animation: none;
        opacity: 1;
        transform: none;
    }
    .motion-reveal,
    .motion-reveal-scale {
        opacity: 1;
        transform: none;
        transition: none;
    }
    #copy-whatsapp-row,
    #copy-whatsapp { transition: none; }
    #mobile-menu { transition: none; }
    .btn-shimmer::after { display: none; }
    .tilt-card { transition: none; }
}