html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

.font-display {
    font-family: 'Poppins', ui-sans-serif, system-ui, sans-serif;
}

/* dashed connector for the "how it works" vertical list */
.connector::after {
    content: '';
    position: absolute;
    left: 27px;
    top: 64px;
    bottom: -32px;
    border-left: 2px dashed #F5A623;
    opacity: 0.4;
}

.connector:last-child::after {
    display: none;
}

/* Auth marketing panel (login/register split) */
.auth-panel-grain {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

.auth-panel-wave {
    background:
        radial-gradient(ellipse 80% 60% at 20% 100%, rgba(245, 166, 35, 0.18), transparent 55%),
        radial-gradient(ellipse 70% 50% at 80% 100%, rgba(200, 127, 26, 0.12), transparent 50%);
}

.auth-panel-orb {
    animation: auth-orb-float 12s ease-in-out infinite alternate;
}

@keyframes auth-orb-float {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(-12px, 18px, 0) scale(1.06); }
}

/* subtle noise/grain overlay for dark sections */
.grain {
    position: relative;
}

.grain::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
    pointer-events: none;
}

.gold-gradient-ring {
    background: radial-gradient(circle at 30% 30%, #F5A623, #C87F1A);
}

/* Decorative shine sweep — use with .shimmer on gold CTAs / cards */
@keyframes shimmer-sweep {
    100% {
        transform: translateX(100%);
    }
}

.shimmer {
    position: relative;
    overflow: hidden;
}

.shimmer::after {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-100%);
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.22),
        transparent
    );
    animation: shimmer-sweep 1.8s ease-in-out infinite;
    pointer-events: none;
}

/* Loading skeleton bar */
@keyframes skeleton-shimmer {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #e8e8e8 25%, #f5f5f5 50%, #e8e8e8 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

.skeleton-shimmer-dark {
    background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.2s ease-in-out infinite;
}

/* Personalized evaluation visual */
@keyframes eval-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

@keyframes eval-ring {
    0% { transform: scale(0.85); opacity: 0.6; }
    100% { transform: scale(1.25); opacity: 0; }
}

@keyframes eval-chip {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

@keyframes eval-score-draw {
    from { stroke-dashoffset: 326.7; }
}

.eval-float {
    animation: eval-float 5s ease-in-out infinite;
}

.eval-ring {
    animation: eval-ring 2.8s ease-out infinite;
}

.eval-ring-delay {
    animation-delay: 0.9s;
}

.eval-ring-delay-2 {
    animation-delay: 1.8s;
}

.eval-chip {
    animation: eval-chip 3.5s ease-in-out infinite;
}

.eval-chip-delay {
    animation-delay: 1.2s;
}

.eval-score-arc {
    animation: eval-score-draw 1.4s ease-out forwards;
}

/* Landing — how it works product stage */
@keyframes how-panel-rise {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes how-chip-pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}

@keyframes how-score-draw {
    from { stroke-dashoffset: 251; }
}

.how-stage {
    min-height: 420px;
}

.how-panel-1 {
    animation: how-panel-rise 0.7s ease-out both;
}

.how-panel-2 {
    animation: how-panel-rise 0.7s ease-out 0.15s both;
}

.how-chip {
    animation: how-chip-pulse 3.2s ease-in-out infinite;
}

.how-chip-delay {
    animation-delay: 0.4s;
}

.how-chip-delay-2 {
    animation-delay: 0.8s;
}

.how-score-arc {
    animation: how-score-draw 1.6s ease-out both;
}

.hero-score-bar {
    animation: how-panel-rise 0.9s ease-out both;
}

.hero-product {
    transform: perspective(1200px) rotateY(-4deg) rotateX(2deg);
}

@media (max-width: 1023px) {
    .hero-product {
        transform: none;
    }

    .how-stage {
        min-height: 0;
    }
}

::-webkit-scrollbar {
    height: 8px;
    width: 8px;
}

::-webkit-scrollbar-thumb {
    background: #F5A623;
    border-radius: 999px;
}

::-webkit-scrollbar-track {
    background: #1E1E1E;
}

/* Dashboard shell */
@keyframes dashboard-rise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}

.dashboard-widget,
.dashboard-tool-card,
.dashboard-table-card,
.dashboard-highlight-card,
.dashboard-draft-card,
.dashboard-profile-strip,
.dashboard-promo-strip {
    animation: dashboard-rise 0.45s ease-out both;
}

.dashboard-float {
    animation: eval-float 5s ease-in-out infinite;
}

.dashboard-hero {
    box-shadow: 0 18px 50px -28px rgba(10, 10, 10, 0.55);
}