/* Sample D — "Flashy / Motion / Sexy"
   Source: ui-ux-pro-max skill — Modern Dark (Cinema Mobile) palette adapted to web,
   Vibrant gradient accents, hover micro-interaction + scroll-reveal motion specs. */

:root {
    --color-primary-bg: #F8FAFC;
    --color-secondary-bg: #FFFFFF;
    --color-heading-color: #0F0B1F;
    --color-text-default: #1E1B2E;
    --color-text-secondary: #6B7280;
    --color-border-default: #E5E7EB;
    --color-blue-accent: #6D28D9;
    --color-blue-accent-hover: #5B21B6;
}

/* Dark is the "hero" mode for this style — cinematic, glowing */
.dark {
    --color-primary-bg: #050506;
    --color-secondary-bg: #0A0A0F;
    --color-heading-color: #F5F3FF;
    --color-text-default: #E5E7EB;
    --color-text-secondary: #9CA3AF;
    --color-border-default: rgba(255,255,255,.08);
    --color-blue-accent: #A78BFA;
    --color-blue-accent-hover: #C4B5FD;
}

body, .search-input, button { font-family: 'Inter', sans-serif !important; }
h1, h2, h3, .category-title, .faq-question { font-family: 'Space Grotesk', sans-serif !important; letter-spacing: -0.02em; }

/* ===== Animated gradient-blob hero ===== */
.hero-section {
    position: relative;
    overflow: hidden;
    background: var(--color-primary-bg) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--color-border-default) !important;
    padding-top: 3.5rem !important;
    padding-bottom: 3.5rem !important;
}
.hero-section:before { display: none; }
.hero-section .blob {
    position: absolute;
    border-radius: 999px;
    filter: blur(60px);
    opacity: .35;
    pointer-events: none;
    z-index: 0;
}
.hero-section .blob-1 { width: 340px; height: 340px; background: #7C3AED; top: -120px; left: 8%; animation: blobFloat1 14s ease-in-out infinite; }
.hero-section .blob-2 { width: 300px; height: 300px; background: #06B6D4; top: -60px; right: 10%; animation: blobFloat2 17s ease-in-out infinite; }
.hero-section .blob-3 { width: 260px; height: 260px; background: #EC4899; bottom: -140px; left: 40%; animation: blobFloat3 20s ease-in-out infinite; }
.dark .hero-section .blob { opacity: .45; }

@keyframes blobFloat1 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(40px,30px) scale(1.15); } }
@keyframes blobFloat2 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,40px) scale(0.9); } }
@keyframes blobFloat3 { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(20px,-30px) scale(1.1); } }

.hero-section .container { position: relative; z-index: 1; }

.hero-section h1 .bg-gradient-to-r {
    background-image: linear-gradient(90deg, #A78BFA, #7C3AED 45%, #06B6D4) !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    animation: gradientShift 6s ease infinite;
    background-size: 200% auto;
}
@keyframes gradientShift { 0%,100% { background-position: 0% center; } 50% { background-position: 100% center; } }

/* Glowing pill search bar */
.search-input {
    border-radius: 999px !important;
    border: 1px solid var(--color-border-default) !important;
    box-shadow: 0 0 0 rgba(124,58,237,0) !important;
    transition: box-shadow .3s ease, border-color .3s ease !important;
}
.search-input:focus {
    --tw-ring-color: transparent !important;
    border-color: #7C3AED !important;
    box-shadow: 0 0 0 4px rgba(124,58,237,.15), 0 0 24px rgba(124,58,237,.35) !important;
}

/* ===== Glassmorphic, glowing cards with hover lift ===== */
.category-column {
    background: var(--color-secondary-bg);
    border: 1px solid var(--color-border-default);
    border-radius: 1.25rem;
    padding: 1.5rem;
    box-shadow: 0 2px 12px rgba(124,58,237,.06);
    transition: transform .28s cubic-bezier(.16,1,.3,1), box-shadow .28s cubic-bezier(.16,1,.3,1), border-color .28s ease;
    opacity: 0;
    transform: translateY(16px);
}
.category-column.in-view {
    animation: revealUp .5s cubic-bezier(.16,1,.3,1) forwards;
}
@keyframes revealUp { to { opacity: 1; transform: translateY(0); } }

.category-column:hover {
    transform: translateY(-6px) scale(1.01);
    border-color: rgba(124,58,237,.4);
    box-shadow: 0 16px 40px rgba(124,58,237,.18), 0 0 0 1px rgba(124,58,237,.1);
}
.dark .category-column { background: rgba(255,255,255,.03); backdrop-filter: blur(12px); }
.dark .category-column:hover { box-shadow: 0 16px 40px rgba(167,139,250,.22), 0 0 0 1px rgba(167,139,250,.15); }

.category-icon { border-radius: .75rem !important; transition: transform .25s ease; }
.category-column:hover .category-icon { transform: rotate(-6deg) scale(1.08); }

.calculator-item { border-radius: .75rem; transition: background-color .2s ease, transform .2s ease; }
.calculator-item:hover { background-color: rgba(124,58,237,.08) !important; transform: translateX(3px); }

/* Featured tools panel: subtle animated gradient border */
.featured-tools {
    position: relative;
}
#featured-tools a {
    transition: transform .2s ease, border-color .2s ease, background-color .2s ease !important;
}
#featured-tools a:hover {
    transform: translateY(-2px);
    border-color: rgba(124,58,237,.4) !important;
    background-color: rgba(124,58,237,.08) !important;
}

.footer-section {
    background-image: linear-gradient(180deg, #0F0B1F 0%, #050506 100%) !important;
}

/* Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
    .hero-section .blob, .hero-section h1 .bg-gradient-to-r, .category-column { animation: none !important; }
    .category-column { opacity: 1 !important; transform: none !important; }
}