/* Estilos principais da pagina inicial */



/* Avatar & Presence System */
.avatar-wrapper {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    width: 38px;  /* Default size */
    height: 38px;
}

.avatar-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.status-dot {
    position: absolute;
    bottom: 2px;
    right: 2px;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: #404145; /* Offline */
    border: 2px solid #07030d; /* Fundo do site para dar contraste */
    transition: all 0.2s var(--ease);
    z-index: 2;
}

.status-dot--online {
    background: #1dbf73 !important; /* Green */
}

.status-dot--away {
    background: #ffcc00 !important; /* Yellow */
}

.status-dot--offline {
    background: #404145 !important; /* Gray */
}

.header-avatar-initials,
.avatar-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, #3b0d82, #8a05be);
    color: #fff;
    font-weight: 800;
    letter-spacing: 0.02em;
    user-select: none;
    font-size: 0.78rem;
}

/* Plan subscription rings — applied on .avatar-wrapper */
.plan-ring--impulso img,
.plan-ring--impulso .avatar-initials,
.plan-ring--impulso .header-avatar-initials {
    box-shadow: 0 0 0 2.5px #07030d, 0 0 0 5px #8a05be;
}

.plan-ring--pro img,
.plan-ring--pro .avatar-initials,
.plan-ring--pro .header-avatar-initials {
    box-shadow: 0 0 0 2.5px #07030d, 0 0 0 5px #d4af37;
}

*,

*::before,

