/* === Reset & Base === */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 16px; line-height: 1.6; color: #0F172A;
    background: #F8FAFC; min-height: 100vh; display: flex; flex-direction: column;
}
a { color: #4F46E5; text-decoration: none; transition: color .2s; }
a:hover { color: #4338CA; }
img { max-width: 100%; height: auto; }
ul, ol { list-style: none; }
/* === Container === */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
/* === Typography === */
h1, h2, h3, h4 { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; line-height: 1.2; color: #0F172A; }
h1 { font-size: clamp(2rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.1rem; }
p { color: #475569; margin-bottom: 1rem; }
.section-title { text-align: center; margin-bottom: 2.5rem; }
.section-title h2 { margin-bottom: .5rem; }
.section-title p { color: #94A3B8; font-size: 1.05rem; }
/* === Buttons === */
.btn { display: inline-flex; align-items: center; gap: .5rem; padding: .625rem 1.25rem; border-radius: .5rem; font-weight: 600; font-size: .875rem; border: none; cursor: pointer; transition: all .2s; text-decoration: none; }
.btn-primary { background: #4F46E5; color: #fff; }
.btn-primary:hover { background: #4338CA; color: #fff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(79,70,229,.3); }
.btn-secondary { background: #E2E8F0; color: #475569; }
.btn-secondary:hover { background: #CBD5E1; color: #0F172A; }
.btn-danger { background: #EF4444; color: #fff; }
.btn-danger:hover { background: #DC2626; color: #fff; }
.btn-sm { padding: .4rem .875rem; font-size: .7rem; }
.btn-lg { padding: .875rem 2rem; font-size: .9rem; }
.btn-outline { background: transparent; border: 2px solid #E2E8F0; color: #475569; }
.btn-outline:hover { border-color: #4F46E5; color: #4F46E5; }
.btn-gold { background: #F59E0B; color: #fff; }
.btn-gold:hover { background: #D97706; color: #fff; box-shadow: 0 4px 12px rgba(245,158,11,.3); }
/* === Alerts === */
.alert { padding: 1rem 1.25rem; border-radius: .75rem; margin-bottom: 1.5rem; font-size: .875rem; font-weight: 500; display: flex; align-items: center; gap: .75rem; }
.alert-success { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.alert-error { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.alert-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.alert-info { background: #EFF6FF; color: #1E40AF; border: 1px solid #BFDBFE; }
/* === Preloader === */
#preloader {
    position: fixed; inset: 0; z-index: 9999; background: #F8FAFC;
    display: flex; align-items: center; justify-content: center; transition: opacity .4s, visibility .4s;
}
#preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-ring { display: inline-block; position: relative; width: 64px; height: 64px; }
.loader-ring div { box-sizing: border-box; display: block; position: absolute; width: 48px; height: 48px; margin: 8px; border: 4px solid transparent; border-radius: 50%; animation: lds-ring 1.2s cubic-bezier(0.5,0,0.5,1) infinite; border-color: #4F46E5 transparent transparent transparent; }
.loader-ring div:nth-child(1) { animation-delay: -0.45s; }
.loader-ring div:nth-child(2) { animation-delay: -0.3s; }
.loader-ring div:nth-child(3) { animation-delay: -0.15s; }
@keyframes lds-ring { 0%{transform:rotate(0deg)} 100%{transform:rotate(360deg)} }
/* === Navbar === */
.navbar { background: rgba(255,255,255,.9); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid #E2E8F0; position: sticky; top: 0; z-index: 100; }
.nav-container { display: flex; align-items: center; justify-content: space-between; height: 68px; gap: 1.5rem; }
.logo { display: flex; align-items: center; gap: .625rem; text-decoration: none; }
.logo-icon { width: 36px; height: 36px; }
.logo-text { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.35rem; color: #0F172A; }
.logo-highlight { color: #4F46E5; }
.nav-links { display: flex; align-items: center; gap: .5rem; }
.nav-search { display: flex; align-items: center; background: #F1F5F9; border-radius: 999px; overflow: hidden; }
.nav-search-input { border: none; background: transparent; padding: .5rem 1rem; font-size: .875rem; width: 180px; outline: none; font-family: inherit; }
.nav-search-btn { background: transparent; border: none; padding: .5rem .75rem; cursor: pointer; color: #64748B; display: flex; align-items: center; }
.nav-link { color: #475569; font-weight: 500; font-size: .875rem; padding: .5rem .75rem; border-radius: .5rem; transition: all .2s; text-decoration: none; }
.nav-link:hover { background: #F1F5F9; color: #0F172A; }
.nav-dropdown { position: relative; }
.nav-avatar-btn { display: flex; align-items: center; gap: .5rem; cursor: pointer; background: none; border: none; font-family: inherit; font-size: .875rem; font-weight: 500; color: #475569; padding: .25rem .5rem; border-radius: .5rem; }
.nav-avatar-btn:hover { background: #F1F5F9; }
.avatar-circle { width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #4F46E5, #7C3AED); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .7rem; }
.dropdown-menu { position: absolute; top: calc(100% + 8px); right: 0; background: #fff; border: 1px solid #E2E8F0; border-radius: .75rem; box-shadow: 0 10px 40px rgba(0,0,0,.1); min-width: 200px; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: all .2s; z-index: 200; }
.nav-dropdown:hover .dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown-item { display: block; padding: .625rem 1rem; color: #475569; font-size: .875rem; text-decoration: none; transition: all .1s; }
.dropdown-item:hover { background: #F1F5F9; color: #0F172A; }
.dropdown-item:first-child { border-radius: .75rem .75rem 0 0; }
.dropdown-item:last-child { border-radius: 0 0 .75rem .75rem; color: #EF4444; }
.dropdown-divider { height: 1px; background: #E2E8F0; margin: .25rem 0; }
.nav-toggle { display: none; flex-direction: column; gap: 4px; background: none; border: none; cursor: pointer; padding: 4px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: #0F172A; border-radius: 2px; transition: all .3s; }
/* === Mobile Nav === */
@media (max-width: 768px) {
    .nav-toggle { display: flex; }
    .nav-links { display: none; position: absolute; top: 68px; left: 0; right: 0; background: #fff; border-bottom: 2px solid #E2E8F0; padding: 1rem; flex-direction: column; gap: .5rem; box-shadow: 0 10px 30px rgba(0,0,0,.1); }
    .nav-links.open { display: flex; }
    .nav-search { width: 100%; }
    .nav-search-input { flex: 1; }
    .dropdown-menu { position: static; box-shadow: none; border: none; opacity: 1; visibility: visible; transform: none; padding-left: 1rem; }
}
/* === Hero === */
.hero { padding: 6rem 0; min-height: 85vh; display: flex; align-items: center; text-align: center; background: linear-gradient(135deg, rgba(238,242,255,.85) 0%, rgba(224,231,255,.85) 50%, rgba(199,210,254,.85) 100%), url(../assets/images/hero-bg.svg) center/cover no-repeat; position: relative; overflow: hidden; }
.hero::before { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; background: rgba(79,70,229,.05); top: -200px; right: -200px; }
.hero::after { content: ''; position: absolute; width: 400px; height: 400px; border-radius: 50%; background: rgba(245,158,11,.05); bottom: -100px; left: -100px; }
.hero-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; }
.hero h1 { margin-bottom: .75rem; background: linear-gradient(135deg, #0F172A, #4F46E5); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero p { font-size: 1.15rem; color: #64748B; margin-bottom: 2rem; }
.hero-search { display: flex; max-width: 580px; margin: 0 auto; background: #fff; border-radius: 999px; box-shadow: 0 4px 20px rgba(0,0,0,.08); overflow: hidden; }
.hero-search input { flex: 1; border: none; padding: 1rem 1.5rem; font-size: .9rem; outline: none; font-family: inherit; }
.hero-search button { background: #4F46E5; border: none; color: #fff; padding: 1rem 2rem; font-weight: 600; cursor: pointer; transition: all .2s; font-family: inherit; font-size: .875rem; }
.hero-search button:hover { background: #4338CA; }
.hero-stats { display: flex; justify-content: center; gap: 3rem; margin-top: 2.5rem; }
.hero-stat { text-align: center; }
.hero-stat-value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.75rem; color: #4F46E5; }
.hero-stat-label { font-size: .875rem; color: #64748B; }
/* === Cards === */
.card { background: #fff; border-radius: 1rem; border: 1px solid #E2E8F0; overflow: hidden; transition: all .25s; }
.card:hover { box-shadow: 0 8px 30px rgba(0,0,0,.06); transform: translateY(-2px); border-color: #CBD5E1; }
.card-body { padding: 1.25rem; }
.card-footer { padding: 1rem 1.25rem; background: #F8FAFC; border-top: 1px solid #E2E8F0; }
/* === Category Grid === */
.category-card:hover { border-color: #4F46E5; box-shadow: 0 4px 20px rgba(79,70,229,.1); transform: translateY(-3px); }
.category-card span { font-weight: 600; font-size: .875rem; color: #0F172A; }
/* === Stars === */
.stars { display: inline-flex; align-items: center; gap: 2px; }
.star { width: 16px; height: 16px; display: inline-block; mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); background: currentColor; }
.star-full { background: #F59E0B; }
.star-half { background: linear-gradient(90deg, #F59E0B 50%, #CBD5E1 50%); }
.star-empty { background: #CBD5E1; }
.star-text { margin-left: .375rem; font-weight: 700; font-size: .875rem; color: #0F172A; }
.stars-large .star { width: 24px; height: 24px; }
/* === Company Cards === */
.company-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 1.5rem; }
.company-carousel { display:flex;gap:1.5rem;overflow-x:auto;padding-bottom:.75rem;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; }
.company-carousel::-webkit-scrollbar { height:6px; }
.company-carousel::-webkit-scrollbar-track { background:#F1F5F9;border-radius:3px; }
.company-carousel::-webkit-scrollbar-thumb { background:#CBD5E1;border-radius:3px; }
.company-carousel .company-card { flex:0 0 340px;scroll-snap-align:start; }

.company-card { position: relative; }
.company-card-top { padding: 1.25rem 1.25rem .75rem; display: flex; align-items: flex-start; gap: 1rem; }
.company-card-icon { width: 56px; height: 56px; border-radius: .75rem; background: linear-gradient(135deg, #EEF2FF, #E0E7FF); display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.25rem; color: #4F46E5; }
.company-card-info { flex: 1; min-width: 0; }
.company-card-name { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 700; font-size: 1.1rem; color: #0F172A; text-decoration: none; display: block; margin-bottom: .25rem; }
.company-card-name:hover { color: #4F46E5; }
.company-card-meta { font-size: .7rem; color: #64748B; display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.company-card-badge { display: inline-flex; align-items: center; gap: .25rem; font-size: .65rem; font-weight: 600; padding: .125rem .5rem; border-radius: 999px; }
.badge-promoted { background: #FFFBEB; color: #92400E; border: 1px solid #FDE68A; }
.badge-open { background: #ECFDF5; color: #065F46; border: 1px solid #A7F3D0; }
.badge-closed { background: #FEF2F2; color: #991B1B; border: 1px solid #FECACA; }
.company-card-desc { padding: 0 1.25rem .75rem; font-size: .875rem; color: #64748B; line-height: 1.5; }
.company-card-footer { display: flex; align-items: center; justify-content: space-between; padding: .75rem 1.25rem; background: #F8FAFC; border-top: 1px solid #E2E8F0; }
.company-card-footer .stars { font-size: .7rem; }
.company-card-count { font-size: .7rem; color: #94A3B8; }
.fav-btn { background: none; border: none; cursor: pointer; color: #CBD5E1; padding: .25rem; transition: all .2s; display: flex; align-items: center; }
.fav-btn:hover { color: #EF4444; }
.fav-btn.active { color: #EF4444; }
.fav-btn svg { width: 20px; height: 20px; }
/* === Company Detail === */
.company-header { background: #fff; border-bottom: 1px solid #E2E8F0; padding: 2rem 0; }
.company-header-inner { display: flex; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; }
.company-header-icon { width: 80px; height: 80px; border-radius: 1rem; background: linear-gradient(135deg, #EEF2FF, #E0E7FF); display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2rem; color: #4F46E5; flex-shrink: 0; }
.company-header-info { flex: 1; min-width: 280px; }
.company-header-info h1 { margin-bottom: .25rem; }
.company-header-meta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; margin-top: .5rem; }
.company-header-actions { display: flex; gap: .75rem; align-items: center; }
.company-detail-grid { display: grid; grid-template-columns: 1fr 340px; gap: 2rem; padding: 2rem 0; }
@media (max-width: 900px) { .company-detail-grid { grid-template-columns: 1fr; } }
.company-detail-main > section { margin-bottom: 2.5rem; }
.company-detail-main h3 { margin-bottom: 1rem; color: #0F172A; }
.company-detail-sidebar { position: sticky; top: 88px; align-self: start; }
.info-card { background: #fff; border-radius: 1rem; border: 1px solid #E2E8F0; padding: 1.5rem; margin-bottom: 1.5rem; }
.info-card h4 { font-size: .875rem; text-transform: uppercase; letter-spacing: .05em; color: #94A3B8; margin-bottom: .75rem; }
.info-row { display: flex; align-items: center; gap: .75rem; padding: .5rem 0; font-size: .875rem; color: #475569; }
.info-row svg { width: 18px; height: 18px; flex-shrink: 0; color: #4F46E5; }
.hours-table { width: 100%; font-size: .875rem; }
.hours-table td { padding: .35rem 0; }
.hours-day { color: #64748B; }
.hours-time { text-align: right; font-weight: 500; }
.hours-today { font-weight: 700; color: #4F46E5; }
.open-status { display: inline-flex; align-items: center; gap: .375rem; font-size: .7rem; font-weight: 600; padding: .25rem .625rem; border-radius: 999px; }
.open-status.open { background: #ECFDF5; color: #065F46; }
.open-status.closed { background: #FEF2F2; color: #991B1B; }
/* === Reviews === */
.review-card { padding: 1.5rem; border-bottom: 1px solid #E2E8F0; }
.review-card:last-child { border-bottom: none; }
.review-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: .5rem; }
.review-user { display: flex; align-items: center; gap: .75rem; }
.review-avatar { width: 28px; height: 28px; border-radius: 50%; background: linear-gradient(135deg, #EEF2FF, #E0E7FF); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: .875rem; color: #4F46E5; }
.review-user-name { font-weight: 600; font-size: .875rem; color: #0F172A; }
.review-date { font-size: .7rem; color: #94A3B8; }
.review-title { font-weight: 600; font-size: .9rem; margin-bottom: .375rem; color: #0F172A; }
.review-text { font-size: .875rem; color: #475569; line-height: 1.6; }
.review-reply { margin-top: 1rem; margin-left: 2.5rem; padding: 1rem; background: #F8FAFC; border-radius: .75rem; border-left: 3px solid #4F46E5; }
.review-reply-label { font-size: .7rem; font-weight: 600; color: #4F46E5; margin-bottom: .25rem; text-transform: uppercase; letter-spacing: .05em; }
.review-reply-text { font-size: .875rem; color: #475569; }
/* === Forms === */
.form-group { margin-bottom: 1.25rem; }
.form-label { display: block; font-weight: 600; font-size: .875rem; color: #0F172A; margin-bottom: .375rem; }
.form-input, .form-select, .form-textarea { width: 100%; padding: .75rem 1rem; border: 1px solid #CBD5E1; border-radius: .75rem; font-size: .875rem; font-family: inherit; transition: all .2s; outline: none; background: #fff; color: #0F172A; }
.form-input:focus, .form-select:focus, .form-textarea:focus { border-color: #4F46E5; box-shadow: 0 0 0 3px rgba(79,70,229,.1); }
.form-textarea { min-height: 90px; resize: vertical; }
.form-select { cursor: pointer; }
.form-error { font-size: .7rem; color: #EF4444; margin-top: .25rem; }
.form-hint { font-size: .7rem; color: #94A3B8; margin-top: .25rem; }
/* === Auth Pages === */
.auth-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: 2rem; background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 50%, #C7D2FE 100%); }
.auth-card { background: #fff; border-radius: 1.5rem; box-shadow: 0 10px 50px rgba(0,0,0,.08); width: 100%; max-width: 440px; padding: 2.5rem; }
.auth-card .logo { justify-content: center; margin-bottom: 2rem; }
.auth-card h1 { text-align: center; font-size: 1.5rem; margin-bottom: .5rem; }
.auth-card .subtitle { text-align: center; color: #94A3B8; font-size: .875rem; margin-bottom: 2rem; }
.auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.5rem 0; }
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: #E2E8F0; }
.auth-divider span { font-size: .7rem; color: #94A3B8; }
/* === Rating Input === */
.rating-input { display: inline-flex; flex-direction: row-reverse; gap: 0; }
.rating-input input { display: none; }
.rating-input label { cursor: pointer; width: 36px; height: 36px; mask-size: contain; -webkit-mask-size: contain; mask-repeat: no-repeat; -webkit-mask-repeat: no-repeat; mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E"); background: #CBD5E1; transition: all .15s; }
.rating-input label:hover, .rating-input label:hover ~ label, .rating-input input:checked ~ label { background: #F59E0B; }
/* === Tags === */
.tag { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .625rem; background: #F1F5F9; border-radius: 999px; font-size: .7rem; color: #475569; }
.tag-list { display: flex; flex-wrap: wrap; gap: .5rem; }
/* === Profile === */
.profile-header { background: #fff; border-bottom: 1px solid #E2E8F0; padding: 2rem 0; }
.profile-info { display: flex; align-items: center; gap: 1.5rem; }
.profile-avatar { width: 80px; height: 80px; border-radius: 50%; background: linear-gradient(135deg, #4F46E5, #7C3AED); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 2rem; color: #fff; }
.profile-tabs { display: flex; gap: 0; border-bottom: 2px solid #E2E8F0; margin-bottom: 2rem; }
.profile-tab { padding: .75rem 1.5rem; font-weight: 600; font-size: .875rem; color: #64748B; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: all .2s; text-decoration: none; }
.profile-tab:hover { color: #0F172A; }
.profile-tab.active { color: #4F46E5; border-bottom-color: #4F46E5; }
/* === Pagination === */
.pagination { display: flex; justify-content: center; padding: 2rem 0; }
.pagination ul { display: flex; gap: .375rem; align-items: center; }
.page-link { display: flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 .5rem; border-radius: .5rem; font-size: .875rem; font-weight: 500; color: #475569; background: #fff; border: 1px solid #E2E8F0; transition: all .2s; text-decoration: none; }
.page-link:hover { border-color: #4F46E5; color: #4F46E5; }
.page-link.active { background: #4F46E5; color: #fff; border-color: #4F46E5; }
.page-dots { border: none; color: #94A3B8; }
/* === Footer === */
.footer { background: #0F172A; color: #CBD5E1; padding: 3rem 0 1.5rem; margin-top: auto; }
.footer .logo-text { color: #fff; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (max-width: 768px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
.footer-desc { font-size: .875rem; color: #64748B; margin-top: .75rem; }
.footer-links h4 { color: #fff; font-size: .875rem; margin-bottom: .75rem; font-family: 'Inter', sans-serif; font-weight: 600; }
.footer-links a { display: block; color: #64748B; font-size: .875rem; padding: .25rem 0; }
.footer-links a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #1E293B; padding-top: 1.5rem; font-size: .7rem; color: #475569; text-align: center; }
/* === Empty State === */
.empty-state { text-align: center; padding: 4rem 2rem; }
.empty-state-icon { width: 64px; height: 64px; margin: 0 auto 1rem; color: #CBD5E1; }
.empty-state h3 { color: #0F172A; margin-bottom: .5rem; }
.empty-state p { color: #94A3B8; font-size: .875rem; }
/* === How It Works === */
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
@media (max-width: 768px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card { text-align: center; padding: 2rem; }
.step-number { width: 48px; height: 48px; border-radius: 50%; background: #EEF2FF; color: #4F46E5; display: flex; align-items: center; justify-content: center; font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 1.25rem; margin: 0 auto 1rem; }
.step-card h3 { margin-bottom: .5rem; font-size: 1.1rem; }
.step-card p { font-size: .875rem; color: #64748B; }
/* === Admin === */
.admin-page .navbar { position: static; }
.admin-layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.admin-sidebar { background: #0F172A; display: flex; flex-direction: column; }
.admin-sidebar-brand { padding: 1.25rem 1.5rem; border-bottom: 1px solid #1E293B; }
.admin-sidebar-brand .logo-text { color: #fff; font-size: 1.1rem; }
.admin-sidebar-nav { flex: 1; padding: .75rem 0; }
.admin-sidebar-footer { padding: .75rem 0; border-top: 1px solid #1E293B; }
.admin-nav-item { display: flex; align-items: center; gap: .75rem; padding: .7rem 1.5rem; color: #64748B; font-size: .875rem; font-weight: 500; transition: all .15s; text-decoration: none; }
.admin-nav-item:hover { background: rgba(255,255,255,.05); color: #fff; }
.admin-nav-item.active { background: rgba(79,70,229,.15); color: #818CF8; }
.admin-content { padding: 2rem; min-width: 0; background: #F8FAFC; }
.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.admin-header h2 { font-size: 1.5rem; }
.admin-card { background: #fff; border-radius: 1rem; border: 1px solid #E2E8F0; padding: 1.5rem; margin-bottom: 1.5rem; }
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem; margin-bottom: 2rem; }
.admin-stat, .admin-stat-card { background: #fff; border-radius: 1rem; border: 1px solid #E2E8F0; padding: 1.5rem; }
.admin-stat-value { font-family: 'Plus Jakarta Sans', sans-serif; font-weight: 800; font-size: 2rem; color: #4F46E5; }
.admin-stat-label { font-size: .7rem; color: #64748B; margin-top: .25rem; display: block; }
.admin-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.admin-table th { text-align: left; padding: .75rem .5rem; font-weight: 600; color: #64748B; border-bottom: 2px solid #E2E8F0; }
.admin-table td { padding: .75rem .5rem; border-bottom: 1px solid #E2E8F0; color: #475569; }
.admin-table tr:hover td { background: #F8FAFC; }
.admin-badge { display: inline-flex; padding: .125rem .625rem; border-radius: 999px; font-size: .7rem; font-weight: 600; }
.admin-badge.active { background: #ECFDF5; color: #065F46; }
.admin-badge.inactive, .admin-badge.suspended { background: #FEF2F2; color: #991B1B; }
.admin-badge.pending { background: #FFFBEB; color: #92400E; }
/* === Filters === */
.filters-bar { background: #fff; border-radius: 1rem; border: 1px solid #E2E8F0; padding: 1.25rem; margin-bottom: 1.5rem; }
.filters-row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: end; }
.filter-group { display: flex; flex-direction: column; gap: .25rem; }
.filter-group label { font-size: .7rem; font-weight: 600; color: #64748B; text-transform: uppercase; letter-spacing: .05em; }
.filter-group select, .filter-group input { padding: .5rem .75rem; border: 1px solid #CBD5E1; border-radius: .5rem; font-size: .875rem; font-family: inherit; outline: none; }
.filter-group select:focus, .filter-group input:focus { border-color: #4F46E5; }
/* === Misc === */
.text-center { text-align: center; }
.mt-1 { margin-top: .5rem; } .mt-2 { margin-top: 1rem; } .mt-3 { margin-top: 1.5rem; }
.mb-1 { margin-bottom: .5rem; } .mb-2 { margin-bottom: 1rem; } .mb-3 { margin-bottom: 1.5rem; }
.gap-1 { gap: .5rem; } .gap-2 { gap: 1rem; }
.flex { display: flex; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .justify-between { justify-content: space-between; }
/* === Cookie Banner === */

/* Promoted / Banner */
.promo-card { border: 2px solid #FDE68A; position: relative; }
.promo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#F59E0B,#FBBF24); border-radius: 1rem 1rem 0 0; }
.promo-section { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.banner-ad { display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg,#FFFBEB,#FEF3C7); border: 1px solid #FDE68A; border-radius: 1rem; padding: 1.25rem; text-decoration: none; transition: all .2s; }
.banner-ad:hover { border-color: #F59E0B; box-shadow: 0 4px 12px rgba(245,158,11,.15); transform: translateY(-2px); }
.banner-ad-content { display: flex; flex-direction: column; gap: .25rem; }
.banner-ad-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #B45309; font-weight: 600; }
.banner-ad-content strong { font-size: .9rem; color: #0F172A; }
.banner-ad-content span:last-child { font-size: .7rem; color: #64748B; line-height: 1.4; }
.banner-ad-cta { font-size: .7rem; font-weight: 600; color: #4F46E5; margin-top: .5rem; }

.cookie-banner { display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #0F172A; color: #CBD5E1; padding: 1rem 1.5rem; box-shadow: 0 -4px 20px rgba(0,0,0,.15); }

/* Promoted / Banner */
.promo-card { border: 2px solid #FDE68A; position: relative; }
.promo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#F59E0B,#FBBF24); border-radius: 1rem 1rem 0 0; }
.promo-section { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.banner-ad { display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg,#FFFBEB,#FEF3C7); border: 1px solid #FDE68A; border-radius: 1rem; padding: 1.25rem; text-decoration: none; transition: all .2s; }
.banner-ad:hover { border-color: #F59E0B; box-shadow: 0 4px 12px rgba(245,158,11,.15); transform: translateY(-2px); }
.banner-ad-content { display: flex; flex-direction: column; gap: .25rem; }
.banner-ad-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #B45309; font-weight: 600; }
.banner-ad-content strong { font-size: .9rem; color: #0F172A; }
.banner-ad-content span:last-child { font-size: .7rem; color: #64748B; line-height: 1.4; }
.banner-ad-cta { font-size: .7rem; font-weight: 600; color: #4F46E5; margin-top: .5rem; }

.cookie-banner-content { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; }

/* Promoted / Banner */
.promo-card { border: 2px solid #FDE68A; position: relative; }
.promo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#F59E0B,#FBBF24); border-radius: 1rem 1rem 0 0; }
.promo-section { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.banner-ad { display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg,#FFFBEB,#FEF3C7); border: 1px solid #FDE68A; border-radius: 1rem; padding: 1.25rem; text-decoration: none; transition: all .2s; }
.banner-ad:hover { border-color: #F59E0B; box-shadow: 0 4px 12px rgba(245,158,11,.15); transform: translateY(-2px); }
.banner-ad-content { display: flex; flex-direction: column; gap: .25rem; }
.banner-ad-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #B45309; font-weight: 600; }
.banner-ad-content strong { font-size: .9rem; color: #0F172A; }
.banner-ad-content span:last-child { font-size: .7rem; color: #64748B; line-height: 1.4; }
.banner-ad-cta { font-size: .7rem; font-weight: 600; color: #4F46E5; margin-top: .5rem; }

.cookie-banner-text strong { display: block; margin-bottom: .25rem; color: #fff; font-size: .9375rem; }

/* Promoted / Banner */
.promo-card { border: 2px solid #FDE68A; position: relative; }
.promo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#F59E0B,#FBBF24); border-radius: 1rem 1rem 0 0; }
.promo-section { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.banner-ad { display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg,#FFFBEB,#FEF3C7); border: 1px solid #FDE68A; border-radius: 1rem; padding: 1.25rem; text-decoration: none; transition: all .2s; }
.banner-ad:hover { border-color: #F59E0B; box-shadow: 0 4px 12px rgba(245,158,11,.15); transform: translateY(-2px); }
.banner-ad-content { display: flex; flex-direction: column; gap: .25rem; }
.banner-ad-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #B45309; font-weight: 600; }
.banner-ad-content strong { font-size: .9rem; color: #0F172A; }
.banner-ad-content span:last-child { font-size: .7rem; color: #64748B; line-height: 1.4; }
.banner-ad-cta { font-size: .7rem; font-weight: 600; color: #4F46E5; margin-top: .5rem; }

.cookie-banner-text p { margin: 0; font-size: .7rem; color: #94A3B8; }

/* Promoted / Banner */
.promo-card { border: 2px solid #FDE68A; position: relative; }
.promo-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg,#F59E0B,#FBBF24); border-radius: 1rem 1rem 0 0; }
.promo-section { padding-top: 2.5rem; padding-bottom: 1.5rem; }
.banner-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 1rem; margin-bottom: 1.5rem; }
.banner-ad { display: flex; flex-direction: column; justify-content: space-between; background: linear-gradient(135deg,#FFFBEB,#FEF3C7); border: 1px solid #FDE68A; border-radius: 1rem; padding: 1.25rem; text-decoration: none; transition: all .2s; }
.banner-ad:hover { border-color: #F59E0B; box-shadow: 0 4px 12px rgba(245,158,11,.15); transform: translateY(-2px); }
.banner-ad-content { display: flex; flex-direction: column; gap: .25rem; }
.banner-ad-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .05em; color: #B45309; font-weight: 600; }
.banner-ad-content strong { font-size: .9rem; color: #0F172A; }
.banner-ad-content span:last-child { font-size: .7rem; color: #64748B; line-height: 1.4; }
.banner-ad-cta { font-size: .7rem; font-weight: 600; color: #4F46E5; margin-top: .5rem; }

.cookie-banner-actions { display: flex; align-items: center; gap: 1rem; flex-shrink: 0; }
.cookie-link { font-size: .7rem; color: #818CF8; text-decoration: underline; }
.cookie-link:hover { color: #A5B4FC; }

/* Gallery */
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: .5rem; }
.gallery-grid a { display: block; border-radius: .5rem; overflow: hidden; border: 1px solid #E2E8F0; aspect-ratio: 1; }
.gallery-grid img { width: 100%; height: 100%; object-fit: cover; }


/* Promo card animations */
@keyframes promoShine {
    0% { transform: translateX(-100%) skewX(-15deg); }
    100% { transform: translateX(200%) skewX(-15deg); }
}
@keyframes promoFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
.promo-card-image-wrap::after {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.15), transparent);
    transform: translateX(-100%) skewX(-15deg);
    pointer-events: none;
    z-index: 2;
}
.promo-card-enhanced:hover .promo-card-image-wrap::after {
    animation: promoShine .6s ease;
}

.promo-card-bg-shapes span {
    animation: promoFloat 4s ease-in-out infinite;
}
.promo-card-bg-shapes span:nth-child(2) {
    animation-delay: -1.5s;
}
.promo-card-bg-shapes span:nth-child(3) {
    animation-delay: -3s;
    animation-duration: 3s;
}

.company-carousel .promo-card-enhanced,
.promo-card-enhanced {
    border: none !important;
    border-radius: 1rem !important;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);
    transition: transform .25s ease, box-shadow .25s ease;
    padding: 0 !important;
    flex: 0 0 340px;
}
.promo-card-enhanced:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0,0,0,.12);
}
.promo-card-enhanced::before { display: none !important; }

.promo-card-image-wrap {
    position: relative;
    height: 160px;
    overflow: hidden;
    background: #F1F5F9;
}
.promo-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.promo-card-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #4F46E5, #7C3AED);
    position: relative;
    overflow: hidden;
}
.promo-card-letter {
    font-family: "Plus Jakarta Sans", sans-serif;
    font-size: 4rem;
    font-weight: 800;
    color: rgba(255,255,255,.15);
    z-index: 2;
    line-height: 1;
}
.promo-card-bg-shapes { position: absolute; inset: 0; pointer-events: none; }
.promo-card-bg-shapes span {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,.06);
}
.promo-card-bg-shapes span:nth-child(1) {
    width: 120px; height: 90px;
    top: -30px; right: -20px;
}
.promo-card-bg-shapes span:nth-child(2) {
    width: 80px; height: 80px;
    bottom: -15px; left: -10px;
}
.promo-card-bg-shapes span:nth-child(3) {
    width: 36px; height: 36px;
    bottom: 30px; right: 30px;
}

.promo-card-image-wrap .badge-promoted {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 3;
    font-size: .65rem;
    padding: .25rem .625rem;
    border-radius: 999px;
    background: rgba(255,255,255,.95);
    color: #92400E;
    border: 1px solid #FDE68A;
    box-shadow: 0 2px 6px rgba(0,0,0,.1);
    backdrop-filter: blur(4px);
    display: inline-flex;
    align-items: center;
    gap: .25rem;
}

.promo-card-body {
    padding: 1rem 1.25rem 1.25rem;
}

.promo-card-rating {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: .375rem;
}
.promo-card-count {
    font-size: .7rem;
    color: #94A3B8;
}

.promo-card-name {
    font-size: 1.1rem !important;
    margin-bottom: .25rem !important;
}

.promo-card-location {
    display: flex;
    align-items: center;
    gap: .25rem;
    font-size: .7rem;
    color: #64748B;
    margin-bottom: .5rem;
}
.promo-pin {
    flex-shrink: 0;
    color: #94A3B8;
}

.promo-card-desc {
    padding: 0 !important;
    margin-bottom: .875rem;
    font-size: .7rem;
    color: #64748B;
    line-height: 1.5;
}

.promo-card-cta {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: .7rem;
    font-weight: 600;
    color: #4F46E5;
    text-decoration: none;
    transition: gap .2s;
}
.promo-card-cta:hover {
    gap: .65rem;
    color: #4338CA;
}








/* ===== Promo Awards ===== */

@keyframes sf{0%,100%{transform:translateY(0) rotate(0deg)}33%{transform:translateY(-10px) rotate(2deg)}66%{transform:translateY(-5px) rotate(-1deg)}}
@keyframes sf2{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(-3deg)}}
@keyframes sf3{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes spk{0%,100%{opacity:.2;transform:scale(.8)}50%{opacity:1;transform:scale(1.3)}}
@keyframes gp{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:.65;transform:scale(1.15)}}
@keyframes cf{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.promo-section{position:relative;padding:3rem 0;overflow:hidden;background:linear-gradient(135deg,#FFFAF6,#FFF0E0,#FFE8D0);min-height:420px;}
.ps-bg{position:absolute;inset:0;pointer-events:none;z-index:0;}
.ps-glow{position:absolute;border-radius:50%;filter:blur(60px);}
.g1{width:400px;height:400px;background:rgba(249,115,22,.12);top:-100px;right:-100px;animation:gp 6s ease-in-out infinite;}
.g2{width:300px;height:300px;background:rgba(251,191,36,.1);bottom:-80px;left:-80px;animation:gp 8s ease-in-out infinite 2s;}
.g3{width:200px;height:200px;background:rgba(236,72,153,.08);top:50%;left:50%;transform:translate(-50%,-50%);animation:gp 10s ease-in-out infinite 4s;}
.ps-floating{position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden;}
.ps-seal{position:absolute;width:76px;height:76px;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.1);}
.ps-si{display:flex;flex-direction:column;align-items:center;gap:0;font-family:"Plus Jakarta Sans",sans-serif;}
.ps-ss{font-size:.38rem;letter-spacing:.15em;color:rgba(255,255,255,.9);line-height:1;}
.ps-sn{font-size:.85rem;font-weight:800;color:#fff;line-height:1.1;}
.ps-si-icon{font-size:1.2rem;line-height:1;}
.ps-sl{font-size:.44rem;font-weight:600;color:rgba(255,255,255,.8);text-transform:uppercase;letter-spacing:.08em;line-height:1;margin-top:2px;}
.s1{background:linear-gradient(135deg,#F97316,#EA580C);top:6%;left:5%;animation:sf 6s ease-in-out infinite;}
.s2{background:linear-gradient(135deg,#F59E0B,#D97706);top:18%;right:6%;width:66px;height:66px;animation:sf2 7s ease-in-out infinite 1s;}
.s3{background:linear-gradient(135deg,#EC4899,#DB2777);bottom:15%;left:3%;animation:sf3 5s ease-in-out infinite .5s;}
.s4{background:linear-gradient(135deg,#6366F1,#4F46E5);bottom:25%;right:4%;width:72px;height:72px;animation:sf 8s ease-in-out infinite 2s;}
.s5{background:linear-gradient(135deg,#10B981,#059669);top:40%;left:2%;width:68px;height:68px;animation:sf2 6.5s ease-in-out infinite 3s;}
.ps-spark{position:absolute;font-size:.9rem;color:#F59E0B;animation:spk 2.5s ease-in-out infinite;}
.sp1{top:10%;left:55%;}.sp2{top:55%;right:12%;animation-delay:.6s;}.sp3{top:75%;left:25%;animation-delay:1.2s;}.sp4{top:22%;left:82%;animation-delay:1.8s;}
.section-title--warm{text-align:center;margin-bottom:1.8rem;position:relative;z-index:2;}
.st-tag{display:inline-flex;align-items:center;gap:4px;font-size:.68rem;font-weight:700;color:#F97316;margin-bottom:.3rem;padding:.2rem .65rem;border-radius:999px;background:rgba(249,115,22,.1);}
.section-title--warm h2{font-size:1.6rem;font-weight:800;color:#1E293B;margin:0;font-family:"Plus Jakarta Sans",sans-serif;}
.section-title--warm p{font-size:.82rem;color:#64748B;margin:.15rem 0 0;}
.promo-card{flex:0 0 175px;background:#fff;border-radius:12px;box-shadow:0 2px 8px rgba(0,0,0,.05);overflow:hidden;transition:all .3s;position:relative;animation:cf 5s ease-in-out infinite;animation-delay:calc(var(--i,0)*.2s);}
.promo-card:hover{box-shadow:0 10px 30px rgba(249,115,22,.15);transform:translateY(-5px);animation-play-state:paused;}
.pc-award{position:absolute;top:5px;right:5px;z-index:2;}
.pc-award span{display:inline-flex;align-items:center;gap:2px;font-size:.48rem;font-weight:700;color:#fff;padding:.12rem .4rem;border-radius:999px;background:linear-gradient(135deg,#F59E0B,#D97706);box-shadow:0 2px 6px rgba(245,158,11,.3);letter-spacing:.03em;}
.pc-icon{padding:.6rem .6rem 0;display:flex;justify-content:center;}
.pc-icon-inner{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,#F97316,#EA580C);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:1rem;font-family:"Plus Jakarta Sans",sans-serif;overflow:hidden;box-shadow:0 3px 8px rgba(249,115,22,.2);}
.pc-icon-inner img{width:100%;height:100%;object-fit:cover;}
.pc-body{padding:.4rem .55rem .55rem;display:flex;flex-direction:column;align-items:center;text-align:center;gap:.1rem;}
.pc-name{font-size:.73rem;font-weight:700;color:#0F172A;text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.2;}
.pc-name:hover{color:#F97316;}
.pc-stars-r{margin-top:1px;}
.pc-stars-r .stars{gap:0;}
.pc-stars-r .star{width:12px;height:12px;}
.pc-stars-r .star-text{display:none;}
.pc-rev{font-size:.58rem;color:#94A3B8;}
.pc-city{font-size:.6rem;color:#94A3B8;display:flex;align-items:center;gap:2px;}
.pc-btn{display:inline-block;margin-top:.3rem;padding:.25rem .65rem;font-size:.63rem;font-weight:600;color:#fff;border-radius:999px;text-decoration:none;background:linear-gradient(135deg,#F97316,#EA580C);transition:all .2s;box-shadow:0 2px 6px rgba(249,115,22,.2);}
.pc-btn:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(249,115,22,.3);}

/* ===== Kategorien (Trustpilot) ===== */

.cat-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-top:1.5rem;}
.cat-card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:.4rem;padding:1.25rem .75rem;background:#fff;border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.04);text-decoration:none;transition:all .25s;position:relative;overflow:hidden;}
.cat-card::before{content:'';position:absolute;top:0;left:0;right:0;height:4px;background:var(--cat-color);opacity:.6;}
.cat-card:hover{transform:translateY(-3px);box-shadow:0 8px 24px rgba(0,0,0,.08);}
.cat-card:hover::before{opacity:1;}
.cat-icon{font-size:2rem;line-height:1;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:color-mix(in srgb,var(--cat-color) 10%,transparent);transition:transform .2s;}
.cat-card:hover .cat-icon{transform:scale(1.1);}
.cat-name{font-size:.85rem;font-weight:700;color:#0F172A;line-height:1.2;}
.cat-count{font-size:.7rem;color:#94A3B8;}

.gallery-count{position:absolute;bottom:.5rem;right:.5rem;background:rgba(0,0,0,.6);color:#fff;padding:.25rem .6rem;border-radius:6px;font-size:.75rem;display:flex;align-items:center;gap:.35rem;pointer-events:none;}
.gallery-modal{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;flex-direction:column;padding:1rem;}
.gallery-close{position:absolute;top:1rem;right:1.5rem;font-size:2.8rem;color:#fff;cursor:pointer;opacity:.6;line-height:1;z-index:10;transition:opacity .2s;}
.gallery-close:hover{opacity:1;}
.gallery-main{display:flex;align-items:center;gap:.5rem;max-width:95vw;}
.gallery-main img{max-width:calc(95vw - 80px);max-height:75vh;object-fit:contain;border-radius:.5rem;}
.gallery-navb{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:1.8rem;padding:.25rem .5rem;border-radius:8px;cursor:pointer;transition:background .25s;line-height:1;}
.gallery-navb:hover{background:rgba(255,255,255,.2);}
.gallery-counter{color:rgba(255,255,255,.6);font-size:.8rem;margin-top:.75rem;}
.gallery-strip{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap;justify-content:center;max-width:90vw;}
.gallery-dot{width:42px;height:42px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;opacity:.5;transition:all .25s;}
.gallery-dot.active,.gallery-dot:hover{border-color:#F97316;opacity:1;}

.gallery-inline{border-radius:.5rem;overflow:hidden;border:1px solid #E2E8F0;background:#F8FAFC;}
.gi-main{position:relative;cursor:pointer;}
.gi-main-img{width:100%;height:200px;object-fit:contain;display:block;background:#fff;}
.gi-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;background:rgba(0,0,0,.45);color:#fff;font-size:.85rem;font-weight:600;opacity:0;transition:opacity .25s;}
.gi-main:hover .gi-overlay{opacity:1;}
.gi-expand{padding:.75rem;background:#fff;}
.gi-viewer{display:flex;align-items:center;gap:.5rem;justify-content:center;}
.gi-viewer img{max-width:calc(100% - 80px);max-height:300px;object-fit:contain;border-radius:.4rem;}
.gi-nav{background:rgba(249,115,22,.1);border:none;color:#F97316;font-size:1.5rem;padding:.2rem .5rem;border-radius:6px;cursor:pointer;transition:background .2s;line-height:1;}
.gi-nav:hover{background:rgba(249,115,22,.2);}
.gi-counter{text-align:center;font-size:.75rem;color:#94A3B8;margin:.5rem 0;}
.gi-strip{display:flex;gap:.4rem;justify-content:center;flex-wrap:wrap;}
.gi-thumb{width:40px;height:40px;object-fit:cover;border-radius:4px;cursor:pointer;border:2px solid transparent;opacity:.5;transition:all .2s;}
.gi-thumb.active,.gi-thumb:hover{border-color:#F97316;opacity:1;}
.gi-close{display:block;width:100%;text-align:center;margin-top:.5rem;padding:.4rem;background:0;border:1px solid #E2E8F0;border-radius:6px;color:#64748B;font-size:.75rem;cursor:pointer;transition:all .2s;}
.gi-close:hover{background:#F8FAFC;border-color:#CBD5E1;color:#0F172A;}

.gi-wrap{border-radius:.5rem;overflow:hidden;border:1px solid #E2E8F0;background:#F8FAFC;position:relative;}
.gi-cover{position:relative;cursor:pointer;display:block;}
.gi-cover-img{width:100%;height:200px;object-fit:contain;display:block;background:#fff;}
.gi-cover-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.5rem;background:rgba(0,0,0,.45);color:#fff;font-size:.85rem;font-weight:600;opacity:0;transition:opacity .25s;}
.gi-cover:hover .gi-cover-overlay{opacity:1;}

.gallery-overlay-fs{position:fixed;inset:0;z-index:99999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;flex-direction:column;padding:1rem;}
.gallery-close-fs{position:absolute;top:1rem;right:1.5rem;font-size:3rem;color:#fff;cursor:pointer;opacity:.6;line-height:1;z-index:10;transition:opacity .2s;}
.gallery-close-fs:hover{opacity:1;}
.gallery-fs-viewer{display:flex;align-items:center;gap:.75rem;max-width:95vw;}
.gallery-fs-viewer img{max-width:calc(95vw - 100px);max-height:75vh;object-fit:contain;border-radius:.5rem;}
.gallery-fs-nav{background:rgba(255,255,255,.1);border:none;color:#fff;font-size:2rem;padding:.25rem .6rem;border-radius:8px;cursor:pointer;transition:background .25s;line-height:1;}
.gallery-fs-nav:hover{background:rgba(255,255,255,.2);}
.gallery-fs-counter{color:rgba(255,255,255,.5);font-size:.8rem;margin-top:.75rem;}
.gallery-fs-strip{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap;justify-content:center;max-width:90vw;}
.gallery-fs-thumb{width:44px;height:44px;object-fit:cover;border-radius:6px;cursor:pointer;border:2px solid transparent;opacity:.5;transition:all .25s;}
.gallery-fs-thumb.active,.gallery-fs-thumb:hover{border-color:#F97316;opacity:1;}

.gi-card{border-radius:.5rem;overflow:hidden;border:1px solid #E2E8F0;background:#F8FAFC;}
.gi-cover{position:relative;cursor:pointer;display:block;}
.gi-cover-img{width:100%;height:200px;object-fit:contain;display:block;background:#fff;}
.gi-badge{position:absolute;bottom:.5rem;right:.5rem;display:flex;align-items:center;gap:.35rem;background:rgba(0,0,0,.55);color:#fff;padding:.25rem .6rem;border-radius:6px;font-size:.75rem;font-weight:600;pointer-events:none;}