body {
    font-family: 'Inter', sans-serif;
    background: linear-gradient(180deg, #fffaf5 0%, #fff4ea 100%);
}

body > header,
body > header.bg-white {
    background-color: #ffffff !important;
    background-image: none !important;
    border-bottom: 1px solid #f0dcc7;
    box-shadow: 0 10px 26px -24px rgba(121, 58, 24, 0.55);
}

.brand-wordmark {
    color: #df6b22;
}

.text-gradient {
    background: linear-gradient(to right, #f7a35c, #ef9145);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-bg {
    background: linear-gradient(180deg, #fff4e7 0%, #ffefdd 100%);
    border-bottom: 1px solid #f6dcc3;
    position: relative;
    overflow: hidden;
}

.hero-title {
    color: #793a18;
}

.hero-sub,
.hero-desc,
.hero-note {
    color: #8a5130;
}

#hero-pixels {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.hero-pixel {
    position: absolute;
    border-radius: 2px;
    opacity: 0;
    filter: saturate(1.2) contrast(1.05);
    will-change: transform, opacity;
    animation: pixelPop var(--dur, 3s) var(--delay, 0s) infinite ease-in-out;
}

@keyframes pixelPop {
    0% { opacity: 0; transform: scale(0.55); }
    16% { opacity: var(--max-opacity, 0.72); transform: scale(1); }
    84% { opacity: var(--max-opacity, 0.72); transform: scale(1); }
    100% { opacity: 0; transform: scale(0.55); }
}

.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}

.reveal-left {
    opacity: 0;
    transform: translateX(-32px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.reveal-right {
    opacity: 0;
    transform: translateX(32px);
    transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal-right.visible {
    opacity: 1;
    transform: translateX(0);
}

.delay-1 { transition-delay: 0.1s; }
.delay-2 { transition-delay: 0.2s; }
.delay-3 { transition-delay: 0.3s; }
.delay-4 { transition-delay: 0.4s; }
.delay-5 { transition-delay: 0.5s; }

@keyframes heroFadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
}

.hero-title { animation: heroFadeUp 0.8s 0.1s both cubic-bezier(0.22, 1, 0.36, 1); }
.hero-sub { animation: heroFadeUp 0.8s 0.3s both cubic-bezier(0.22, 1, 0.36, 1); }
.hero-desc { animation: heroFadeUp 0.8s 0.45s both cubic-bezier(0.22, 1, 0.36, 1); }
.hero-cta { animation: heroFadeUp 0.8s 0.6s both cubic-bezier(0.22, 1, 0.36, 1); }
.hero-note { animation: heroFadeUp 0.8s 0.75s both cubic-bezier(0.22, 1, 0.36, 1); }

.card-hover-effect {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover-effect:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 40px -8px rgba(223, 107, 34, 0.16);
}

.progress-bar-container {
    width: 100%;
    background-color: #e5e7eb;
    border-radius: 9999px;
    height: 0.5rem;
}

.progress-bar {
    background-color: #f7a35c;
    height: 100%;
    border-radius: 9999px;
    transition: width 1s ease-out;
}

.line-clamp-2 {
    overflow: hidden;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}