*::after {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



:root {
    /* Premium Dark Theme - Trampix Redesign */
    --bg: #0b0114;
    --bg-subtle: #140824;
    --surface: #1a0e2e;
    --surface-soft: #221438;
    --border: #2d1b4e;
    --border-strong: #3d2565;
    --border-glow: #6a00ff33;

    --text-primary: #f5f0ff;
    --text-secondary: #c9b8e8;
    --text-muted: #8b7aaa;

    --accent: #6a00ff;
    --accent-strong: #5200cc;
    --accent-soft: #1a0a33;
    --accent-glow: rgba(106, 0, 255, 0.3);

    --success: #34d399;
    --warning: #ffd700;
    --danger: #ef4444;

    /* Metallic Gold Palette */
    --gold: #ffd700;
    --gold-strong: #e6c200;
    --gold-soft: #1a1508;
    --gold-glow: rgba(255, 215, 0, 0.25);
    --gold-dim: #b8960f;

    --silver: #c0c0c0;
    --bronze: #cd7f32;

    /* Glassmorphism */
    --glass-bg: rgba(26, 14, 46, 0.7);
    --glass-border: rgba(106, 0, 255, 0.15);
    --glass-blur: blur(16px);

    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 28px;

    --shadow-xs: 0 2px 8px rgba(0, 0, 0, 0.4);
    --shadow-sm: 0 8px 32px rgba(0, 0, 0, 0.5);
    --shadow-md: 0 16px 48px rgba(0, 0, 0, 0.6);
    --shadow-glow: 0 0 20px var(--accent-glow);

    --ease: cubic-bezier(0.4, 0, 0.2, 1);
}



html {

    scroll-behavior: smooth;

    -webkit-tap-highlight-color: transparent;
    background-color: var(--bg);
    scrollbar-color: #2a203b #0b0114;

}



body {
    font-family: 'Manrope', 'Segoe UI', sans-serif;
    background:
        radial-gradient(circle at 20% 50%, rgba(106, 0, 255, 0.08) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(255, 215, 0, 0.04) 0%, transparent 40%),
        radial-gradient(circle at 40% 80%, rgba(106, 0, 255, 0.06) 0%, transparent 45%),
        linear-gradient(180deg, #0b0114 0%, #140824 50%, #0b0114 100%);
    color: var(--text-primary);
    line-height: 1.55;
    overflow-x: hidden;
    padding-top: 72px;
    padding-bottom: 88px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body::before {
    content: '';
    position: fixed;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: 
        radial-gradient(circle at 50% 50%, rgba(106, 0, 255, 0.03) 0%, transparent 60%),
        radial-gradient(circle at 70% 30%, rgba(255, 215, 0, 0.02) 0%, transparent 50%);
    animation: particleFloat 20s ease-in-out infinite;
    pointer-events: none;
    z-index: 0;
}

@keyframes particleFloat {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    25% { transform: translate(2%, -1%) rotate(1deg); }
    50% { transform: translate(-1%, 2%) rotate(-1deg); }
    75% { transform: translate(1%, 1%) rotate(0.5deg); }
}



a {

    text-decoration: none;

    color: inherit;

    -webkit-tap-highlight-color: transparent;

}



img {

    display: block;

    max-width: 100%;

}



button {

    cursor: pointer;

    border: none;

    background: none;

    font: inherit;

    color: inherit;

    -webkit-tap-highlight-color: transparent;

}



button:focus-visible,

a:focus-visible,

.filter-input:focus-visible,

.filter-select:focus-visible,

.newsletter__input:focus-visible {

    outline: none;

    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.22);

}



[hidden] {

    display: none !important;

}



/* Loading Global */

.field-input--error,
.field-input--error:focus {
    border-color: #ff4d4d !important;
    box-shadow: 0 0 0 3px rgba(255, 77, 77, 0.15) !important;
}

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s, visibility 0.15s;
    background: rgba(138, 5, 190, 0.15);
    overflow: hidden;
}

.loading-overlay.active {
    opacity: 1;
    visibility: visible;
}

.loading-overlay.finishing {
    transition: opacity 0.4s 0.15s, visibility 0.4s 0.15s;
    opacity: 0;
}

.loading-bar {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, #8a05be, #b44dff, #8a05be);
    border-radius: 0 2px 2px 0;
    transition: width 0.3s ease-out;
    box-shadow: 0 0 8px rgba(138, 5, 190, 0.5);
}

.loading-overlay.active .loading-bar {
    animation: loadbar-progress 2.5s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.loading-overlay.finishing .loading-bar {
    width: 100% !important;
    animation: none;
    transition: width 0.2s ease-out;
}

@keyframes loadbar-progress {
    0%   { width: 0%; }
    15%  { width: 35%; }
    40%  { width: 55%; }
    65%  { width: 72%; }
    85%  { width: 82%; }
    100% { width: 88%; }
}

.loading-spinner {
    display: none;
}

@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

.skeleton-shimmer {
    background: linear-gradient(90deg, #0c0614 25%, #1a0f2e 50%, #0c0614 75%) !important;
    background-size: 200% 100% !important;
    animation: shimmer 1.5s ease-in-out infinite !important;
    border-radius: 8px;
    color: transparent !important;
    border-color: transparent !important;
    pointer-events: none;
    user-select: none;
}

.skeleton-card {
    pointer-events: none;
    user-select: none;
}

.skel-line {
    display: block;
    height: 12px;
    border-radius: 6px;
    background: linear-gradient(90deg, #0c0614 25%, #1a0f2e 50%, #0c0614 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skel-circle {
    border-radius: 50%;
    background: linear-gradient(90deg, #0c0614 25%, #1a0f2e 50%, #0c0614 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}

.skel-rect {
    border-radius: 10px;
    background: linear-gradient(90deg, #0c0614 25%, #1a0f2e 50%, #0c0614 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s ease-in-out infinite;
}



/* Mensagens de erro de campo */

.field-error-msg {

    color: var(--danger);

    font-size: 0.8rem;

    margin-top: 4px;

    display: block;

    font-weight: 500;

}



.field-input--error {

    border-color: var(--danger) !important;

}



.body--lock {

    overflow: hidden;

}



.access-notice {

    position: fixed;

    right: 16px;

    bottom: 18px;

    z-index: 220;

    border: 1px solid rgba(212, 175, 55, 0.38);

    background: rgba(22, 13, 36, 0.96);

    color: var(--text-primary);

    border-radius: 12px;

    padding: 10px 14px;

    font-size: 0.82rem;

    box-shadow: var(--shadow-md);

}



::-webkit-scrollbar {

    width: 8px;

    height: 8px;

}



::-webkit-scrollbar-track {

    background: transparent;

}



::-webkit-scrollbar-thumb {

    background: #3d2a5c;

    border-radius: 999px;

}



.accent {

    color: var(--accent);

}



.header__inner,

.search-bar,

.hero,

.section,

.footer {

    width: min(1220px, calc(100% - 28px));

    margin-inline: auto;

}



.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: #07030d;
    border-bottom: 1.5px solid #110820;
    transition: all 0.2s ease;
}

.header--scrolled {
    border-bottom-color: #2a1c3d;
}



.header__inner {

    height: 72px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 16px;

}



.header__logo {

    display: flex;

    align-items: center;

    text-decoration: none;

}



.header__logo-img {

    height: 34px;

    width: auto;

    display: block;

    /* Optical alignment adjustment - nudges the logo slightly up to balance the taller bee icon */

    transform: translateY(-2px);

}



.header__logo-icon {

    font-size: 1.5rem;

    color: var(--accent);

}



.header__logo-text {

    font-family: 'Sora', 'Manrope', sans-serif;

    letter-spacing: -0.02em;

}



.header__actions {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    position: relative;

}



.header__btn {
    width: 42px;
    height: 42px;
    border-radius: 999px;
    border: none;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #a99fc4;
    transition: all 0.2s ease;
    cursor: pointer;
    position: relative;
}

.header__btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #f5f0ff;
}

.header__btn--avatar {
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(138, 5, 190, 0.3);
    background: #0f0819;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.header__btn--avatar .avatar-wrapper {
    width: 100%;
    height: 100%;
}

.desktop-only-btn {
    display: none !important;
}

@media (min-width: 1024px) {
    .desktop-only-btn {
        display: inline-flex !important;
    }
}

.header__btn--menu {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
}

.header__btn--menu:hover {
    background: transparent !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}



.header__btn--menu .material-symbols-rounded,
.header__btn--menu .bi {
    font-size: 1.8rem !important;
    color: #f5f0ff !important;
}

.header__btn .bi {
    font-size: 1.32rem;
    line-height: 1;
    color: currentColor;
}

.header__btn--notif .bi,
.header__actions > a.header__btn .bi {
    font-size: 1.38rem;
}

.header__btn:hover .material-symbols-rounded,
.header__btn:hover .bi,

.header__btn:focus-visible .material-symbols-rounded,
.header__btn:focus-visible .bi {

    color: var(--gold);

}



.header__btn:focus-visible,

.header__btn[aria-expanded='true'] {

    border-color: var(--gold);

    box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.12);

}



.header__badge {

    position: absolute;

    top: 5px;

    right: 5px;

    width: 16px;

    height: 16px;

    border-radius: 50%;

    background: var(--danger);

    color: #fff;

    font-size: 0.56rem;

    font-weight: 800;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.avatar-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 0;
    width: 270px;
    background: #1e1430;
    border: none;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.6);
    z-index: 1001;
    overflow: hidden;
    color: #f5f0ff;
    animation: popIn 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.avatar-popover__user {
    padding: 20px 24px;
    border-bottom: 1px solid #2e2045;
}

.avatar-popover__user strong {
    display: block;
    font-size: 1rem;
    color: #f5f0ff;
    margin-bottom: 2px;
}

.avatar-popover__user span {
    font-size: 0.85rem;
    color: #a99fc4;
}

.avatar-popover__action {
    padding: 16px 24px;
}

/* Segmented Control Identity Switcher — Compact pill-style toggle */
.identity-switcher {
    display: flex;
    background: rgba(0, 0, 0, 0.3);
    padding: 3px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    gap: 1px;
    max-width: 280px;
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    flex-shrink: 0;
}

.identity-btn {
    flex: 1 1 0;
    min-width: 0;
    padding: 7px 12px;
    border: none;
    background: transparent;
    color: #a99fc4;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: background 120ms ease, color 120ms ease;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
    font-family: inherit;
    line-height: 1.15;
    min-height: 34px;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
}

.identity-btn:hover:not(.active):not(:disabled) {
    color: #d4c4f0;
    background: rgba(255, 255, 255, 0.04);
}

.identity-btn.active {
    background: #8a05be;
    color: #fff;
    box-shadow: 0 1px 4px rgba(138, 5, 190, 0.3);
}

.identity-btn:disabled {
    cursor: not-allowed;
    opacity: 0.5;
}

.identity-switcher--mobile {
    margin-top: 16px;
    width: 100%;
    max-width: 100%;
}

@media (min-width: 1024px) {
    .avatar-popover .identity-switcher {
        max-width: 240px;
    }
}

.avatar-popover__links {
    padding: 8px 0;
}

.avatar-popover__links a {
    display: block;
    padding: 12px 24px;
    text-decoration: none;
    color: #f5f0ff;
    font-size: 0.95rem;
    font-weight: 500;
}

.avatar-popover__links a:hover {
    background: rgba(255, 255, 255, 0.03);
    color: #8a05be;
}

.avatar-popover__foot {
    border-top: 1px solid #2e2045;
    padding: 8px 0;
}

.avatar-popover__foot a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 24px;
    text-decoration: none;
    color: #a99fc4;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.avatar-popover__foot a:hover {
    color: #f5f0ff;
}

.notifications-popover {
    position: absolute;
    top: calc(100% + 12px);
    right: 48px;
    width: min(360px, calc(100vw - 28px));
    border: 1px solid #2e2045;
    border-radius: 14px;
    background: #1e1430;
    box-shadow: 0 10px 40px rgba(0,0,0,0.4);
    z-index: 120;
    overflow: hidden;
    transition: opacity 0.2s, transform 0.2s;
}

/* Novo Estilo Desktop Nav */
.desktop-nav {
    display: none;
    align-items: center;
    gap: 24px;
    margin-left: 32px;
    flex: 1;
}

.desktop-nav a {
    color: #a99fc4;
    text-decoration: none;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.desktop-nav a:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #f5f0ff;
}

/* Dropdown de Navegação Desktop */
.nav-dropdown {
    position: relative;
    display: inline-block;
}

.nav-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    cursor: default;
    color: #a99fc4;
    font-size: 0.95rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 999px;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.nav-dropdown:hover .nav-dropdown__trigger {
    background: rgba(255, 255, 255, 0.05);
    color: #f5f0ff;
}

.nav-dropdown__content {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #1e1430;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    padding: 8px 0;
    z-index: 1000;
    transform: translateY(10px);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.nav-dropdown:hover .nav-dropdown__content {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
}

.nav-dropdown__content a {
    display: block;
    padding: 12px 20px !important;
    color: #a99fc4 !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-decoration: none;
    background: transparent !important;
    border-radius: 0 !important;
    text-align: left;
}

.nav-dropdown__content a:hover {
    background: rgba(255, 255, 255, 0.05) !important;
    color: #f5f0ff !important;
}

@media (min-width: 1024px) {
    .desktop-nav { display: flex; }
}

.header__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.mobile-only-btn {
    display: flex;
}

@media (min-width: 1024px) {
    .mobile-only-btn { display: none !important; }
}



.notifications-popover__head {

    height: 52px;

    border-bottom: 1px solid #2e2045;

    padding: 0 14px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.notifications-popover__head strong {

    font-family: 'Sora', 'Manrope', sans-serif;

    font-size: 0.98rem;

    color: #f0e8f8;

}



.notifications-popover__head a {

    color: #b8a8d0;

    font-size: 0.9rem;

    text-decoration: underline;

}



.notifications-popover__head a:hover {

    color: var(--accent);

}



.notifications-popover__list {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 10px 12px 8px;
    max-height: 360px;
    overflow-y: auto;
}



.notification-item {
    border: 1px solid #2e2045;
    border-left: 3px solid transparent;
    border-radius: 10px;
    background: #150d24;
    padding: 8px 12px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.notification-item:hover {
    border-color: #3d2660;
    background: #1b1033;
}

.notification-item--unread {
    border-left-color: #8a05be;
    background: rgba(138, 5, 190, 0.1);
}

.notification-item__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.notification-item__title {
    font-weight: 700;
    font-size: 0.85rem;
    color: #f3e8ff;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.notification-item__time {
    font-size: 0.72rem;
    color: #6b5a8a;
    flex-shrink: 0;
    white-space: nowrap;
}

.notification-item__message {
    color: #8a7aaa;
    font-size: 0.8rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}



.notifications-popover__empty {

    min-height: 54px;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #8a78a5;

    font-size: 0.9rem;

}

.global-notification-stack {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 12000;
    display: grid;
    gap: 10px;
    width: min(360px, calc(100vw - 28px));
    pointer-events: none;
}

.global-notification-toast {
    display: grid;
    grid-template-columns: 38px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    min-height: 68px;
    padding: 12px;
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    background: rgba(20, 12, 32, 0.98);
    color: #f5f0ff;
    text-decoration: none;
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42);
    pointer-events: auto;
    animation: globalToastIn 180ms ease-out;
}

.global-notification-toast--leaving {
    animation: globalToastOut 180ms ease-in forwards;
}

.global-notification-toast__icon {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(212, 175, 55, 0.12);
    color: var(--gold);
    font-size: 1.18rem !important;
    line-height: 1;
    font-variation-settings: "FILL" 0, "wght" 600, "GRAD" 0, "opsz" 24;
    overflow: hidden;
    text-align: center;
}

.global-notification-toast__body {
    min-width: 0;
    display: grid;
    gap: 2px;
}

.global-notification-toast__body strong {
    font-size: 0.9rem;
    color: #fff;
}

.global-notification-toast__body span {
    font-size: 0.8rem;
    color: #cbb9dd;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

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

@media (max-width: 760px) {
    .global-notification-stack {
        right: 12px;
        bottom: calc(78px + env(safe-area-inset-bottom));
        width: calc(100vw - 24px);
    }
}



.account-menu {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: auto;
    width: 300px;
    height: 100dvh;
    border-radius: 0;
    z-index: 10001;
    background: #0f0819;
    font-family: 'Macan', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    display: flex;
    flex-direction: column;
    border: none;
    padding: 0;
    box-shadow: 25px 0 80px rgba(0,0,0,0.9);
    overflow: hidden;
}

.account-menu__body {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.account-menu__body::-webkit-scrollbar {
    width: 4px;
}

.account-menu__body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
}

.account-menu.active {
    transform: translateX(0);
    visibility: visible;
}

/* Overlay para o drawer mobile */
body:has(.account-menu.active)::after {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 10000;
    animation: fadeIn 0.4s ease;
    pointer-events: auto;
}

.account-menu a {
    font-size: 1.1rem;
    font-weight: 500;
    color: #f5f0ff;
    text-decoration: none;
    padding: 14px 24px;
    display: block;
    transition: all 0.2s;
    letter-spacing: -0.01em;
}

.account-menu a:hover {
    color: var(--gold);
}

.account-menu__head h3 {
    font-size: 1.4rem;
    font-weight: 800;
    margin-bottom: 4px;
}

.account-menu__head p {
    font-size: 0.9rem;
    opacity: 0.7;
}



.account-menu__head {
    padding: 32px 24px 24px;
    border-bottom: none;
}



.account-menu__head strong {

    display: block;

    font-size: 1rem;

    color: #f0e8f8;

    font-family: 'Sora', 'Manrope', sans-serif;

}



.account-menu__head span {

    display: block;

    margin-top: 2px;

    font-size: 0.79rem;

    color: #8a78a5;

    font-weight: 700;

}



.account-menu__section {
    padding: 16px 0;
}

.account-menu__section h3 {
    padding: 0 24px;
    margin-bottom: 8px;
    color: #a99fc4;
    font-size: 1rem;
    font-weight: 700;
}



.account-menu__section h3 {

    font-size: 0.8rem;

    color: #c8b8e0;

    font-family: 'Sora', 'Manrope', sans-serif;

}



.account-menu__grid {
    display: flex;
    flex-direction: column;
    margin-top: 4px;
}

.account-menu__grid a {
    font-size: 1.1rem;
    font-weight: 500;
    color: #f5f0ff;
    padding: 14px 24px;
    display: block;
    transition: all 0.2s;
    position: relative;
}

.account-menu__grid a:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 24px;
    right: 24px;
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
}

.account-menu__grid a:hover {
    color: var(--gold);
    background: rgba(255, 255, 255, 0.03);
}

.account-menu__foot {
    margin-top: auto;
    padding: 24px;
    padding-bottom: 120px;
    border-top: none;
}

.account-menu__logout {
    font-size: 0.95rem;
    font-weight: 500;
    color: #a99fc4 !important;
    padding: 12px 24px;
    display: block;
    transition: color 0.2s;
    text-align: left;
}

.account-menu__logout:hover {
    color: #ff4d4d !important;
}



.account-menu__foot {

    padding: 10px 2px 2px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.lang-switch {

    display: flex;

    align-items: center;

    gap: 8px;

}



.lang-switch span {

    color: #8a78a5;

    font-size: 0.8rem;

    font-weight: 700;

}



.lang-switch div {

    display: inline-flex;

    gap: 4px;

}



.lang-switch__btn {

    min-width: 26px;

    height: 22px;

    border-radius: 999px;

    padding: 0 8px;

    background: var(--gold-soft);

    color: var(--gold);

    border: 1px solid rgba(212, 175, 55, 0.35);

    font-size: 0.72rem;

    font-weight: 800;

}



.lang-switch__btn:hover {

    background: rgba(212, 175, 55, 0.16);

    color: #f4d97c;

}



.account-menu__logout {

    color: #b8a8d0;

    font-size: 0.84rem;

    font-weight: 800;

}



.account-menu__logout:hover {

    color: #d4c0f0;

}



.search-bar {

    max-height: 0;

    overflow: hidden;

    transition: max-height 0.33s var(--ease), padding-bottom 0.33s var(--ease);

}



.search-bar--open {

    max-height: 72px;

    padding-bottom: 12px;

}



.search-bar__inner {

    height: 48px;

    border-radius: 12px;

    border: 1px solid var(--border);

    background: var(--surface);

    box-shadow: var(--shadow-xs);

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 0 14px;

}



.search-bar__icon,

.search-bar__close .material-symbols-rounded {

    font-size: 1.15rem;

    color: var(--text-muted);

}



.search-bar__input {

    flex: 1;

    border: 0;

    outline: none;

    background: transparent;

    color: var(--text-primary);

    font-size: 0.93rem;

    min-width: 0;

}



.search-bar__input::placeholder {

    color: #6a5880;

}



.search-bar__close {

    width: 30px;

    height: 30px;

    border-radius: 999px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.search-bar__close:hover {

    background: var(--bg-subtle);

}



.search-bar__close:hover .material-symbols-rounded,

.search-bar__close:focus-visible .material-symbols-rounded {

    color: var(--gold);

}



.search-bar__close:focus-visible {

    box-shadow: inset 0 0 0 1px rgba(212, 175, 55, 0.35);

}



.hero {

    margin-top: 92px;

    padding-top: 14px;

}



.hero__bg {

    display: none;

}



.hero__content {

    background: linear-gradient(145deg, #160d24, #1d1330 68%);

    border: 1px solid var(--border);

    border-radius: var(--radius-xl);

    padding: clamp(20px, 4vw, 36px);

    box-shadow: var(--shadow-sm);

    position: relative;

    overflow: hidden;

}



.hero__content::after {

    content: '';

    position: absolute;

    width: 320px;

    height: 320px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(138, 5, 190, 0.16), rgba(138, 5, 190, 0));

    top: -170px;

    right: -120px;

    pointer-events: none;

}



.hero__title {

    margin-top: 0;

    font-family: 'Sora', 'Manrope', sans-serif;

    font-size: clamp(1.5rem, 4.1vw, 2.3rem);

    line-height: 1.23;

    max-width: 700px;

    letter-spacing: -0.02em;

}



.hero__highlight {

    background: linear-gradient(90deg, #d4af37, #fdf6d5, #d4af37, #d4af37);

    background-size: 300% auto;

    color: transparent;

    -webkit-background-clip: text;

    background-clip: text;

    animation: premiumTextShine 4s linear infinite;

    display: inline-block;

    padding-right: 4px;

}



@keyframes premiumTextShine {

    to { background-position: 300% center; }

}



.hero__subtitle {

    margin-top: 10px;

    color: var(--text-secondary);

    max-width: 680px;

    font-size: 0.97rem;

}



.hero__cta {

    margin-top: 18px;

    display: flex;

    flex-wrap: wrap;

    gap: 10px;

}



.hero__cta-btn {

    min-width: 190px;

}



.hero__cta-btn--premium {

    position: relative;

    overflow: hidden;

    isolation: isolate;

    min-width: 260px;

    height: 48px;

    font-size: 0.94rem;

    padding-inline: 24px;

}



.hero__cta-btn--premium::after {

    content: '';

    position: absolute;

    top: -130%;

    left: -35%;

    width: 34%;

    height: 300%;

    background: linear-gradient(115deg, rgba(255, 255, 255, 0), rgba(255, 250, 225, 0.68), rgba(255, 255, 255, 0));

    transform: translateX(-260%) rotate(24deg);

    animation: hero-cta-shine 4.6s var(--ease) infinite;

    pointer-events: none;

}



.hero__note {

    margin-top: 10px;

    color: #b9a5d1;

    font-size: 0.82rem;

    font-weight: 600;

}



.hero__visual {

    position: absolute;

    right: 30px;

    top: 34px;

    width: 300px;

    height: 250px;

    pointer-events: none;

}



.hero__visual-glow {

    position: absolute;

    inset: 0;

    border-radius: 42% 58% 50% 50% / 52% 44% 56% 48%;

    background:

        radial-gradient(circle at 32% 38%, rgba(138, 5, 190, 0.28), rgba(138, 5, 190, 0) 62%),

        radial-gradient(circle at 70% 62%, rgba(212, 175, 55, 0.14), rgba(212, 175, 55, 0) 58%);

    filter: blur(1px);

    transform-origin: 50% 50%;

    animation: hero-visual-float 11s ease-in-out infinite;

}



.hero__visual-card {

    position: absolute;

    right: 18px;

    top: 44px;

    width: 225px;

    border-radius: 16px;

    border: 1px solid #4a3668;

    background: linear-gradient(160deg, rgba(33, 19, 52, 0.98), rgba(25, 14, 40, 0.98));

    padding: 14px;

    box-shadow: var(--shadow-sm);

    z-index: 1;

    opacity: 0;

    animation: hero-visual-cycle 13.5s ease-in-out infinite;

}



.hero__visual-card--a {

    animation-delay: 0s;

}



.hero__visual-card--b {

    animation-delay: 4.5s;

}



.hero__visual-card--c {

    animation-delay: 9s;

}



.hero__visual-card strong {

    display: block;

    margin-top: 0;

    color: #f4ecfb;

    font-size: 0.96rem;

    font-family: 'Sora', 'Manrope', sans-serif;

}



.hero__visual-card p {

    margin-top: 5px;

    color: #c9b7dc;

    font-size: 0.78rem;

    line-height: 1.4;

}



.hero__visual-kpi {

    margin-top: 12px;

    display: grid;

    gap: 8px;

}



.hero__visual-kpi-row {

    min-height: 29px;

    border-radius: 10px;

    border: 1px solid rgba(212, 175, 55, 0.16);

    background: rgba(212, 175, 55, 0.06);

    padding: 0 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.hero__visual-kpi-row span {

    color: #d4c3e6;

    font-size: 0.72rem;

}



.hero__visual-kpi-row strong {

    color: #e6c979;

    font-size: 0.76rem;

    font-weight: 800;

}



.hero__visual-leads {

    margin-top: 12px;

    list-style: none;

    display: grid;

    gap: 8px;

}



.hero__visual-leads li {

    min-height: 29px;

    border-radius: 10px;

    border: 1px solid rgba(138, 5, 190, 0.25);

    background: rgba(138, 5, 190, 0.12);

    padding: 0 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.hero__visual-leads span {

    color: #d6c5e8;

    font-size: 0.72rem;

}



.hero__visual-leads strong {

    color: #f1d277;

    font-size: 0.72rem;

    font-weight: 800;

}



.hero__visual-funnel {

    margin-top: 12px;

    display: grid;

    gap: 8px;

}



.hero__visual-funnel div {

    min-height: 29px;

    border-radius: 10px;

    border: 1px solid rgba(212, 175, 55, 0.16);

    background: linear-gradient(90deg, rgba(138, 5, 190, 0.16), rgba(212, 175, 55, 0.08));

    padding: 0 10px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.hero__visual-funnel span {

    color: #d6c5e8;

    font-size: 0.72rem;

}



.hero__visual-funnel strong {

    color: #f1d277;

    font-size: 0.76rem;

    font-weight: 800;

}



@keyframes hero-cta-shine {

    0%,

    64% {

        transform: translateX(-260%) rotate(24deg);

    }



    100% {

        transform: translateX(360%) rotate(24deg);

    }

}



@keyframes hero-visual-float {

    0% {

        transform: translate(0, 0) scale(1) rotate(0deg);

        border-radius: 42% 58% 50% 50% / 52% 44% 56% 48%;

    }



    33% {

        transform: translate(-10px, 7px) scale(1.04) rotate(-2deg);

        border-radius: 50% 50% 58% 42% / 44% 56% 46% 54%;

    }



    66% {

        transform: translate(8px, -9px) scale(0.98) rotate(2deg);

        border-radius: 56% 44% 46% 54% / 57% 43% 55% 45%;

    }



    100% {

        transform: translate(0, 0) scale(1) rotate(0deg);

        border-radius: 42% 58% 50% 50% / 52% 44% 56% 48%;

    }

}



@keyframes hero-visual-cycle {

    0%,

    30% {

        opacity: 1;

        transform: translateY(0);

    }



    33%,

    97% {

        opacity: 0;

        transform: translateY(6px);

    }



    100% {

        opacity: 1;

        transform: translateY(0);

    }

}



.hero__search {

    margin-top: 22px;

    min-height: 56px;

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 14px;

    display: flex;

    align-items: center;

    gap: 10px;

    padding: 7px 8px 7px 14px;

}



.hero__search:focus-within {

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);

}



.hero__search-icon {

    font-size: 1.18rem;

    color: #8a78a5;

    flex-shrink: 0;

}



.hero__search-input {

    border: 0;

    outline: none;

    background: transparent;

    color: var(--text-primary);

    flex: 1;

    min-width: 0;

    font-size: 0.95rem;

}



.hero__search-input::placeholder {

    color: #6a5880;

}



.hero__search-btn {

    height: 42px;

    padding: 0 18px;

    border-radius: 10px;

    background: var(--gold);

    color: #140d05;

    font-weight: 700;

    font-size: 0.9rem;

    transition: background 0.2s var(--ease);

}



.hero__search-btn:hover {

    background: var(--gold-strong);

}



.hero__stats {

    margin-top: 18px;

    display: grid;

    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 10px;

}



.hero__stat {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 12px;

    padding: 12px;

    display: flex;

    flex-direction: column;

    gap: 2px;

}



.hero__stat-value {

    display: inline-flex;

    align-items: baseline;

    gap: 2px;

}



.hero__stat-number {

    color: #f0e8f8;

    font-size: 1.35rem;

    font-weight: 800;

    line-height: 1;

}



.hero__stat-suffix {

    color: #f0e8f8;

    font-size: 1.28rem;

    font-weight: 700;

    line-height: 1;

}



.hero__stat-label {

    color: var(--text-muted);

    font-size: 0.79rem;

    font-weight: 700;

}



.hero__stat-divider {

    display: none;

}



.section {

    padding-top: 36px;

}



.section__header {

    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 14px;

    margin-bottom: 16px;

}



.section__header--center {

    justify-content: center;

    text-align: center;

}



.section__title {

    font-family: 'Sora', 'Manrope', sans-serif;

    font-size: clamp(1.13rem, 2.6vw, 1.55rem);

    letter-spacing: -0.01em;

    color: #f0e8f8;

}



.section__subtitle {

    margin-top: 4px;

    color: var(--text-muted);

    font-size: 0.9rem;

}



.section__link {

    display: inline-flex;

    align-items: center;

    gap: 3px;

    color: var(--accent);

    font-size: 0.88rem;

    font-weight: 700;

    white-space: nowrap;

}



.section__link .material-symbols-rounded {

    font-size: 1rem;

}



.section__link:hover {

    color: var(--accent-strong);

}



.marketplace {

    padding-top: 24px;

}



.marketplace__layout {

    display: grid;

    gap: 14px;

}



.marketplace__filters {

    display: none;

}



.filter-panel {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 16px;

    padding: 14px;

    box-shadow: var(--shadow-xs);

    position: relative;

}



.filter-panel__title {

    font-family: 'Sora', 'Manrope', sans-serif;

    font-size: 1rem;

    letter-spacing: -0.01em;

    color: #f0e8f8;

    margin-bottom: 12px;

}



.filter-panel__close {

    display: none;

}



.filter-group {

    padding-top: 12px;

    border-top: 1px solid #2e2045;

}



.filter-group:first-of-type {

    padding-top: 0;

    border-top: 0;

}



.filter-group+.filter-group {

    margin-top: 12px;

}



.filter-group__title {

    font-size: 0.83rem;

    color: #b8a8d0;

    margin-bottom: 8px;

}



.filter-check {

    display: flex;

    align-items: center;

    gap: 8px;

    font-size: 0.85rem;

    color: #d4c0f0;

    margin-top: 6px;

}



.filter-check input[type='checkbox'] {

    width: 15px;

    height: 15px;

    accent-color: var(--gold);

}



.filter-input,

.filter-select {

    width: 100%;

    height: 40px;

    border-radius: 10px;

    border: 1px solid #3d2a5c;

    background: #241838;

    padding: 0 12px;

    font-size: 0.84rem;

    color: #f0e8f8;

    outline: none;

}



.filter-input:focus,

.filter-select:focus {

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);

}



.filter-pills {

    display: flex;

    flex-wrap: wrap;

    gap: 7px;

}



.filter-pill {

    height: 32px;

    border-radius: 999px;

    border: 1px solid rgba(212, 175, 55, 0.32);

    background: #08060e;

    color: var(--gold);

    font-size: 0.79rem;

    font-weight: 700;

    padding: 0 12px;

}



.filter-pill--active {

    border-color: var(--gold);

    background: #08060e;

    color: #f4d97c;

}



.marketplace__results {

    min-width: 0;

}

/* Marketplace Tabs */
.marketplace-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid var(--border);
}

.marketplace-tab {
    flex: 1;
    padding: 14px 0;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.marketplace-tab:hover {
    color: var(--gold);
}

.marketplace-tab--active {
    border-bottom-color: var(--accent);
    color: var(--accent);
    font-weight: 700;
}

.marketplace-tab .material-symbols-rounded {
    font-size: 1.2rem;
}

.marketplace-tab__external-icon {
    font-size: 0.9rem;
    opacity: 0.5;
}

.filters-backdrop {

    display: none;

}



.results-toolbar {

    border: none;

    border-radius: 12px;

    background: transparent;

    display: flex;

    align-items: center;

    gap: 8px;

    padding: 0;

}



.results-search {

    display: flex;

    align-items: center;

    gap: 10px;

    min-width: 0;
    flex: 1;

    min-height: 44px;

    border: 1px solid var(--border);

    border-radius: 12px;

    background: rgba(31, 18, 49, 0.72);

    padding: 0 12px;

}



.results-search:focus-within {

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.14);

}



.results-search__icon {

    font-size: 1.05rem;

    color: #8a78a5;

    flex-shrink: 0;

}



.results-search input {

    border: 0;

    outline: 0;

    background: transparent;

    width: 100%;

    min-width: 0;

    font-size: 0.9rem;

    color: #f0e8f8;

}



.results-search input::placeholder {

    color: #6a5880;

}



.results-toolbar__actions {

    display: flex;

    align-items: center;

    gap: 8px;

}



.results-toolbar__action-btn {

    min-width: 0;
    width: 40px;
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    gap: 8px;

}



.results-toolbar__action-btn .material-symbols-rounded { font-size: 1.5rem; }



.results-toolbar__filter[aria-expanded='true'] {

    border-color: var(--gold);

    background: rgba(212, 175, 55, 0.16);

    color: var(--gold);

}



.marketplace__filters--open {

    display: block;

}



.marketplace__filters--open .filter-panel {

    margin-bottom: 10px;

}



.results-chips {

    margin-top: 10px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.results-chip {

    display: inline-flex;

    align-items: center;

    gap: 5px;

    height: 30px;

    padding: 0 10px;

    border-radius: 999px;

    border: 1px solid #6b48a0;

    background: linear-gradient(180deg, rgba(104, 68, 157, 0.32), rgba(82, 53, 129, 0.32));

    color: #f2eaff;

    font-size: 0.76rem;

    font-weight: 700;

}



.results-chip button {

    line-height: 1;

    color: #eadbff;

    width: 16px;

    height: 16px;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.results-chip button .material-symbols-rounded {

    font-size: 0.95rem;

}



.results-list {

    margin-top: 12px;

    display: grid;

    gap: 12px;

}



.data-empty {

    border: none;

    border-radius: 14px;

    background: transparent;

    min-height: 130px;

    padding: 14px;

    display: grid;

    place-items: center;

    gap: 6px;

    text-align: center;

}



.data-empty .material-symbols-rounded {

    color: #d4c0f2;

    font-size: 1.35rem;

}



.data-empty p {

    color: #b8a8d0;

    font-size: 0.84rem;

    max-width: 520px;

}



.service-result {
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: #0f071a;
    border-radius: 14px;
    padding: 20px 22px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.service-result:hover {
    border-color: rgba(212, 175, 55, 0.25);
    background: #130a1e;
}



.service-result__head {

    display: grid;

    gap: 8px;

}



.service-result__category {

    color: #8a78a5;

    font-size: 0.75rem;

    font-weight: 700;

}



.service-result__title {

    font-family: 'Sora', 'Manrope', sans-serif;

    font-size: clamp(1rem, 2.2vw, 1.3rem);

    line-height: 1.3;

    letter-spacing: -0.01em;

    color: #f0e8f8;

}



.service-result__title-link {

    color: inherit;

    text-decoration: none;

}



.service-result__title-link:hover,

.service-result__title-link:focus-visible {

    text-decoration: underline;

    text-underline-offset: 3px;

    text-decoration-thickness: 1.5px;

}



.service-result__meta {

    margin-top: 4px;

    color: #8a78a5;

    font-size: 0.8rem;

}



.service-result__price-wrap {

    background: transparent;

    border: 0;

    border-radius: 0;

    padding: 0;

    justify-self: start;

    min-width: 0;

    text-align: right;

}



.service-result__price-label {

    display: block;

    font-size: 0.72rem;

    color: #c9b7dc;

}



.service-result__price {

    display: block;

    color: var(--gold);

    font-size: 1.2rem;

    line-height: 1.1;

    font-weight: 800;

}



.service-result__desc {

    margin-top: 11px;

    color: #b8a8d0;

    font-size: 0.86rem;

}



.service-result__tags {

    margin-top: 11px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.service-result .tag {

    background: rgba(212, 175, 55, 0.1);

    border: none;

    color: var(--gold);

}



.service-result .tag:hover,

.service-result .tag:focus-visible {

    background: rgba(212, 175, 55, 0.2);

    color: #f4d97c;

}



.service-result__footer {

    margin-top: 13px;

    padding-top: 12px;

    border-top: 1px solid #2e2045;

    display: grid;

    gap: 10px;

}



.service-result__provider {

    display: flex;

    align-items: center;

    gap: 10px;

}



.service-result__avatar {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    object-fit: cover;

    border: 1px solid #3d2a5c;

}



.service-result__provider strong {

    display: block;

    color: #f0e8f8;

    font-size: 0.9rem;

}



.service-result__provider span {

    color: #8a78a5;

    font-size: 0.78rem;

}



.service-result__actions {

    display: flex;

    gap: 8px;

    align-items: stretch;

}



.service-result__actions .btn {

    flex: 1 1 0;

    min-width: 0;

    height: 42px !important;

    font-size: 0.88rem;

    border-radius: 10px;

    background: #08060e;

    border: 1px solid rgba(212, 175, 55, 0.35);

    color: var(--gold);

}



.service-result__actions .btn:hover {

    background: rgba(212, 175, 55, 0.12);

    border-color: var(--gold);

    color: #f4d97c;

}



.service-result__actions .btn--primary {

    background: var(--gold);

    color: #140d05;

    border-color: #dcbf67;

}



.service-result__actions .btn--primary:hover {

    background: var(--gold-strong);

    border-color: #f0d988;

    color: #140d05;

}



.categories__grid {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

}



.category-card {

    border: 1px solid var(--border);

    background: var(--surface);

    border-radius: var(--radius-md);

    padding: 14px;

    display: flex;

    flex-direction: column;

    gap: 10px;

    min-height: 136px;

    transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease);

}



.category-card:hover,
.category-card:active {
    border-color: #3d2a5c;
    box-shadow: var(--shadow-sm);
}



.category-card__icon-wrap {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: var(--accent-soft);

    border: 1px solid #3d2a5c;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.category-card__icon-wrap .material-symbols-rounded {

    font-size: 1.33rem;

    color: var(--accent);

}



.category-card__name {

    font-size: 0.97rem;

    font-weight: 800;

    color: #f0e8f8;

}



.category-card__count {

    color: var(--text-muted);

    font-size: 0.82rem;

    margin-top: auto;

}



.featured__carousel {

    display: grid;

    grid-auto-flow: column;

    grid-auto-columns: minmax(266px, 1fr);

    gap: 14px;

    overflow-x: auto;

    padding: 2px 2px 10px;

    scroll-snap-type: x mandatory;

    scroll-padding-inline: 2px;

}



.featured__carousel::-webkit-scrollbar {

    height: 8px;

}



.provider-card {

    background: var(--surface);

    border: 1px solid var(--border);

    border-radius: 16px;

    overflow: hidden;

    box-shadow: var(--shadow-xs);

    scroll-snap-align: start;

    transition: border-color 0.22s var(--ease), box-shadow 0.22s var(--ease), transform 0.22s var(--ease);

}



.provider-card:hover {
    border-color: #3d2a5c;
    box-shadow: var(--shadow-sm);
}



.provider-card__img-wrap {

    position: relative;

}



.provider-card__img {

    width: 100%;

    aspect-ratio: 16 / 10;

    object-fit: cover;

    border-top: 1px solid #2e2045;

    border-bottom: 1px solid #2e2045;

}



.provider-card__verified {

    position: absolute;

    right: 12px;

    bottom: 12px;

    width: 30px;

    height: 30px;

    border-radius: 50%;

    background: var(--surface);

    border: 1px solid #3d2a5c;

    color: var(--accent);

    display: inline-flex;

    align-items: center;

    justify-content: center;

    box-shadow: var(--shadow-xs);

}



.provider-card__verified .material-symbols-rounded {

    font-size: 1.02rem;

}



.provider-card__info {

    padding: 14px;

}



.provider-card__name {

    font-size: 1.04rem;

    font-weight: 800;

    color: #f0e8f8;

}



.provider-card__role {

    margin-top: 3px;

    font-size: 0.86rem;

    color: var(--text-secondary);

}



.provider-card__rating {

    margin-top: 10px;

    display: flex;

    align-items: center;

    gap: 8px;

    flex-wrap: wrap;

}



.stars {

    display: inline-flex;

    gap: 1px;

}



.star--filled,

.star--half {

    font-size: 1.02rem;

    color: #c9a030;

}



.provider-card__rating-text {

    color: var(--text-muted);

    font-size: 0.8rem;

}



.provider-card__tags {

    margin-top: 12px;

    display: flex;

    flex-wrap: wrap;

    gap: 8px;

}



.tag {

    display: inline-flex;

    align-items: center;

    padding: 6px 12px;

    border-radius: 999px;

    border: 1px solid rgba(212, 175, 55, 0.34);

    background: #08060e;

    font-size: 0.75rem;

    font-weight: 700;

    color: var(--gold);

    transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);

}



.tag:hover,

.tag:focus-visible {

    background: rgba(212, 175, 55, 0.14);

    border-color: rgba(212, 175, 55, 0.45);

    color: #f4d97c;

}



.provider-card__footer {

    margin-top: 12px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 10px;

}



.provider-card__price {

    font-size: 0.82rem;

    color: var(--text-muted);

}



.provider-card__price strong {

    color: #f0e8f8;

    font-size: 1rem;

}

.material-symbols-rounded {
    font-family: "Material Symbols Rounded";
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    font-feature-settings: "liga";
    -webkit-font-smoothing: antialiased;
    vertical-align: middle;
}

.service-result__activity,
.provider-card__activity {
    margin-top: 10px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.activity-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: #cabbd8;
    font-size: 0.74rem;
    font-weight: 700;
}

.activity-pill .material-symbols-rounded {
    font-size: 0.95rem;
}

.activity-pill--online {
    color: #9ee2ba;
    border-color: rgba(77, 182, 125, 0.18);
    background: rgba(77, 182, 125, 0.08);
}

.activity-pill--response {
    color: #e6d59c;
    border-color: rgba(212, 175, 55, 0.18);
    background: rgba(212, 175, 55, 0.08);
}

.readiness-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 16px;
    border: 1px solid rgba(252, 196, 25, 0.25);
    border-radius: 12px;
    background: rgba(252, 196, 25, 0.08);
}

.readiness-banner__content {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0; /* Para permitir truncagem de texto se precisar */
}

.readiness-banner__content .material-symbols-rounded {
    color: var(--gold);
    font-size: 1.3rem;
    flex-shrink: 0;
}

.readiness-banner__copy {
    color: #e5d9f0;
    font-size: 0.85rem;
    line-height: 1.4;
}

.readiness-banner__copy strong {
    font-weight: 700;
    color: var(--gold);
    margin-right: 4px;
}

.readiness-banner__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.btn-close-banner {
    background: transparent;
    border: none;
    color: #a99fc4;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: 6px;
    transition: background 0.2s ease, color 0.2s ease;
}

.btn-close-banner:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.btn-close-banner .material-symbols-rounded {
    font-size: 1.1rem;
}

main > .readiness-banner {
    margin-bottom: 18px;
}

.inbox-app > .readiness-banner {
    grid-column: 1 / -1;
    align-self: start;
    margin-bottom: 0;
}

@media (max-width: 720px) {
    .readiness-banner {
        flex-direction: column;
        align-items: flex-start;
        padding: 12px;
        gap: 10px;
    }
    
    .readiness-banner__actions {
        width: 100%;
        justify-content: flex-end;
    }
}



.carousel-dots {

    margin-top: 12px;

    display: flex;

    justify-content: center;

    gap: 8px;

}



.carousel-dots__dot {

    width: 8px;

    height: 8px;

    border-radius: 999px;

    background: #3d2a5c;

    transition: width 0.2s var(--ease), background 0.2s var(--ease);

}



.carousel-dots__dot--active {

    width: 26px;

    background: var(--accent);

}



.btn {

    height: 40px;

    padding: 0 15px;

    border-radius: 10px;

    font-size: 0.84rem;

    font-weight: 800;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 7px;

    white-space: nowrap;

    transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);

}



.btn .material-symbols-rounded {

    display: flex;

    align-items: center;

    justify-content: center;

}



.btn:hover {

    transform: translateY(-1px);

}



.btn--primary {

    background: var(--gold);

    color: #140d05;

    border: 1px solid #dcbf67;

    box-shadow: none;

}



.btn--primary:hover {

    background: var(--gold-strong);

    border-color: #f0d988;

}



.btn--outline {

    background: var(--gold-soft);

    border: 1px solid rgba(212, 175, 55, 0.35);

    color: var(--gold);

}



.btn--outline:hover {

    background: rgba(212, 175, 55, 0.16);

    border-color: var(--gold);

    color: #f4d97c;

}



.btn--sm {

    height: 35px;

    padding-inline: 13px;

    font-size: 0.79rem;

}



.btn--vip {

    margin-top: 18px;

    background: linear-gradient(120deg, #e0bc52, #b89322);

    color: #140d05;

    box-shadow: none;

}



.btn--vip:hover {

    filter: brightness(1.03);

}



.btn--vip .material-symbols-rounded {

    font-size: 1.02rem;

}



.vip__card {

    border: 1px solid var(--border-strong);

    background: linear-gradient(130deg, #0b1220, #0f172a);

    border-radius: var(--radius-xl);

    padding: clamp(18px, 3vw, 30px);

    position: relative;

    overflow: hidden;

    animation: premiumGlowPulse 4s infinite alternate;

    box-shadow: 0 0 20px rgba(212, 175, 55, 0.05);

}



@keyframes premiumGlowPulse {

    0% {

        box-shadow: 0 0 20px rgba(212, 175, 55, 0.05);

        border-color: rgba(212, 175, 55, 0.15);

    }

    100% {

        box-shadow: 0 0 35px rgba(212, 175, 55, 0.2);

        border-color: rgba(212, 175, 55, 0.4);

    }

}



.vip__glow {

    position: absolute;

    width: 260px;

    height: 260px;

    border-radius: 50%;

    background: radial-gradient(circle, rgba(138, 5, 190, 0.22), rgba(138, 5, 190, 0));

    right: -100px;

    top: -90px;

    pointer-events: none;

}



.vip__content {

    position: relative;

    z-index: 2;

    max-width: 660px;

}



.vip__icon {

    width: 46px;

    height: 46px;

    border-radius: 12px;

    border: 1px solid #3d2a5c;

    background: #241838;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    color: var(--accent);

}



.vip__icon .material-symbols-rounded {

    font-size: 1.42rem;

}



.vip__title {

    margin-top: 14px;

    font-family: 'Sora', 'Manrope', sans-serif;

    font-size: clamp(1.2rem, 2.7vw, 1.62rem);

    color: #f0e8f8;

}



.vip__text {

    margin-top: 8px;

    color: #b8a8d0;

    max-width: 600px;

}



.vip__features {

    margin-top: 16px;

    list-style: none;

    display: grid;

    gap: 8px;

}



.vip__features li {

    display: flex;

    align-items: center;

    gap: 8px;

    color: #d4c0f0;

    font-size: 0.92rem;

    font-weight: 600;

}



.vip__features .material-symbols-rounded {

    font-size: 1rem;

    color: var(--accent);

}



.vip__pricing {

    margin-top: 16px;

    display: flex;

    align-items: flex-end;

    gap: 10px;

}



.vip__price-old {

    color: #8a78a5;

    text-decoration: line-through;

    font-size: 0.9rem;

}



.vip__price {

    color: #d4a832;

    font-size: 1.82rem;

    font-weight: 800;

    line-height: 1;

}



.vip__price small {

    font-size: 0.95rem;

    color: #b8a8d0;

    font-weight: 700;

}



.vip__decoration {

    position: absolute;

    right: -20px;

    bottom: -34px;

    width: 260px;

    height: 180px;

    pointer-events: none;

}



.vip__circle {

    position: absolute;

    border-radius: 50%;

    border: 1px solid rgba(212, 175, 55, 0.26);

}



.vip__circle--1 {

    width: 150px;

    height: 150px;

    right: 0;

    bottom: 0;

    animation: rotateCircle 20s linear infinite;

}



@keyframes rotateCircle {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



.vip__circle--2 {

    width: 108px;

    height: 108px;

    right: 58px;

    bottom: 34px;

    animation: rotateCircle 15s linear infinite reverse;

}



.vip__circle--3 {

    width: 60px;

    height: 60px;

    right: 115px;

    bottom: 76px;

    background: rgba(212, 175, 55, 0.18);

    position: absolute;

    animation: pulseCircleScale 3s ease-in-out infinite alternate;

}



@keyframes pulseCircleScale {

    0% { transform: scale(1); opacity: 0.8; }

    100% { transform: scale(1.15); opacity: 1; }

}



.top-providers__list {

    display: grid;

    gap: 12px;

}



.top-provider {

    border: 1px solid var(--border);

    background: var(--surface);

    border-radius: var(--radius-md);

    padding: 12px;

    display: grid;

    grid-template-columns: auto auto minmax(0, 1fr) auto;

    align-items: center;

    gap: 12px;

    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);

}



.top-provider:hover {

    border-color: #3d2a5c;

    box-shadow: var(--shadow-xs);

    transform: translateY(-1px);

}



.top-provider__rank {

    width: 34px;

    height: 34px;

    border-radius: 10px;

    border: 1px solid #3d2a5c;

    background: #241838;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 0.82rem;

    font-weight: 800;

    color: #8a78a5;

    position: relative;

}



.top-provider__rank span:first-child {

    line-height: 1;

}



.top-provider__rank .material-symbols-rounded {

    display: none;

}



.top-provider__rank--gold {

    color: var(--gold);

    border-color: #5c4a1e;

    background: #2a2010;

}



.top-provider__rank--silver {

    color: var(--silver);

    border-color: #3d3545;

    background: #252030;

}



.top-provider__rank--bronze {

    color: var(--bronze);

    border-color: #4a3522;

    background: #2a1e14;

}



.top-provider__rank--gold .material-symbols-rounded,

.top-provider__rank--silver .material-symbols-rounded,

.top-provider__rank--bronze .material-symbols-rounded {

    display: inline;

    position: absolute;

    font-size: 1rem;

    right: -7px;

    top: -7px;

}



.top-provider__avatar {

    width: 50px;

    height: 50px;

    border-radius: 12px;

    object-fit: cover;

    border: 1px solid #3d2a5c;

}



.top-provider__info {

    min-width: 0;

}



.top-provider__name {

    display: flex;

    align-items: center;

    gap: 4px;

    font-size: 0.97rem;

    font-weight: 800;

    color: #f0e8f8;

}



.top-provider__verified {

    font-size: 0.97rem;

    color: var(--accent);

}



.top-provider__role {

    font-size: 0.81rem;

    color: var(--text-secondary);

}



.top-provider__meta {

    margin-top: 3px;

    display: flex;

    gap: 10px;

    font-size: 0.76rem;

}



.top-provider__rating {

    color: #a87012;

    font-weight: 700;

    display: inline-flex;

    align-items: center;

    gap: 2px;

}



.top-provider__rating .material-symbols-rounded {

    font-size: 0.93rem;

}



.top-provider__jobs {

    color: var(--text-muted);

    font-weight: 700;

}



.offers__grid {

    display: grid;

    gap: 12px;

}



.offer-card {

    border: 1px solid var(--border);

    background: var(--surface);

    border-radius: var(--radius-md);

    padding: 13px;

    display: grid;

    grid-template-columns: auto auto minmax(0, 1fr);

    align-items: center;

    gap: 11px;

    transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);

}



.offer-card:hover {

    border-color: #3d2a5c;

    box-shadow: var(--shadow-xs);

    transform: translateY(-1px);

}



.offer-card__discount {

    background: #3a1520;

    color: #ef4444;

    font-size: 0.74rem;

    font-weight: 800;

    border: 1px solid #5a2030;

    border-radius: 9px;

    padding: 5px 8px;

}



.offer-card__icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    background: #2d1a4a;

    border: 1px solid #3d2a5c;

    color: var(--accent);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.offer-card__icon .material-symbols-rounded {

    font-size: 1.28rem;

}



.offer-card__info {

    min-width: 0;

}



.offer-card__title {

    font-size: 0.96rem;

    font-weight: 800;

    color: #f0e8f8;

}



.offer-card__provider {

    margin-top: 2px;

    font-size: 0.79rem;

    color: var(--text-secondary);

}



.offer-card__price-row {

    margin-top: 5px;

    display: flex;

    align-items: center;

    gap: 8px;

}



.offer-card__price-old {

    color: #8d9cb1;

    text-decoration: line-through;

    font-size: 0.8rem;

}



.offer-card__price-new {

    color: #d4a832;

    font-size: 1.03rem;

    font-weight: 800;

}



.offer-card__validity {

    display: inline-block;

    margin-top: 2px;

    font-size: 0.74rem;

    color: #d4a832;

}



.steps {

    display: grid;

    gap: 12px;

}



.step {

    border: 1px solid var(--border);

    background: var(--surface);

    border-radius: var(--radius-md);

    padding: 14px;

    position: relative;

}



.step__number {

    position: absolute;

    top: 12px;

    right: 12px;

    width: 24px;

    height: 24px;

    border-radius: 50%;

    background: #2d1a4a;

    color: var(--accent);

    font-size: 0.75rem;

    font-weight: 800;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.step__icon {

    width: 44px;

    height: 44px;

    border-radius: 12px;

    background: var(--surface-soft);

    border: 1px solid #3d2a5c;

    color: #5f2097;

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.step__icon .material-symbols-rounded {

    font-size: 1.35rem;

}



.step__title {

    margin-top: 10px;

    font-size: 1rem;

    font-weight: 800;

    color: #f0e8f8;

}



.step__text {

    margin-top: 4px;

    color: var(--text-secondary);

    font-size: 0.85rem;

    max-width: 260px;

}



.step__connector {

    display: none;

}



.step__connector .material-symbols-rounded {

    font-size: 1.2rem;

    color: #8ba0b9;

}



.newsletter__card {

    border: 1px solid var(--border-strong);

    background: linear-gradient(160deg, #0b1220, #111827);

    border-radius: var(--radius-xl);

    padding: clamp(18px, 3vw, 28px);

}



.newsletter__content {

    max-width: 760px;

}



.newsletter__icon {

    width: 42px;

    height: 42px;

    border-radius: 12px;

    background: #241838;

    border: 1px solid #3d2a5c;

    color: #6d1db6;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    font-size: 1.3rem;

}



.newsletter__title {

    margin-top: 12px;

    font-family: 'Sora', 'Manrope', sans-serif;

    font-size: clamp(1.15rem, 2.8vw, 1.5rem);

    color: #f0e8f8;

}



.newsletter__text {

    margin-top: 6px;

    color: #b8a8d0;

}



.newsletter__input-wrap {

    margin-top: 14px;

    display: flex;

    flex-direction: column;

    gap: 10px;

}



.newsletter__input {

    height: 48px;

    border-radius: 11px;

    border: 1px solid #3d2a5c;

    background: #241838;

    padding: 0 14px;

    font-size: 0.92rem;

    color: var(--text-primary);

    outline: none;

}



.newsletter__input:focus {

    border-color: var(--gold);

    box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.18);

}



.newsletter__input::placeholder {

    color: #6a5880;

}



.newsletter__btn {

    align-self: flex-start;

}



.newsletter__btn .material-symbols-rounded {

    font-size: 1.02rem;

}



.newsletter__disclaimer {

    margin-top: 10px;

    font-size: 0.76rem;

    color: #7d6b9f;

}



.footer {

    margin-top: 34px;

    margin-bottom: 30px;

    border: 1px solid var(--border);

    background: var(--surface);

    border-radius: var(--radius-xl);

    box-shadow: var(--shadow-xs);

}



.footer__top {

    padding: 24px;

    display: grid;

    gap: 22px;

}



.footer__logo {

    display: inline-flex;

    align-items: center;

    gap: 8px;

    font-family: 'Sora', 'Manrope', sans-serif;

    font-weight: 700;

    color: #f0e8f8;

}



.footer__logo .material-symbols-rounded {

    font-size: 1.35rem;

    color: var(--accent);

}



.footer__desc {

    margin-top: 8px;

    max-width: 320px;

    font-size: 0.87rem;

    color: var(--text-secondary);

}



.footer__links {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 16px;

}



.footer__col h4 {

    font-size: 0.9rem;

    color: #f0e8f8;

    margin-bottom: 7px;

}



.footer__col a {

    display: block;

    color: var(--text-secondary);

    font-size: 0.84rem;

    margin-top: 6px;

}



.footer__col a:hover {

    color: var(--accent);

}



.footer__bottom {

    border-top: 1px solid #2e2045;

    padding: 16px 24px;

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 10px;

}



.footer__bottom p {

    color: var(--text-muted);

    font-size: 0.8rem;

}



.footer__social {

    display: flex;

    align-items: center;

    gap: 8px;

}



.footer__social a {

    width: 34px;

    height: 34px;

    border-radius: 10px;

    border: 1px solid rgba(212, 175, 55, 0.35);

    background: var(--gold-soft);

    color: var(--gold);

    display: inline-flex;

    align-items: center;

    justify-content: center;

}



.footer__social a:hover {

    border-color: var(--gold);

    background: rgba(212, 175, 55, 0.16);

    color: #f4d97c;

}



.bottom-nav {

    position: fixed;

    left: 12px;

    right: 12px;

    bottom: 12px;

    height: 62px;

    border-radius: 16px;

    border: 1px solid var(--border);

    background: rgba(7, 3, 13, 0.95);

    backdrop-filter: blur(10px);

    box-shadow: 0 16px 34px rgba(0, 0, 0, 0.4);

    display: flex;

    z-index: 95;

}



.bottom-nav__item {

    flex: 1;

    min-width: 0;

    color: #8a78a5;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 2px;

    font-size: 0.65rem;

    font-weight: 700;

    transition: color 0.2s var(--ease);

}



.bottom-nav__item span:first-child {

    font-size: 1.12rem;

}



.bottom-nav__item span:last-child {

    line-height: 1;

}



.bottom-nav__item--active,
.bottom-nav__item:hover {
    color: var(--gold);
    text-shadow: 0 0 12px rgba(255, 215, 0, 0.4);
}

.bottom-nav__item--active .material-symbols-rounded,
.bottom-nav__item--active .bi {
    filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.5));
}

.header__nav a,
.nav-dropdown__trigger {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.header__nav .bi,
.nav-dropdown__trigger .bi {
    font-size: 1.08rem;
    line-height: 1;
    color: currentColor;
    opacity: 0.95;
}



.bottom-nav__item--center::after { display: none /* removed */; }



.bottom-nav__item--center {

    position: relative;

}



@media (max-width: 480px) {

    .notifications-popover {

        position: fixed;

        top: 78px;

        left: 12px;

        right: 12px;

        width: auto;

    }



    /* Drawer handles it globally now */



    .account-menu__grid {

        grid-template-columns: 1fr;

        gap: 8px;

    }



    .hero__stats {

        grid-template-columns: 1fr;

    }



    .hero__search {

        flex-wrap: wrap;

        padding: 12px;

    }



    .hero__search-btn {

        width: 100%;

    }



    .hero__cta {

        flex-direction: column;

    }



    .hero__cta-btn {

        width: 100%;

        min-width: 0;

    }



    .hero__visual {

        display: none;

    }



    .marketplace {

        padding-top: 18px;

    }



    .filter-panel {

        padding: 12px;

    }



    .results-toolbar {

        padding: 10px;

        gap: 10px;

    }



    .results-search {

        min-height: 44px;

        padding: 0 11px;

    }



    .results-toolbar__actions {

        display: flex;

        gap: 4px;

        flex-shrink: 0;

    }



    .results-toolbar__action-btn {

        width: 36px;

        height: 36px;

        flex-shrink: 0;

    }



    .results-toolbar__sort {

        justify-content: center;

    }



    .results-search input {

        font-size: 0.93rem;

    }



    .header__btn--search,

    .search-bar {

        display: none !important;

    }



    .service-result {

        padding: 16px;

    }



    .top-provider {

        grid-template-columns: 34px 76px minmax(0, 1fr);

        align-items: start;

        column-gap: 10px;

        row-gap: 8px;

    }



    .top-provider__avatar {

        width: 72px;

        height: 72px;

        border-radius: 14px;

    }



    .top-provider__info {

        grid-column: 3;

        align-self: center;

    }



    .top-provider .btn {

        grid-column: 3;

        justify-self: start;

    }



    .offer-card {

        grid-template-columns: auto minmax(0, 1fr);

    }



    .offer-card__discount {

        grid-column: 2;

        justify-self: start;

    }



    .steps {

        gap: 10px;

    }



    .step {

        display: grid;

        grid-template-columns: 44px minmax(0, 1fr) 28px;

        align-items: start;

        column-gap: 10px;

        row-gap: 4px;

        padding: 12px;

    }



    .step__icon {

        grid-column: 1;

        grid-row: 1 / span 2;

        width: 42px;

        height: 42px;

        border-radius: 11px;

    }



    .step__icon .material-symbols-rounded {

        display: block;

        line-height: 1;

        font-size: 1.22rem;

    }



    .step__number {

        position: static;

        grid-column: 3;

        grid-row: 1;

        justify-self: end;

        align-self: center;

        width: 26px;

        height: 26px;

    }



    .step__title {

        grid-column: 2;

        grid-row: 1;

        margin-top: 0;

        align-self: center;

        font-size: 1.02rem;

    }



    .step__text {

        grid-column: 2 / 4;

        grid-row: 2;

        margin-top: 1px;

        max-width: none;

        font-size: 0.86rem;

        line-height: 1.4;

    }



    .footer__links {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 760px) {

    .hero {

        display: none;

    }



    .header__btn--search,

    .search-bar {

        display: none !important;

    }



    .marketplace {

        padding-top: 92px;

    }



    .results-toolbar {

        gap: 10px;

    }



    .results-search {

        min-height: 46px;

    }



    .results-toolbar__actions {

        display: grid;

        grid-template-columns: repeat(2, minmax(0, 1fr));

        gap: 8px;

    }



    .results-toolbar__action-btn {

        width: 100%;

        justify-content: center;

    }

}



@media (max-width: 679px) {

    .filter-panel__close {

        position: absolute;

        top: 12px;

        right: 12px;

        width: 24px;

        height: 24px;

        border: 0;

        background: transparent;

        color: #d8c6ea;

        display: inline-flex;

        align-items: center;

        justify-content: center;

        padding: 0;

    }



    .filter-panel__close .material-symbols-rounded {

        font-size: 1.1rem;

    }



    .filter-panel__close:hover,

    .filter-panel__close:focus-visible {

        color: #f0e7fa;

    }



    .marketplace__filters {

        display: block;

        position: fixed;

        top: 72px;

        right: 0;

        width: min(390px, 92vw);

        height: calc(100dvh - 72px);

        padding: 10px 10px 14px;

        z-index: 121;

        transform: translateX(105%);

        opacity: 0;

        pointer-events: none;

        transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);

    }



    .marketplace__filters .filter-panel {

        height: 100%;

        overflow-y: auto;

        border-radius: 14px;

        box-shadow: var(--shadow-md);

    }



    .marketplace__filters--open {

        transform: translateX(0);

        opacity: 1;

        pointer-events: auto;

    }



    .marketplace__filters--open .filter-panel {

        margin-bottom: 0;

    }



    .filters-backdrop {

        position: fixed;

        top: 72px;

        left: 0;

        right: 0;

        bottom: 0;

        border: 0;

        background: rgba(2, 0, 8, 0.58);

        z-index: 120;

        display: block;

    }



    .filters-backdrop[hidden] {

        display: none;

    }

}



@media (max-width: 979px) {

    .hero__visual {

        display: none;

    }

}



@media (min-width: 680px) {

    .marketplace__layout {

        gap: 16px;

    }



    .results-toolbar {

        border: 0;

        border-radius: 0;

        background: transparent;

        padding: 0;

        grid-template-columns: minmax(0, 1fr) auto;

        align-items: center;

        gap: 12px;

    }



    .results-search {

        min-height: 46px;

    }



    .results-toolbar__filter {

        display: none !important;

    }



    .results-toolbar__actions {

        display: flex;

        justify-content: flex-end;

        gap: 8px;

    }



    .results-toolbar__action-btn {

        width: auto;

    }



    .marketplace__filters {

        display: block;

    }



    .service-result__head {

        grid-template-columns: minmax(0, 1fr) auto;

        align-items: start;

        column-gap: 14px;

    }



    .service-result__price-wrap {

        justify-self: end;

        align-self: start;

        min-width: 124px;

    }



    .service-result__footer {

        grid-template-columns: minmax(0, 1fr) auto;

        align-items: center;

        column-gap: 16px;

    }



    .service-result__actions {

        justify-content: flex-end;

        flex-wrap: nowrap;

        align-items: stretch;

    }



    .service-result__actions .btn {

        flex: 0 0 auto;

        height: 42px !important;

    }



    .categories__grid {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }



    .offers__grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }



    .newsletter__input-wrap {

        flex-direction: row;

        align-items: center;

    }



    .newsletter__input {

        flex: 1;

    }



    .footer__top {

        grid-template-columns: 1.1fr 1.6fr;

        align-items: start;

    }



    .footer__links {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



@media (min-width: 680px) and (max-width: 760px) {

    .results-toolbar {

        gap: 10px;

    }



    .results-search {

        min-height: 44px;

    }



    .results-toolbar__actions {

        display: grid;

        grid-template-columns: auto 1fr;

        gap: 8px;

    }

}



@media (min-width: 980px) {



    .header__inner,

    .search-bar,

    .hero,

    .section,

    .footer {

        width: min(1260px, calc(100% - 54px));

    }



    .hero {

        margin-top: 98px;

    }



    .hero__content {

        padding: 32px;

        padding-right: 520px;

    }



    .hero__title {

        max-width: 560px;

    }



    .hero__stats {

        grid-template-columns: repeat(3, minmax(210px, 1fr));

        max-width: 600px;

    }



    .hero__visual {

        width: 520px;

        height: 380px;

        right: 120px;

        top: 2px;

    }



    .hero__visual-card {

        right: 92px;

        top: 108px;

        width: 320px;

        padding: 18px 20px;

    }





    .marketplace {

        padding-top: 28px;

    }



    .marketplace__layout {

        grid-template-columns: 296px minmax(0, 1fr);

        gap: 18px;

        align-items: start;

    }



    .marketplace__filters {

        display: block;

        position: sticky;

        top: 92px;

    }



    .filter-panel {

        padding: 16px;

    }



    .results-list {

        gap: 14px;

    }



    .service-result {

        padding: 16px;

    }



    .section {

        padding-top: 42px;

    }



    .categories__grid {

        grid-template-columns: repeat(4, minmax(0, 1fr));

        gap: 14px;

    }



    .featured__carousel {

        grid-auto-flow: dense;

        grid-template-columns: repeat(3, minmax(0, 1fr));

        overflow: visible;

        scroll-snap-type: none;

    }



    .carousel-dots {

        display: none;

    }



    .vip__card {

        display: grid;

        grid-template-columns: 1.3fr 0.7fr;

        align-items: stretch;

    }



    .vip__content {

        max-width: none;

    }



    .vip__decoration {

        position: static;

        align-self: end;

        justify-self: end;

        opacity: 0.85;

    }



    .top-provider {

        grid-template-columns: 42px 54px minmax(0, 1fr) auto;

        padding: 14px;

    }



    .offer-card {

        grid-template-columns: auto auto minmax(0, 1fr);

    }



    .offers__grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }



    .steps {

        grid-template-columns: 1fr auto 1fr auto 1fr;

        align-items: center;

        gap: 12px;

    }



    .step {

        min-height: 220px;

    }



    .step__connector {

        display: flex;

        justify-content: center;

    }



    .footer {

        margin-bottom: 40px;

    }



    .bottom-nav {

        display: none;

    }



}



/* Mobile Gap Fixes */
@media (max-width: 900px) {
    .section.marketplace { padding-top: 2px !important; }
    .marketplace__layout { margin-top: 0px !important; }
}

@media (min-width: 901px) {
    .bottom-nav {
        display: none !important;
    }
}

@media (max-width: 900px) {
    body.has-mobile-nav {
        padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px));
    }

    .bottom-nav {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: auto;
        min-height: 68px;
        padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
        border-radius: 0;
        border: 0;
        border-top: 1px solid rgba(255, 255, 255, 0.08);
        background: rgba(10, 6, 16, 0.98);
        backdrop-filter: blur(18px);
        box-shadow: 0 -10px 28px rgba(0, 0, 0, 0.28);
        display: flex !important;
        z-index: 120;
    }

    .bottom-nav__item {
        position: relative;
        gap: 4px;
        color: #9f90b6;
        font-size: 0.68rem;
        font-weight: 700;
    }

    .bottom-nav__item span:first-child {
        font-size: 1.34rem;
    }

    .bottom-nav__item--active,
    .bottom-nav__item:hover {
        color: var(--gold);
        text-shadow: none;
    }

    .bottom-nav__item--active .material-symbols-rounded {
        filter: none;
    }

    .bottom-nav__item--active::before {
        content: "";
        position: absolute;
        top: -8px;
        left: 50%;
        width: 30px;
        height: 3px;
        border-radius: 999px;
        background: var(--gold);
        transform: translateX(-50%);
    }

    .bottom-nav__badge {
        position: absolute;
        top: 4px;
        right: 50%;
        margin-right: -18px;
        min-width: 16px;
        height: 16px;
        padding: 0 4px;
        border-radius: 999px;
        background: #e53e3e;
        color: #fff;
        font-size: 0.6rem;
        font-weight: 800;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        line-height: 1;
        box-shadow: 0 2px 6px rgba(229, 62, 62, 0.4);
    }
}

/* Previne flicker no mobile nav durante navegação */
.bottom-nav {
    will-change: contents;
    contain: layout style;
}

/* Custom Scrollbar Global View */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: #0b0114;
    border: none;
}
::-webkit-scrollbar-thumb {
    background: #2a203b;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent);
}