@font-face {
    font-family: 'Anton';
    src: url("../fonts/Anton-Regular-A9R60oo.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Castoro';
    src: url("../fonts/Castoro-Regular-s9E4Kft.ttf") format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url("../fonts/HankenGrotesk-VariableFont_wght-GAdSZiz.ttf") format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Hanken Grotesk';
    src: url("../fonts/HankenGrotesk-Italic-VariableFont_wght-BoK7xY2.ttf") format('truetype');
    font-weight: 100 900;
    font-style: italic;
    font-display: swap;
}

:root {
    --primary: #503040;
    --secondary: #F6EBDF;
    --tertiary: #EDF1F4;
    --accent: #F7F261;
    --text: #212121;
    --cta: #A84B32;
    --surface: #401F15;
    --overlay: #401F154D;
    --adv: #73CAD2;
    --alert: #BD0000;


    --border-radius: 8px;
    --border-radius-lg: 12px;
    --border-radius-xl: 16px;
    --border-radius-pill: 36px;
    --border-radius-dropdown: 20px;

    --font-weight-bold: 700;
    --font-weight-black: 900;

    --padding-box: 28px;
    --padding-modal: 25px;

    --header-height: 80px;

    --container-max-width: 1200px;
    --container-margin: max(5vw, calc((100vw - var(--container-max-width)) / 2));

    --hover-scale: 1.03;
    --hover-scale--medium: 1.05;
    --hover-scale--little: 1.02;
    --hover-scale--large: 1.1;

    --transition-base: .15s;
    --transition-slow: .2s;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

[hidden] { display: none !important; }

a {
    color: inherit;
    text-decoration: none;
}

body {
    font-family: 'Hanken Grotesk', sans-serif;
    background-color: var(--secondary);
    color: var(--text);
    padding-top: var(--header-height);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

main {
    min-height: calc(100vh - var(--header-height));
}

/* ── TYPOGRAPHY ── */

h1 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 3.6rem;
    line-height: 4rem;
    letter-spacing: 0;
}

h2 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 2.8rem;
    line-height: 3.3rem;
    letter-spacing: -0.02em;
}

h3 {
    font-family: 'Castoro', serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: -0.02em;
}

.sub1 {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 2rem;
    letter-spacing: 0;
}

.sub2 {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 400;
    font-size: 1.1rem;
    line-height: 1.4rem;
    letter-spacing: -0.02em;
}

.sub3 {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.6rem;
    letter-spacing: 0;
}

p, .body {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.4rem;
    letter-spacing: -0.02em;
}

.body-heavy {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.4rem;
    letter-spacing: -0.02em;
}

.body-small {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 400;
    font-size: .9rem;
    line-height: 1.2rem;
    letter-spacing: -0.02em;
}

.body-small-heavy {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.2rem;
    letter-spacing: -0.02em;
}

.caption {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 400;
    font-size: .8rem;
    line-height: 1.2rem;
    letter-spacing: -0.02em;
}

/* ── UTILITIES ── */

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px 4px 8px;
    border-radius: 100px;
    border: 1px solid var(--surface);
    width: fit-content;
    font-size: .8rem;
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    background-color: var(--accent);
    color: var(--surface);
}

.chip--dark {
    background-color: var(--surface);
    color: var(--secondary);
    border-color: var(--surface);
}

.chip--outline {
    background-color: var(--secondary);
    color: var(--surface);
    border-color: var(--surface);
}

.chip--muted {
    background-color: var(--overlay);
    color: var(--surface);
    border-color: var(--surface);
}

.chip--icon-only {
    padding: 4px 8px;
}

.chip--large {
    padding: 8px 12px 8px 16px;
    font-size: .9rem;
    border-radius: 36px;
}

.chip--large.chip--no-icon {
    padding: 6px 14px;
}

.chip--filter {
    padding: 6px 8px 6px 12px;
}

.chip__icon {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.chip__icon--info {
    width: 12px;
    height: 12px;
}

[data-role-info-trigger] {
    cursor: pointer;
}

.chip__remove {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    color: inherit;
}

.chip__remove img {
    width: 14px;
    height: 14px;
}

.container {
    margin: 0 auto;
    width: 90%;
    max-width: var(--container-max-width);
}

.button {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 38px;
    border-radius: var(--border-radius);
    font-weight: var(--font-weight-bold);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
    border: 2px solid transparent;
    background-color: var(--cta);
    color: var(--secondary);
    width: fit-content;
    white-space: nowrap;
    transition: transform var(--transition-slow) ease;
}

.button:hover {
    transform: scale(var(--hover-scale));
}

.button:disabled,
.button--disabled {
    opacity: 0.45;
    pointer-events: none;
}

.button--outline {
    background-color: transparent;
    border: 2px solid var(--primary);
    color: var(--primary);
}

.button--wide {
    padding: 10px 60px;
}

.button--full {
    width: 100%;
    padding: 10px;
    justify-content: center;
}

.button--outline-light {
    background-color: transparent;
    border: 1px solid var(--secondary);
    color: var(--secondary);
    border-radius: 32px;
    padding: 10px 22px 10px 24px;
}

.button--outline-inverse {
    background-color: transparent;
    border: 2px solid var(--secondary);
    color: var(--secondary);
}

.button--loading {
    opacity: 0.45;
    pointer-events: none;
    color: transparent;
    position: relative;
}

.button--loading::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border-radius: 50%;
    border: 2px solid color-mix(in srgb, var(--secondary) 35%, transparent);
    border-top-color: var(--secondary);
    animation: button-spinner-rotate .8s linear infinite;
}

@keyframes button-spinner-rotate {
    to { transform: rotate(360deg); }
}

/* ── HEADER ── */

.header-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    background-color: var(--primary);
}

.header {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    height: var(--header-height);
    padding: 0 48px;
    gap: 32px;
    position: relative;
}

.header__logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    justify-self: start;
}

.header__logo-img {
    height: 42px;
    width: auto;
    display: block;
    margin-top: 3px;
}

.header__nav {
    display: flex;
    align-items: stretch;
    align-self: stretch;
    position: relative;
    min-width: 0;
}

.header__nav-links {
    display: flex;
    align-items: stretch;
    gap: 50px;
}

.header__nav-link {
    display: flex;
    align-items: center;
    color: var(--accent);
    font-weight: var(--font-weight-bold);
}

.header__nav-link::after {
    content: attr(data-label);
    display: block;
    font-weight: var(--font-weight-bold);
    height: 0;
    overflow: hidden;
    visibility: hidden;
    pointer-events: none;
}

.header__nav-link--active {
    font-weight: var(--font-weight-bold);
}

.header__nav-link--logout,
.header__nav-link--profile {
    display: none;
}

.header__nav-link__icon {
    width: 26px;
    height: 26px;
    margin-top: -4px;
    flex-shrink: 0;
}

.header__nav-indicator {
    position: absolute;
    bottom: 0;
    height: 2px;
    background-color: var(--accent);
    transition: left .3s ease, width .3s ease, opacity var(--transition-base) ease;
    pointer-events: none;
    opacity: 0;
}

.header__nav.has-indicator .header__nav-link--active {
    border-bottom-color: transparent;
}

.header__actions {
    display: flex;
    align-items: center;
    gap: 25px;
    flex-shrink: 0;
    justify-self: end;
}

.header__actions-buttons {
    display: flex;
    align-items: center;
    gap: 15px;
}

.header__profile-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.lang-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--secondary);
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    padding: 0;
    letter-spacing: .02em;
}

.lang-trigger__chevron {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-base) ease;
}

.lang-trigger--open .lang-trigger__chevron {
    transform: rotate(180deg);
}

/* ── LANG MODAL ── */

@keyframes lang-modal-in {
    from { opacity: 0; transform: translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0)    scale(1); }
}

.lang-modal {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-modal[hidden] {
    display: none;
}

.lang-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, .5 );
}

.lang-modal__dialog {
    position: relative;
    z-index: 1;
    background-color: var(--secondary);
    animation: lang-modal-in .2s ease-out;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 4px 30px 0 color-mix(in srgb, black 30%, transparent);
    padding: 20px;
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.lang-modal__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
}

.lang-modal__title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.2;
    text-transform: uppercase;
    color: var(--surface);
    letter-spacing: .02em;
}

.lang-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--surface);
    padding: 0;
    display: flex;
    align-items: center;
}

.lang-modal__close-icon {
    width: 24px;
    height: 24px;
}

.lang-modal__options {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.lang-modal__option {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    cursor: pointer;
    color: var(--surface);
    transition: background-color var(--transition-base);
}

.lang-modal__option--active {
    background-color: var(--cta);
    color: var(--secondary);
}

.lang-modal__radio {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: 2px solid var(--surface);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lang-modal__option--active .lang-modal__radio {
    border-color: var(--secondary);
}

.lang-modal__option--active .lang-modal__radio::after {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--secondary);
}

.lang-modal__lang-name {
    font-size: 1rem;
    font-weight: 400;
}

.lang-modal__option--active .lang-modal__lang-name {
    font-weight: 600;
}

.lang-modal__submit {
    width: 100%;
    background-color: var(--cta);
    color: var(--secondary);
    border: none;
    padding: 16px;
    border-radius: 12px;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    cursor: pointer;
    margin-top: 4px;
}

.header__menu-toggle {
    display: none;
    grid-column: 3;
    justify-self: end;
}

.header__menu-icon {
    display: block;
}

.header__nav-close {
    display: none;
}

.header__nav-mobile-actions {
    display: none;
}

/* ── HERO ── */

.hero {
    display: flex;
    min-height: 600px;
}

.hero__column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.hero__column--main {
    flex: 0 0 50%;
    background-color: var(--surface);
    color: var(--secondary);
    padding: 160px;
    gap: 28px;
}

.hero--activities .hero__column--main {
    background-color: var(--primary);
}

.hero__title {
    text-transform: uppercase;
}

.hero__subtitle {
    max-width: 380px;
    line-height: 1.5;
    font-size: 1.3rem;
}

.hero__column--video {
    flex: 0 0 25%;
    position: relative;
}

.hero__video-wrapper {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.hero__video {
    position: absolute;
    inset: 0;
    height: 102%;
    width: 102%;
    object-fit: cover;
    object-position: center;
}

.hero__badge {
    position: absolute;
    left: -90px;
    bottom: 48px;
    width: 180px;
    z-index: 1;
    animation: badge-pop .8s cubic-bezier(.2, 1.4, .4, 1);
}

@keyframes badge-pop {
    from {
        transform: scale(0) rotate(-135deg);
        opacity: 0;
    }
    to {
        transform: scale(1) rotate(0);
        opacity: 1;
    }
}

@keyframes card-fade-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.hero__badge-img {
    width: 100%;
    height: auto;
    display: block;
}

.hero__column--trust {
    flex: 0 0 25%;
    background-color: var(--cta);
    color: var(--secondary);
    padding: 50px;
    gap: 10px;
    justify-content: flex-end;
    align-items: flex-start;
}

.hero__trust-avatars {
    height: 80px;
    display: block;
    margin-bottom: 25px;
}

.hero__trust-claim {
    font-family: 'Castoro', serif;
    font-size: 1.5rem;
    line-height: 1.3;
}

.hero__trust-description {
    line-height: 1.5;
}

.hero__column--profile {
    flex: 0 0 25%;
    background-color: var(--accent);
    color: var(--surface);
    padding: 50px;
    gap: 0;
    justify-content: flex-end;
    align-items: flex-start;
}

.hero__profile-card {
    background-color: var(--secondary);
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--surface);
    overflow: hidden;
    width: 100%;
    max-width: 260px;
    aspect-ratio: 260 / 320;
    margin-bottom: 32px;
    display: flex;
    flex-direction: column;
}

.hero__profile-photo {
    position: relative;
    width: 100%;
    flex: 1;
}

.hero__profile-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hero__profile-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 32.9%, rgba(64, 31, 21, .8) 100%);
}

.hero__profile-name {
    position: absolute;
    bottom: 12px;
    left: 14px;
    z-index: 1;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--secondary);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.hero__profile-details {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hero__profile-claim {
    font-family: 'Castoro', serif;
    font-size: 1.5rem;
    line-height: 1.3;
    margin-top: 20px;
}

.hero__profile-description {
    line-height: 1.5;
    margin-top: 8px;
}

/* ── OFFERS ── */

.offers {
    padding: 80px 0 100px;
}

.offers__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.offers__title {
    font-family: 'Castoro', serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--surface);
}

.offers__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    grid-template-rows: repeat(2, minmax(225px, auto));
    gap: 20px;
    padding-top: 10px;
}

.offers__grid--home {
    grid-template-rows: none;
}

.card-carousel-dots {
    display: none;
}

/* ── OFFER CARD ── */

.offer-card {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-lg);
    color: var(--surface);
    padding: 16px;
    gap: 0;
    transition: transform var(--transition-slow) ease;
    animation: card-fade-up .5s ease-out backwards;
}

.offer-card:hover {
    transform: scale(var(--hover-scale--little));
}

.offer-card__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.offer-card__top-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.offer-card__sponsored {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--accent);
    color: var(--surface);
    border: 1px solid var(--surface);
    border-radius: 100px;
    padding: 4px 10px 4px 8px;
    font-size: .8rem;
    width: fit-content;
    font-weight: 500;
}

.offer-card__sponsored-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.offer-card__row + .offer-card__sponsored {
    margin-top: 15px;
}

.offer-card__business-image {
    width: 110px;
    height: 110px;
    border-radius: var(--border-radius);
    overflow: hidden;
    flex-shrink: 0;
    position: relative;
}

.offer-card__business-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.offer-card__watermark {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    opacity: 0.8;
}

.offer-card__business-image--empty {
    background-color: var(--primary);
}

.offer-card__business-image--empty .offer-card__business-img {
    display: none;
}

.offer-card__business-image--empty .offer-card__watermark {
    display: block;
}

.offer-card__title {
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: 800;
    font-size: 1.1rem;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    overflow: hidden;
}

.offer-card__row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
}

.offer-card__row:first-of-type {
    margin-top: auto;
}

.offer-card__row + .offer-card__row {
    border-top: 1px solid color-mix(in srgb, var(--primary) 30%, transparent);
    padding-bottom: 0;
}

.offer-card__label {
    font-size: .9rem;
    font-weight: 600;
}

.offer-card__value {
    font-size: .9rem;
}

.offer-card--sponsored {
    background-color: white;
}

/* ── OFFERS PAGE ── */

.offers-page,
.talents-page {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - var(--header-height));
    padding: 0 0 60px;
}

.offers-page > .container,
.talents-page > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.offers-header,
.talents-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 45px;
    margin-bottom: 20px;
}

.offers-header__controls,
.talents-header__controls {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-left: auto;
}

.offers-sticky-bar,
.talents-sticky-bar {
    position: sticky;
    top: var(--header-height);
    z-index: 998;
    background-color: var(--secondary);
    border-bottom: 2px solid transparent;
    transition: border-bottom-color .2s ease;
}

.offers-sticky-bar.is-scrolled,
.talents-sticky-bar.is-scrolled {
    border-bottom-color: var(--surface);
    transition: border-bottom-color .4s ease;
}

.offers-header__title,
.talents-header__title {
    text-transform: uppercase;
    color: var(--surface);
}

.offers-header__title-short {
    display: none;
}

.offers-header__filter-button,
.talents-header__filter-button {
    padding: 10px 20px 10px 22px;
    border-radius: 36px;
    font-size: .95rem;
}

.offers-header__filter-icon,
.talents-header__filter-icon {
    width: 20px;
    height: 20px;
}

.offers-header__filter-badge,
.talents-header__filter-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background-color: var(--secondary);
    color: var(--cta);
    font-size: .7rem;
    font-family: 'Hanken Grotesk', sans-serif;
    font-weight: var(--font-weight-bold);
}

.search-box {
    display: flex;
    align-items: center;
    gap: 12px;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-pill);
    padding: 8px 12px;
    background-color: white;
    width: 450px;
}

.search-box:has(.search-box__input:disabled) {
    opacity: 0.45;
}

.search-box__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

.search-box__input {
    border: none;
    outline: none;
    width: 100%;
    font-family: inherit;
    font-size: 1rem;
    background: transparent;
    color: var(--surface);
}


.search-box__input::placeholder {
    color: color-mix(in srgb, var(--surface) 50%, transparent);
}


.offers-toolbar,
.talents-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 30px;
    animation: card-fade-up .5s ease-out backwards;
}

.page-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40vh;
}

#offers-loader, #talents-loader {
    min-height: 500px;
}

.page-loader__spinner {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--surface) 15%, transparent);
    border-top-color: var(--surface);
    animation: button-spinner-rotate .8s linear infinite;
}

.offers-toolbar__count,
.talents-toolbar__count {
    font-weight: 500;
    color: var(--surface);
}

.offers-sort,
.talents-sort {
    position: relative;
}

.offers-sort__trigger,
.talents-sort__trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    cursor: pointer;
    font-family: inherit;
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
    color: var(--surface);
    padding: 0;
}

.talents-sort__trigger:disabled {
    opacity: 0.45;
}

.offers-sort__chevron,
.talents-sort__chevron {
    margin-bottom: -2px;
    width: 20px;
    height: 20px;
    transition: transform var(--transition-base) ease;
}

@keyframes sort-dropdown-in {
    from { opacity: 0; transform: translateY(-6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.offers-sort__dropdown,
.talents-sort__dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-lg);
    width: max-content;
    overflow: hidden;
    z-index: 100;
    padding-bottom: 5px;
    margin-right: -6px;
}

.offers-sort__dropdown:not([hidden]),
.talents-sort__dropdown:not([hidden]) {
    animation: sort-dropdown-in var(--transition-base) ease;
}

.offers-sort__option,
.talents-sort__option {
    display: block;
    width: 100%;
    padding: 14px 20px;
    text-align: right;
    background: none;
    border: none;
    cursor: pointer;
    font-family: 'Hanken Grotesk', sans-serif;
    font-size: 1rem;
    color: var(--surface);
    transition: transform var(--transition-base) ease;
}

.offers-sort__option:hover,
.talents-sort__option:hover {
    transform: translateX(-3px);
}

.offers-sort__option--active,
.talents-sort__option--active {
    font-weight: 800;
}

/* ── FILTER DRAWER ── */

.filter-drawer {
    position: fixed;
    inset: 0;
    z-index: 10000;
}

.filter-drawer[hidden] {
    display: none;
}

.filter-drawer .select__dropdown {
    top: 40px;
    max-height: 52vh;
}

.filter-drawer .multiselect__dropdown {
    top: 40px;
    max-height: 52vh;
}

.filter-drawer__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.4);
}

.filter-drawer__panel {
    position: absolute;
    top: 50%;
    right: 0;
    max-height: 90vh;
    width: 370px;
    background-color: var(--secondary);
    border-radius: 24px 0 0 24px;
    font-family: 'Hanken Grotesk', sans-serif;
    color: var(--surface);
    display: flex;
    flex-direction: column;
    transform: translateY(-50%) translateX(100%);
    transition: transform .3s ease;
    padding: 20px 5px 30px 30px;
}

.filter-drawer__panel--open {
    transform: translateY(-50%) translateX(0);
}

.filter-drawer__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-shrink: 0;
    margin-bottom: 20px;
    padding-right: 20px;
}

.filter-drawer__title {
    font-size: 2.2rem;
    text-transform: uppercase;
    color: var(--cta);
}

.filter-drawer__close {
    background: none;
    border: none;
    cursor: pointer;
}

.filter-drawer__close img {
    width: 26px;
    height: 26px;
    margin-top: 5px;
    display: block;
}

.filter-drawer__body {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 20px;
    overflow-y: scroll;
    padding-right: 20px;
    padding-bottom: 15px;
    scrollbar-width: thin;
    scrollbar-color: var(--overlay) transparent;
}

.filter-drawer__body::-webkit-scrollbar {
    width: 10px;
}

.filter-drawer__body::-webkit-scrollbar-track {
    background: transparent;
}

.filter-drawer__body::-webkit-scrollbar-thumb {
    background-color: var(--overlay);
    border-radius: 10px;
}

.filter-drawer__body::before {
    content: '';
    position: sticky;
    top: 0;
    z-index: 110;
    display: block;
    flex-shrink: 0;
    height: 5px;
    margin-bottom: -20px;
    background: linear-gradient(to bottom, var(--secondary), transparent);
    pointer-events: none;
}

.filter-drawer__scroll-hint {
    position: sticky;
    bottom: -1%;
    z-index: 151;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    align-self: center;
    flex-shrink: 0;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
}

.filter-drawer__body--scrollable .filter-drawer__scroll-hint {
    opacity: .6;
    transition-delay: .2s;
}

.filter-drawer__body--scrollable.filter-drawer__body--scrolled .filter-drawer__scroll-hint {
    opacity: 0;
    transition-delay: 0s;
}

.filter-drawer__panel:has(.filter-drawer__remove--visible) .filter-drawer__scroll-hint {
    opacity: 0;
    transition-delay: 0s;
}

.filter-drawer__scroll-hint-label {
    font-size: .8rem;
    color: var(--surface);
    font-weight: 600;
    animation: filter-drawer-scroll-hint-bounce 1.45s ease-in-out infinite;
}

.filter-drawer__scroll-hint-icon {
    width: 16px;
    height: 16px;
    display: block;
    animation: filter-drawer-scroll-hint-bounce 1.5s ease-in-out infinite;
}

@keyframes filter-drawer-scroll-hint-bounce {
    0%, 100% {
        transform: translateY(-2px);
    }
    50% {
        transform: translateY(2px);
    }
}

.filter-drawer__footer {
    position: relative;
    flex-shrink: 0;
    padding-top: 30px;
    padding-right: 20px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-drawer__footer::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    z-index: 110;
    height: 5px;
    background: linear-gradient(to top, var(--secondary), transparent);
    pointer-events: none;
}

.filter-drawer__remove {
    width: 100%;
    justify-content: center;
    background-color: var(--secondary);
    border: 2px solid var(--surface);
    color: var(--surface);
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity .2s ease, transform .2s ease;
}

.filter-drawer__remove--visible {
    opacity: 1;
    transform: translateY(0);
}

.filter-drawer__apply {
    width: 100%;
    justify-content: center;
}

.filter-drawer__apply:disabled {
    opacity: .4;
    transform: none;
    pointer-events: none;
}

.filter-group__label {
    font-weight: var(--font-weight-bold);
    font-size: .9rem;
    margin-bottom: 10px;
    display: block;
}

.filter-search__input {
    width: 100%;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius);
    padding: 8px 14px;
    font-family: inherit;
    font-size: 1rem;
    background-color: white;
    color: var(--surface);
    outline: none;
}

.filter-group__value {
    text-align: center;
    font-size: 1rem;
    font-weight: var(--font-weight-bold);
    margin-bottom: 5px;
}

.filter-slider {
    width: 100%;
    cursor: pointer;
    appearance: none;
    height: 5px;
    border-radius: 4px;
    background-color: var(--overlay);
    outline: none;
}

.filter-slider::-webkit-slider-thumb {
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--surface);
    cursor: pointer;
}

.filter-slider::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background-color: var(--surface);
    border: none;
    cursor: pointer;
}

.select {
    position: relative;
}

.select__input {
    width: 100%;
    appearance: none;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius);
    padding: 8px 40px 8px 14px;
    font-family: inherit;
    font-size: 1rem;
    background-color: white;
    color: var(--surface);
    cursor: pointer;
    outline: none;
}

.select__trigger {
    width: 100%;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius);
    padding: 8px 40px 8px 14px;
    font-family: inherit;
    font-size: 1rem;
    background-color: white;
    color: var(--surface);
    cursor: pointer;
    outline: none;
    text-align: left;
    display: block;
}

.select__chevron {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
    transition: transform var(--transition-base) ease;
}

.select--open .select__chevron,
.multiselect--open .select__chevron {
    transform: translateY(-50%) rotate(180deg);
}

.select__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: 8px;
    z-index: 100;
    overflow-x: hidden;
    overflow-y: auto;
    max-height: 320px;
}

.select__option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 6px 14px;
    background: none;
    border: none;
    color: var(--surface);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.select__option:not(.select__option--placeholder):hover,
.select__option--selected {
    background-color: var(--cta);
    color: white;
}

.select__group-label {
    padding: 10px 14px 4px;
    font-size: .9rem;
    font-weight: 1000;
    color: var(--overlay);
    letter-spacing: .1rem;
    text-transform: uppercase;
}

/* ── SEARCHABLE SELECT (Tom Select) ── */

.select--searchable .select__chevron {
    pointer-events: auto;
    cursor: pointer;
}

.select--searchable .ts-wrapper {
    width: 100%;
    min-height: 0;
}

.select--searchable .ts-wrapper.single .ts-control,
.select--searchable .ts-wrapper.single .ts-control input {
    cursor: text;
}

.select--searchable .ts-wrapper.single .ts-control {
    width: 100%;
    min-height: 0;
    border: none;
    border-radius: var(--border-radius);
    padding: 0;
    font-family: inherit;
    font-size: 1rem;
    background-color: white;
    background-image: none;
    color: var(--surface);
    box-shadow: none;
}

.select--searchable .ts-wrapper.single .ts-control:after {
    display: none;
}

.select--searchable .ts-wrapper.focus .ts-control,
.select--searchable .ts-wrapper.single.input-active .ts-control {
    background-color: white;
    box-shadow: none;
    overflow: visible;
}

.select--searchable .ts-control > input {
    font-family: inherit;
    font-size: 1rem;
    color: var(--surface);
}

.select--searchable .ts-dropdown {
    left: -2px;
    right: -2px;
    width: auto;
    height: 40vh;
    box-sizing: border-box;
    border: 2px solid var(--surface);
    border-radius: 8px;
    overflow: hidden;
    font-family: inherit;
    font-size: 1rem;
    color: var(--surface);
    box-shadow: none;
    margin: 0;
    z-index: 100;
}

.select--searchable .ts-dropdown-content {
    max-height: none;
    height: 100%;
}

.select--searchable .ts-dropdown .option,
.select--searchable .ts-dropdown .no-results {
    padding: 8px 14px;
}

.select--searchable .ts-dropdown .option.active {
    background-color: var(--cta);
    color: white;
}

.select--searchable .ts-dropdown [data-selectable] .highlight {
    background-color: color-mix(in srgb, var(--cta) 15%, transparent);
}

.select--searchable .ts-dropdown .no-results {
    color: var(--overlay);
}

.city-autocomplete {
    position: relative;
    width: 100%;
}

.city-autocomplete__dropdown {
    position: absolute;
    top: calc(100% - 2px);
    left: 0;
    right: 0;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-dropdown);
    z-index: 100;
    overflow: hidden;
}

.city-autocomplete__dropdown--pill {
    top: calc(100% + 9px);
    left: -12%;
    right: -3%;
}

.city-autocomplete__option {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    background: none;
    border: none;
    color: var(--surface);
    font-family: inherit;
    font-size: 1rem;
    cursor: pointer;
}

.city-autocomplete__option:hover,
.city-autocomplete__option--active {
    background-color: var(--cta);
    color: white;
}

.filter-radio-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.filter-radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: .9rem;
    font-weight: 500;
}

.filter-radio input[type="radio"] {
    width: 22px;
    height: 22px;
    appearance: none;
    border: 2px solid var(--surface);
    border-radius: 50%;
    cursor: pointer;
    flex-shrink: 0;
    background-color: var(--secondary);
}

.filter-radio input[type="radio"]:checked {
    background-color: var(--surface);
    box-shadow: inset 0 0 0 4px var(--secondary);
}

/* ── FILTER MULTISELECT ── */

.multiselect {
    position: relative;
}

.multiselect__dropdown {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: 8px;
    z-index: 100;
    overflow: hidden;
    max-height: 200px;
    overflow-y: auto;
}

.multiselect__option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    cursor: pointer;
    color: var(--surface);
    font-size: 1rem;
}

.multiselect__option:hover,
.multiselect__option:has(.multiselect__checkbox:checked) {
    background-color: var(--cta);
    color: white;
}

.multiselect__checkbox {
    width: 18px;
    height: 18px;
    appearance: none;
    border: 2px solid var(--surface);
    border-radius: 4px;
    cursor: pointer;
    flex-shrink: 0;
    background-color: white;
}

.multiselect__option:has(.multiselect__checkbox:checked) .multiselect__checkbox {
    border-color: white;
    background-image: url("../images/icons/check-KYITfkW.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 90%;
}


.multiselect__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.multiselect__chips:empty {
    margin-top: 0;
}

/* ── ACTIVITY ── */

.activity {
    display: flex;
    min-height: 540px;
}

.activity__left {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: var(--primary);
    color: var(--secondary);
    padding: 80px 80px 80px var(--container-margin);
    gap: 24px;
}

.activity__title {
    text-transform: uppercase;
}

.activity__subtitle {
    font-size: 1rem;
    line-height: 1.5;
    max-width: 320px;
}

.activity__right {
    flex: 0 0 50%;
    display: flex;
}

.activity__image-column {
    flex: 5;
    position: relative;
    overflow: hidden;
    background-color: var(--cta);
}

.activity__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.activity__color-column {
    flex: 4;
    background-color: var(--cta);
}

/* ── HOW IT WORKS ── */

.how-it-works {
    padding: 150px 0;
}

.how-it-works--activities {
    padding: 50px 0 150px;
}

.how-it-works__title {
    font-family: 'Castoro', serif;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 20px;
    color: var(--surface);
}

.how-it-works__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.how-it-works__steps--two-col {
    grid-template-columns: repeat(2, 1fr);
}

.how-it-works__step {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 25px;
    background-color: white;
    border: 2px solid var(--primary);
    color: var(--surface);
    border-radius: var(--border-radius-lg);
}

.how-it-works__number {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--surface);
    color: var(--secondary);
    font-weight: 700;
    font-size: .9rem;
}

.how-it-works__content {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.how-it-works__step-title {
    font-weight: 800;
}

.how-it-works__step-description {
    font-size: .9rem;
    font-weight: 400;
}

/* ── SIGN UP ── */

.sign-up--activities {
    background-image: linear-gradient(#21212166, #21212166), url("../images/sign-up-now-2-khmUO3_.webp");
    box-shadow: 0 4px 17px 0 #00000026;
}

.sign-up {
    min-height: 700px;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    padding: 80px;
}

.sign-up__content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 560px;
    color: var(--secondary);
}

.sign-up__title {
    text-transform: uppercase;
}

.sign-up__subtitle {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

/* ── FOOTER ── */

.footer {
    background-color: var(--primary);
    color: var(--secondary);
    display: flex;
    margin-top: 0;
    overflow: hidden;
}

.footer__left {
    flex: 0 0 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 60px 64px;
    gap: 60px;
}

.footer__brand {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.footer__logo {
    display: inline-flex;
    align-items: center;
}

.footer__logo-img {
    height: 36px;
    width: auto;
    display: block;
}

.footer__tagline {
    font-size: .9rem;
    line-height: 1.5;
}

.footer__nav {
    display: flex;
    justify-content: space-between;
    flex: 1;
}

.footer__nav-group {
    display: flex;
    justify-content: center;
    flex-direction: column;
    gap: 10px;
}

.footer__nav-group a {
    font-size: .9rem;
    width: fit-content;
    transition: transform var(--transition-base) ease;
    display: inline-block;
}

.footer__nav-group a:hover {
    transform: translateX(-3px);
}

.footer__nav-divider {
    display: none;
}

.footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.footer__copyright {
    font-size: .8rem;
    color: var(--accent);
}

.footer__social {
    display: flex;
    gap: 20px;
    align-items: center;
}

.footer__social-link img {
    height: 24px;
    width: auto;
    display: block;
}

.footer__social-link {
    transition: transform var(--transition-base) ease;
    display: inline-block;
}

.footer__social-link:hover {
    transform: translateY(-3px);
}

.footer__right {
    flex: 0 0 50%;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.footer__badge {
    position: absolute;
    top: 50%;
    right: 25%;
    transform: translateY(-50%);
    width: 180px;
}

.footer__badge-img {
    width: 100%;
    height: auto;
    display: block;
}

/* ── TALENTS SECTION ── */

.talents {
    padding: 80px 0;
}

.talents__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30px;
}

.talents__title {
    font-family: 'Castoro', serif;
    font-size: 1.8rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--surface);
}

.talents__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    padding-top: 10px;
}

/* ── EMPTY STATE (shared) ── */

.empty-state {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 8px;
    color: var(--surface);
    padding: 50px 0 80px;
}

#offers-empty {
    min-height: 480px;
}

#talents-empty {
    min-height: 350px;
}

.empty-state__title {
    font-family: 'Castoro', serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: -0.02em;
    margin: 0;
}

.empty-state__subtitle {
    margin: 0;
}

.empty-state__cta {
    margin-top: 24px;
}

/* ── PAGINATION ── */

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 0;
}

.pagination__pages {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination__page {
    min-width: 36px;
    height: 36px;
    justify-content: center;
    padding: 0;
    cursor: pointer;
    background-color: transparent;
    transition: transform var(--transition-slow) ease;
}

.pagination__page:hover {
    transform: scale(var(--hover-scale));
}

.pagination__ellipsis {
    color: var(--surface);
    font-weight: var(--font-weight-bold);
}

.pagination__arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--surface);
    background-color: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-slow) ease;
}

.pagination__arrow:hover {
    transform: scale(var(--hover-scale));
}

.pagination__arrow img {
    width: 18px;
    height: 18px;
}

.tip-callout {
    background-color: var(--accent);
    border: 2px solid var(--surface);
    color: var(--surface);
    border-radius: var(--border-radius-lg);
    padding: 10px 15px;
    max-width: 480px;
    margin-bottom: 25px;
    text-align: left;
    display: flex;
    align-items: center;
    gap: 15px;
}

.tip-callout__icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.tip-callout__text {
    display: flex;
    flex-direction: column;
}

.tip-callout__title {
    font-weight: var(--font-weight-bold);
    margin: 0;
}

.tip-callout__description {
    margin: 0;
}

/* ── TALENT CARD ── */

.talent-card {
    border-radius: var(--border-radius-lg);
    border: 2px solid var(--surface);
    overflow: hidden;
    height: 340px;
    display: flex;
    flex-direction: column;
    background-color: var(--secondary);
    transition: transform var(--transition-slow) ease;
    animation: card-fade-up .5s ease-out backwards;
}

.talent-card:hover {
    transform: scale(var(--hover-scale--little));
}

.talent-card__photo {
    position: relative;
    flex: 1;
    overflow: hidden;
    background-color: var(--primary);
}

.talent-card__sponsored {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--accent);
    color: var(--surface);
    border: 1px solid var(--surface);
    border-radius: 100px;
    padding: 4px 10px 4px 8px;
    font-size: .8rem;
    font-weight: 500;
}

.talent-card__sponsored-icon {
    width: 16px;
    height: 16px;
    display: block;
}

.talent-card__photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0) 32.9%, rgba(64, 31, 21, .8) 100%);
}

.talent-card__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.talent-card__watermark {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    width: 70%;
    opacity: 0.8;
}

.talent-card__photo--empty {
    background-color: var(--primary);
}

.talent-card__photo--empty::after {
    display: none;
}

.talent-card__photo--empty .talent-card__img {
    display: none;
}

.talent-card__photo--empty .talent-card__name {
    color: var(--secondary);
    z-index: 2;
}

.talent-card__photo--empty .talent-card__watermark {
    display: block;
}

.talent-card__name {
    position: absolute;
    bottom: 12px;
    left: 14px;
    z-index: 1;
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    color: var(--secondary);
    letter-spacing: .02em;
    text-transform: uppercase;
}

.talent-card__details {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
    background-color: white;
}

.talent-card--sponsored .talent-card__details {
    background-color: white;
}

/* ── BUSINESSES PAGE ── */

.businesses-page {
    padding: 60px 0 60px;
}

.businesses-header {
    margin-bottom: 28px;
}

.businesses-header h1 {
    text-transform: uppercase;
    color: var(--surface);
}

.businesses-header__subtitle {
    margin-top: 5px;
    font-weight: 500;
    font-size: 1.1rem;
    color: var(--surface);
}

.businesses-search {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-pill);
    padding: 10px 16px;
    max-width: 50%;
    margin-bottom: 32px;
}

.businesses-search__icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.businesses-search__input {
    border: none;
    outline: none;
    font-family: inherit;
    font-size: 1rem;
    background: none;
    width: 100%;
    color: var(--surface);
}

.businesses-search__input::placeholder {
    color: color-mix(in srgb, var(--surface) 50%, transparent);
}


.businesses__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.business-cta-card {
    grid-row: span 3;
    background-color: var(--surface);
    border-radius: var(--border-radius-xl);
    padding: var(--padding-box);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 24px;
}

.business-cta-card__body {
    display: flex;
    flex-direction: column;
}

.business-cta-card__title {
    font-family: 'Castoro', serif;
    font-size: 1.5rem;
    color: var(--secondary);
}

.business-cta-card__description {
    color: var(--secondary);
}

.business-card,
.offer-detail__business {
    display: flex;
    align-items: center;
    gap: 12px;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: 12px;
    color: var(--surface);
    transition: transform var(--transition-slow) ease;
}

.business-card {
    animation: card-fade-up .5s ease-out backwards;
}

.business-card:hover,
.offer-detail__business:hover {
    transform: scale(var(--hover-scale));
}

.business-card__image-wrapper {
    width: 55px;
    height: 55px;
    border-radius: var(--border-radius);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.business-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-card__watermark {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 70%;
    opacity: 0.8;
}

.business-card__image-wrapper--empty {
    background-color: var(--primary);
}

.business-card__image-wrapper--empty .business-card__image {
    display: none;
}

.business-card__image-wrapper--empty .business-card__watermark {
    display: block;
}

.business-card__info {
    flex: 1;
    min-width: 0;
}

.business-card__name {
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.business-card__meta {
    font-size: .9rem;
    color: var(--surface);
    margin-top: 4px;
}

.business-card__chevron {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* ── OFFER DETAIL ── */

.offer-detail {
    padding: 45px 0;
    color: var(--surface);
}

.offer-detail__title {
    margin-bottom: 50px;
}

.offer-detail__layout {
    position: relative;
    display: flex;
    gap: 30px;
    align-items: start;
}

.blur-locked {
    filter: blur(4px);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    pointer-events: none;
    user-select: none;
}

.detail-lock-modal {
    position: fixed;
    top: 35%;
    left: 50%;
    z-index: 1000;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 4px 30px 0 color-mix(in srgb, black 30%, transparent);
    padding: var(--padding-modal);
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    gap: 15px;
    text-align: center;
    animation: detail-lock-modal-in .2s ease-out forwards;
}

@keyframes detail-lock-modal-in {
    from { opacity: 0; transform: translateX(-50%) translateY(12px) scale(0.97); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0)    scale(1); }
}

.detail-lock-modal--tall {
    top: 50%;
    max-height: 90vh;
    overflow-y: auto;
    animation: detail-lock-modal-tall-in .2s ease-out forwards;
}

@keyframes detail-lock-modal-tall-in {
    from { opacity: 0; transform: translate(-50%, -50%) scale(0.97); }
    to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

.detail-lock-modal__divider {
    width: 100%;
    border: none;
    border-top: 1px solid var(--overlay);
}

.subscription-benefits {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: left;
}

.subscription-benefits__title {
    font-weight: var(--font-weight-bold);
}

.subscription-benefits__item {
    display: flex;
    align-items: center;
    gap: 10px;
    background-color: var(--accent);
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-lg);
    padding: 10px;
}

.subscription-benefits__item-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.subscription-layout {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    flex-wrap: wrap;
}

.subscription-card-column {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.subscription-card {
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: var(--padding-modal);
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: center;
}

.subscription-card__cancel-hint {
    color: var(--surface);
}

.subscription-benefits-column {
    display: flex;
    flex-direction: column;
    gap: 20px;
    flex: 1;
    min-width: 280px;
}

.offer-detail__left,
.offer-detail__right {
    flex: 1;
    min-width: 0;
}

.offer-detail__description-box {
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: var(--padding-box);
    background-color: white;
}

.offer-detail__description {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.offer-detail__description ul,
.offer-detail__description ol {
    padding-left: 20px;
}

.offer-detail__description p:empty {
    display: none;
}

.offer-detail__right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.offer-detail__business-info {
    flex: 1;
    min-width: 0;
}

.offer-detail__business-name {
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offer-detail__business-meta {
    font-size: .9rem;
    margin-top: 4px;
}

.offer-detail__business-chevron {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.offer-detail__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.offer-detail__group-label {
    font-weight: var(--font-weight-bold);
}

.offer-detail__workdays {
    display: flex;
    justify-content: space-between;
}

.offer-detail__workday {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.offer-detail__workday-label {
    font-size: .8rem;
    font-weight: 600;
    color: var(--surface);
}

.offer-detail__workday-icon {
    width: 20px;
    height: 20px;
}

.offer-detail__workday--off .offer-detail__workday-label {
    color: color-mix(in srgb, var(--surface) 35%, transparent);
}

.offer-detail__pay-box {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: 0 16px;
}

.offer-detail__pay-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 0;
    border-bottom: 1px solid var(--tertiary);
}

.offer-detail__pay-row:last-child {
    border-bottom: none;
}

.offer-detail__pay-label {
    font-weight: var(--font-weight-bold);
}

.offer-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.button__icon {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

/* ── OFFER DETAIL BAR ── */

.offer-detail-bar {
    position: sticky;
    bottom: 0;
    background-color: var(--secondary);
    padding: 30px var(--container-margin);
    display: flex;
    align-items: center;
    gap: 30px;
    border-top: 2px solid var(--surface);
}

.offer-detail-bar__actions {
    display: flex;
    gap: 12px;
    flex: 1;
}

.offer-detail-bar__actions .button {
    flex: 1;
    justify-content: center;
}

.offer-detail-bar__actions--compact {
    flex: 0 0 50%;
}

.offer-detail-bar__promo {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
    color: var(--surface);
}

.offer-detail-bar__promo-icon {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.offer-detail-bar__promo-title {
    font-weight: var(--font-weight-bold);
}

.offer-detail-bar__promo-sub {
    font-size: .9rem;
}

/* ── TALENT DETAIL ── */

.talent-detail {
    padding: 45px 0;
    color: var(--surface);
}

.talent-detail__title {
    text-transform: uppercase;
    color: var(--surface);
    margin-bottom: 40px;
}

.talent-detail__photos {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 16px;
    margin-bottom: 40px;
}

.talent-detail__photo {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--border-radius-lg);
    overflow: hidden;
    cursor: pointer;
    animation: card-fade-up .5s ease-out backwards;
}

.talent-detail__photo-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    transition: transform var(--transition-slow) ease;
}

.talent-detail__photo:hover .talent-detail__photo-play {
    transform: translate(-50%, -50%) scale(var(--hover-scale--large));
}

.talent-detail__photo-play img {
    width: 32px;
    height: 32px;
}

.blur-locked .talent-detail__photo {
    animation: none;
}

.blur-locked .offer-card {
    animation: none;
}

.blur-locked .talent-card {
    animation: none;
}

.talent-detail__photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.talent-detail__section-heading {
    text-transform: uppercase;
    margin-bottom: 24px;
}

.talent-detail__description-box {
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: 15px 20px;
    background-color: white;
    margin-bottom: 30px;
}

.talent-detail__description {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.talent-detail__description ul,
.talent-detail__description ol {
    padding-left: 20px;
}

.talent-detail__description p:empty {
    display: none;
}

.talent-detail__group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.talent-detail__group-label {
    font-weight: var(--font-weight-bold);
}

.talent-detail__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.talent-detail__rows {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: 0 16px;
    margin-top: 30px;
    margin-bottom: 40px;
}

.talent-detail__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--tertiary);
}

.talent-detail__row:last-child {
    border-bottom: none;
}

.talent-detail__row-label {
    font-weight: 600;
    color: var(--surface);
}

.talent-detail__row-value {
    color: var(--surface);
    text-align: right;
}

.talent-detail__divider {
    border: none;
    border-top: 2px solid var(--surface);
    margin: 0 0 40px;
}

/* ── BUSINESS DETAIL ── */

.business-detail {
    padding: 45px 0 100px;
    color: var(--surface);
}

.business-detail__title {
    text-transform: uppercase;
    color: var(--surface);
    margin-bottom: 40px;
}

.business-detail__layout {
    position: relative;
    display: flex;
    gap: 30px;
    align-items: start;
}

.business-detail__left,
.business-detail__right {
    flex: 1;
    min-width: 0;
}

.business-detail__hero {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 24px;
    overflow: hidden;
    border: none;
    padding: 0;
    cursor: pointer;
    margin-bottom: 15px;
    animation: card-fade-up .5s ease-out backwards;
}

.business-detail__hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-detail__thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
}

.business-detail__thumb {
    position: relative;
    aspect-ratio: 1;
    border-radius: 18px;
    overflow: hidden;
    border: none;
    padding: 0;
    cursor: pointer;
    animation: card-fade-up .5s ease-out backwards;
}

.business-detail__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.business-detail__thumb-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: flex;
    transition: transform var(--transition-slow) ease;
}

.business-detail__thumb:hover .business-detail__thumb-play {
    transform: translate(-50%, -50%) scale(var(--hover-scale--large));
}

.business-detail__thumb-play img {
    width: 45px;
    height: 45px;
}

.business-detail__right {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.business-detail__description-box {
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: 20px;
    background-color: white;
}

.business-detail__description {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.business-detail__description ul,
.business-detail__description ol {
    padding-left: 20px;
}

.business-detail__description p:empty {
    display: none;
}

.business-detail__rows {
    display: flex;
    flex-direction: column;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: 0 20px;
}

.business-detail__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--tertiary);
}

.business-detail__row:last-child {
    border-bottom: none;
}

.business-detail__row-label {
    font-weight: 600;
    color: var(--surface);
}

.business-detail__row-value {
    color: var(--surface);
    text-align: right;
}

.business-detail__divider {
    border: none;
    border-top: 2px solid var(--surface);
    margin: 40px 0;
}

.business-detail__offers-heading {
    font-family: 'Castoro', serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: -0.02em;
    color: var(--surface);
    margin-bottom: 24px;
}

.business-detail__offers-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 15px;
}

.business-detail__offers-empty {
    color: var(--surface);
}

.detail-lock-modal--inline {
    position: static;
    margin: 0 auto;
    animation: none;
}

/* ── LIGHTBOX ── */

.lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
}

.lightbox:not([hidden]) .lightbox__backdrop {
    animation: lightbox-backdrop-in 0.25s ease;
}

.lightbox:not([hidden]) .lightbox__box {
    animation: lightbox-box-in 0.25s ease;
}

@keyframes lightbox-backdrop-in {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes lightbox-box-in {
    from { opacity: 0; transform: scale(0.96); }
    to { opacity: 1; transform: scale(1); }
}

.lightbox__backdrop {
    position: absolute;
    inset: 0;
    background-color: color-mix(in srgb, black 80%, transparent);
}

.lightbox__box {
    position: relative;
    z-index: 1;
    width: fit-content;
    max-width: 1200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.lightbox__row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: fit-content;
}

.lightbox__close {
    position: absolute;
    top: -60px;
    right: 0;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--cta);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-slow) ease;
}

.lightbox__close:hover {
    transform: scale(var(--hover-scale--large));
}

.lightbox__close img {
    width: 20px;
    height: 20px;
}

.lightbox__nav {
    position: relative;
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-slow) ease;
}

.lightbox__nav:hover {
    transform: scale(var(--hover-scale--large));
}

.lightbox__nav img {
    width: 36px;
    height: 36px;
}

.lightbox__frame {
    position: relative;
    flex-shrink: 0;
    width: fit-content;
    max-width: min(90vw, 1040px);
    max-height: 80vh;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    background-color: var(--surface);
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox__slide-media {
    display: block;
    width: auto;
    height: auto;
    max-width: min(80vw, 1040px);
    max-height: 76vh;
}

.lightbox__slide iframe {
    display: block;
    width: min(80vw, 1040px);
    aspect-ratio: 16 / 9;
    max-height: 76vh;
    border: none;
}

.lightbox__dots {
    display: flex;
    align-items: center;
    gap: 6px;
}

.lightbox__dot {
    width: 8px;
    height: 8px;
    border-radius: 100px;
    background-color: color-mix(in srgb, var(--secondary) 40%, transparent);
    cursor: pointer;
    border: none;
    padding: 0;
    transition: width var(--transition-slow) ease, background-color var(--transition-slow) ease;
}

.lightbox__dot--active {
    width: 22px;
    background-color: var(--secondary);
}

/* ── COOKIE CONSENT ── */

.cookie-consent {
    position: fixed;
    left: 20px;
    right: 20px;
    bottom: 20px;
    z-index: 10001;
    display: flex;
    justify-content: center;
}

.cookie-consent__box {
    width: 100%;
    max-width: 620px;
    max-height: calc(100vh - var(--header-height) - 40px);
    overflow-y: auto;
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 4px 30px 0 color-mix(in srgb, black 30%, transparent);
    padding: var(--padding-modal);
    display: flex;
    flex-direction: column;
    gap: 20px;
    color: var(--surface);
    animation: cookie-consent-in .3s ease-out;
}

@keyframes cookie-consent-in {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.cookie-consent__title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    text-transform: uppercase;
    margin-bottom: 10px;
}

.cookie-consent__text {
    line-height: 1.5;
}

.cookie-consent__text a {
    color: var(--surface);
    text-decoration: underline;
}

.cookie-consent__panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border-top: 1px solid var(--tertiary);
    padding-top: 16px;
}

.cookie-consent__option {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.cookie-consent__option-title {
    font-weight: var(--font-weight-bold);
}

.cookie-consent__option input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin-top: 2px;
    appearance: none;
    border: 2px solid var(--surface);
    border-radius: 4px;
    cursor: pointer;
    background-color: white;
}

.cookie-consent__option input[type="checkbox"]:focus {
    outline: none;
}

.cookie-consent__option input[type="checkbox"]:checked {
    background-image: url("../images/icons/check-light-ztuqrzF.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 85%;
    background-color: var(--surface);
}

.cookie-consent__option input[type="checkbox"]:disabled {
    cursor: not-allowed;
    opacity: .6;
}

.cookie-consent__option-text {
    font-size: .9rem;
    color: color-mix(in srgb, var(--surface) 75%, transparent);
}

.cookie-consent__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.cookie-consent__actions .button {
    flex: 1;
    justify-content: center;
    white-space: nowrap;
}

/* ── LEGAL PAGE ── */

.legal-page {
    padding: 60px 0 100px;
    color: var(--surface);
}

.legal-page__title {
    text-transform: uppercase;
    margin-bottom: 8px;
}

.legal-page__updated {
    color: color-mix(in srgb, var(--surface) 65%, transparent);
    margin-bottom: 40px;
}

.legal-page__content {
    max-width: 780px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    line-height: 1.6;
}

.legal-page__content h2 {
    font-size: 1.5rem;
    line-height: 1.9rem;
    margin-top: 24px;
}

.legal-page__content h3 {
    font-size: 1.2rem;
    line-height: 1.5rem;
}

.legal-page__content ul {
    padding-left: 20px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.legal-page__content a {
    color: var(--surface);
    text-decoration: underline;
}

.legal-page__table-wrapper {
    overflow-x: auto;
}

.legal-page__table {
    width: 100%;
    border-collapse: collapse;
    font-size: .95rem;
}

.legal-page__table th,
.legal-page__table td {
    text-align: left;
    padding: 10px 12px;
    border: 1px solid var(--tertiary);
    vertical-align: top;
}

.legal-page__table th {
    background-color: var(--accent);
    font-weight: var(--font-weight-bold);
}

@media (max-width: 1100px) {
    .cookie-consent {
        left: 12px;
        right: 12px;
        bottom: 12px;
    }

    .cookie-consent__actions {
        flex-direction: column;
    }

    .cookie-consent__actions .button {
        width: 100%;
    }
}

/* ── LOGIN PAGE ── */

.login-page {
    display: flex;
    justify-content: center;
    padding: 60px 20px 80px;
}

.login-page__inner {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.login-page__title {
    text-transform: uppercase;
    color: var(--surface);
    text-align: center;
}

.login-page__subtitle {
    text-align: center;
    color: var(--surface);
    margin-top: -8px;
}

.login-page__error {
    background-color: color-mix(in srgb, var(--cta) 15%, transparent);
    border: 1px solid var(--cta);
    color: var(--cta);
    border-radius: var(--border-radius);
    padding: 12px 16px;
    font-size: .9rem;
}

.login-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.login-form__field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.login-form__label {
    font-weight: var(--font-weight-bold);
    font-size: .9rem;
    color: var(--surface);
}

.login-form__input {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius);
    background-color: white;
    font-family: inherit;
    font-size: 1rem;
    color: var(--surface);
    outline: none;
}

.login-form__input::placeholder {
    color: color-mix(in srgb, var(--surface) 40%, transparent);
}

.login-form__input:focus {
    border-color: var(--cta);
}

.login-form__password-input {
    position: relative;
}

.login-form__password-input .login-form__input {
    padding-right: 44px;
}

.login-form__password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
}

.login-form__password-toggle img {
    width: 20px;
    height: 20px;
}

.login-form__forgot {
    font-weight: var(--font-weight-bold);
    color: var(--surface);
    text-align: center;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.login-form__submit {
    margin-top: -8px;
}

.login-register {
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-align: center;
}

.login-register__text {
    font-weight: var(--font-weight-bold);
    color: var(--surface);
}

/* ── CONFIRM MODAL ── */

.confirm-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.confirm-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.4);
}

.confirm-modal__dialog {
    position: relative;
    background-color: white;
    animation: lang-modal-in .2s ease-out;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 4px 30px 0 color-mix(in srgb, black 30%, transparent);
    padding: var(--padding-modal);
    width: 100%;
    max-width: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

#subscription-cancel-confirm-modal .confirm-modal__dialog,
#subscription-reactivate-confirm-modal .confirm-modal__dialog,
#payment-method-delete-confirm-modal .confirm-modal__dialog,
#welcome-modal .confirm-modal__dialog,
#role-info-modal .confirm-modal__dialog {
    max-width: 400px;
}

.confirm-modal__title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.9rem;
    text-transform: uppercase;
    color: var(--surface);
}

.confirm-modal__text {
    color: var(--surface);
}

.confirm-modal__close {
    width: 100%;
    justify-content: center;
}

.confirm-modal__close-icon {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--surface);
    padding: 0;
    display: flex;
    align-items: center;
}

.confirm-modal__close-icon img {
    width: 20px;
    height: 20px;
}

/* ── SPONSOR MODAL ── */

.sponsor-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.sponsor-modal__backdrop {
    position: absolute;
    inset: 0;
    background-color: rgba(0,0,0,0.4);
}

.sponsor-modal__dialog {
    position: relative;
    background-color: var(--secondary);
    animation: lang-modal-in .2s ease-out;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    box-shadow: 0 4px 30px 0 color-mix(in srgb, black 30%, transparent);
    padding: var(--padding-modal);
    width: 100%;
    max-width: 480px;
    display: flex;
    flex-direction: column;
    gap: 25px;
    text-align: left;
    max-height: 90vh;
    overflow-y: auto;
}

.sponsor-modal__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    margin-bottom: 10px;
}

.sponsor-modal__title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 2.1rem;
    line-height: 2.3rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--surface);
}

.sponsor-modal__subtitle {
    color: var(--surface);
    margin-top: 5px;
    font-weight: 600;
}

.sponsor-modal__close {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--surface);
    display: flex;
    align-items: center;
}

.sponsor-modal__close img {
    width: 28px;
    height: 28px;
}

.sponsor-modal__tiers-group {
    display: flex;
    flex-direction: column;
}

.sponsor-modal__offer-name {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--surface);
    margin-bottom: 5px;
}

.sponsor-modal__current-expiry {
    font-weight: 600;
    color: var(--surface);
}

.sponsor-modal__tiers {
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
}

.sponsor-modal__tiers-label {
    font-weight: var(--font-weight-bold);
    color: var(--surface);
    margin-bottom: 8px;
}

.sponsor-modal__tier {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    border-bottom: 1px solid var(--tertiary);
    cursor: pointer;
}

.sponsor-modal__tier:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.sponsor-modal__tier-days {
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: var(--font-weight-bold);
    color: var(--surface);
    flex: 1;
}

.sponsor-modal__tier-price {
    font-weight: var(--font-weight-bold);
    color: var(--surface);
}

.sponsor-modal__tier input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background-color: white;
}

.sponsor-modal__tier input[type="radio"]:checked {
    background-image: radial-gradient(circle, var(--surface) 45%, transparent 45%);
}

#sponsor-modal-tiers-step,
#sponsor-modal-payment-step {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.sponsor-modal__payment-error {
    font-size: 0.9rem;
    color: var(--alert);
    margin: 0;
}

/* ── ABOUT PAGE ── */

.about-page {
    padding: 60px 0;
}

.about-hero {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    margin-bottom: 80px;
}

.about-hero__text {
    flex: 1;
}

.about-hero__description {
    width: 80%;
}

.about-hero__images {
    flex: 1;
    display: flex;
    gap: 25px;
    align-items: stretch;
    height: 400px;
}

.about-hero__images-left {
    flex: 1;
}

.about-hero__images-right {
    flex: 2;
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.about-hero__image--1 {
    height: 300px;
}

.about-hero__image--2 {
    width: 180px;
    height: 200px;
}

.about-hero__image--3 {
    height: 180px;
}

.about-hero__image {
    background-size: cover;
    background-position: top;
    border-radius: var(--border-radius-xl);
}

.about-hero__image--center {
    background-position: center;
}

.about-hero__text h1 {
    text-transform: uppercase;
    color: var(--surface);
    margin-bottom: 24px;
}

.about-hero__description {
    color: var(--surface);
    font-size: 1.05rem;
    line-height: 1.65;
}

.about-values {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 80px;
}

.about-value-card {
    background-color: var(--accent);
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-lg);
    padding: var(--padding-box);
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.about-value-card__title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--surface);
    font-size: 1.3rem;
    letter-spacing: 0;
}

.about-value-card__description {
    color: var(--surface);
    line-height: 1.5;
}

.about-founder {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 50px;
    align-items: center;
}

.about-founder__photo {
    width: 240px;
    height: 240px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.about-founder__bio {
    color: var(--surface);
    font-size: 1rem;
    line-height: 1.7;
    width: 50%;
}

/* ── REGISTRATION ── */

.register-page {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 60px 20px 80px;
}

.register-page__inner {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.register-page__inner--wide {
    max-width: 600px;
}

.register-page__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.register-page__heading {
    color: var(--surface);
    text-align: center;
    text-transform: uppercase;
    width: calc(100% + 60px);
    margin-inline: -30px;
}

.register-page--signup .register-page__heading {
    width: auto;
    max-width: none;
    white-space: nowrap;
    margin-inline: 0;
}

.register-page__subtitle {
    text-align: center;
    color: var(--surface);
    font-weight: 500;
}

/* Type selector page */

.register-selector {
    padding: 60px 20px 80px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 32px;
}

.register-selector__title {
    text-align: center;
    color: var(--surface);
    text-transform: uppercase;
    margin-bottom: 20px;
}

.register-selector__cards {
    width: 100%;
    max-width: 460px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.register-selector__cta-bar {
    display: none;
}

.register-selector__cta {
    width: 100%;
    max-width: 460px;
    justify-content: center;
}

.register-type__card {
    border: 2px solid var(--surface);
    border-radius: 20px;
    padding: 30px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    transition: background-color 0.15s;
    text-align: center;
    width: 100%;
    box-sizing: border-box;
}

.register-type__card--selected {
    background-color: var(--surface);
}

.register-type__card--selected .register-type__label {
    color: var(--secondary);
}

.register-type__icon {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.register-type__icon--selected {
    display: none;
}

.register-type__card--selected .register-type__icon--default {
    display: none;
}

.register-type__card--selected .register-type__icon--selected {
    display: block;
}

.register-type__label {
    color: var(--surface);
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}

/* Form */

.register-form,
.profile-form {
    display: flex;
    flex-direction: column;
    gap: 30px;
    width: 100%;
}

.register-form__field,
.profile-form__field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.register-form__label,
.profile-form__label {
    font-size: 0.9rem;
    font-weight: var(--font-weight-bold);
    color: var(--surface);
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.register-form__label-count,
.profile-form__label-count {
    font-size: 0.9rem;
    color: var(--surface);
}

.register-form__field-hint,
.profile-form__field-hint {
    font-weight: 400;
    font-size: 0.9rem;
    color: var(--surface);
    line-height: 1.4;
}

.register-form__input,
.register-form__select,
.register-form__textarea,
.profile-form__input,
.profile-form__select,
.profile-form__textarea {
    border: 2px solid var(--surface);
    border-radius: var(--border-radius);
    padding: 10px 12px;
    font-family: inherit;
    font-size: 1rem;
    color: var(--surface);
    background-color: white;
    outline: none;
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}

.register-form__input::placeholder,
.register-form__textarea::placeholder,
.profile-form__input::placeholder,
.profile-form__textarea::placeholder {
    color: color-mix(in srgb, var(--surface) 40%, transparent);
    font-weight: 400;
}

.register-form__input:focus,
.register-form__select:focus,
.register-form__textarea:focus,
.profile-form__input:focus,
.profile-form__select:focus,
.profile-form__textarea:focus {
    border-color: var(--cta);
}

input[type="date"].profile-form__input {
    color: var(--surface);
    -webkit-text-fill-color: var(--surface);
    color-scheme: light;
    cursor: pointer;
}

input[type="date"].profile-form__input::-webkit-calendar-picker-indicator {
    padding: 0;
    margin: 0;
}

.register-form__textarea,
.profile-form__textarea {
    resize: none;
    min-height: 350px;
}

.register-form__textarea--short,
.profile-form__textarea--short {
    min-height: 200px;
}

.register-form__quill,
.profile-form__quill {
    border: 2px solid var(--surface);
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: white;
}

.register-form__quill .ql-toolbar.ql-snow,
.profile-form__quill .ql-toolbar.ql-snow {
    border: none;
    border-bottom: 2px solid var(--surface);
    font-family: inherit;
    padding: 8px 10px;
}

.register-form__quill .ql-container.ql-snow,
.profile-form__quill .ql-container.ql-snow {
    border: none;
    font-family: inherit;
    font-size: 1rem;
}

.register-form__quill .ql-editor,
.profile-form__quill .ql-editor {
    min-height: 250px;
    color: var(--surface);
}

.register-form__quill .ql-editor.ql-blank::before,
.profile-form__quill .ql-editor.ql-blank::before {
    color: color-mix(in srgb, var(--surface) 40%, transparent);
    font-style: normal;
}

.register-form__quill .ql-editor ol,
.profile-form__quill .ql-editor ol {
    padding-left: 0;
}

.register-form__quill .ql-stroke,
.profile-form__quill .ql-stroke {
    stroke: var(--surface);
}

.register-form__quill .ql-fill,
.profile-form__quill .ql-fill {
    fill: var(--surface);
}

.register-form__quill .ql-picker,
.profile-form__quill .ql-picker {
    color: var(--surface);
}

.register-form__quill .ql-toolbar.ql-snow button,
.profile-form__quill .ql-toolbar.ql-snow button {
    border-radius: var(--border-radius);
}

.register-form__quill .ql-toolbar.ql-snow button.ql-underline svg,
.profile-form__quill .ql-toolbar.ql-snow button.ql-underline svg {
    transform: translateY(1px);
}

.register-form__quill .ql-toolbar.ql-snow button.ql-active,
.register-form__quill .ql-toolbar.ql-snow .ql-picker-label.ql-active,
.profile-form__quill .ql-toolbar.ql-snow button.ql-active,
.profile-form__quill .ql-toolbar.ql-snow .ql-picker-label.ql-active {
    background-color: var(--accent);
}

.register-form__quill .ql-toolbar.ql-snow button.ql-active .ql-stroke,
.register-form__quill .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke,
.register-form__quill .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke,
.profile-form__quill .ql-toolbar.ql-snow button.ql-active .ql-stroke,
.profile-form__quill .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-stroke,
.profile-form__quill .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke {
    stroke: var(--surface) !important;
}

.register-form__quill .ql-toolbar.ql-snow button.ql-active .ql-fill,
.register-form__quill .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill,
.register-form__quill .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill,
.profile-form__quill .ql-toolbar.ql-snow button.ql-active .ql-fill,
.profile-form__quill .ql-toolbar.ql-snow .ql-picker-label.ql-active .ql-fill,
.profile-form__quill .ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill {
    fill: var(--surface) !important;
}

.register-form__quill .ql-picker-options,
.profile-form__quill .ql-picker-options {
    border-radius: var(--border-radius);
    border-color: var(--surface);
}

.register-form__quill .ql-picker-item.ql-selected,
.profile-form__quill .ql-picker-item.ql-selected {
    color: var(--cta);
}

/* :hover state scoped to real pointing devices — otherwise it sticks after a tap on touch screens */
@media (hover: hover) {
    .register-form__quill .ql-toolbar.ql-snow button:hover,
    .register-form__quill .ql-toolbar.ql-snow .ql-picker-label:hover,
    .profile-form__quill .ql-toolbar.ql-snow button:hover,
    .profile-form__quill .ql-toolbar.ql-snow .ql-picker-label:hover {
        background-color: var(--accent);
    }

    .register-form__quill .ql-toolbar.ql-snow button:hover .ql-stroke,
    .register-form__quill .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke,
    .profile-form__quill .ql-toolbar.ql-snow button:hover .ql-stroke,
    .profile-form__quill .ql-toolbar.ql-snow .ql-picker-label:hover .ql-stroke {
        stroke: var(--surface) !important;
    }

    .register-form__quill .ql-toolbar.ql-snow button:hover .ql-fill,
    .register-form__quill .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill,
    .profile-form__quill .ql-toolbar.ql-snow button:hover .ql-fill,
    .profile-form__quill .ql-toolbar.ql-snow .ql-picker-label:hover .ql-fill {
        fill: var(--surface) !important;
    }

    .register-form__quill .ql-picker-item:hover,
    .profile-form__quill .ql-picker-item:hover {
        color: var(--cta);
    }
}

.register-form__select,
.profile-form__select {
    appearance: none;
    cursor: pointer;
}

.register-form__error,
.profile-form__error {
    font-size: 0.9rem;
    color: var(--alert);
    margin: 0;
}

.register-form__checkboxes {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.register-form__checkbox,
.profile-form__checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--surface);
}

.register-form__checkbox input[type="checkbox"],
.profile-form__checkbox input[type="checkbox"] {
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    appearance: none;
    border: 2px solid var(--surface);
    border-radius: 4px;
    cursor: pointer;
    background-color: white;
}

.register-form__checkbox input[type="checkbox"]:focus {
    outline: none;
}

.register-form__checkbox input[type="checkbox"]:checked,
.profile-form__checkbox input[type="checkbox"]:checked {
    background-image: url("../images/icons/check-light-ztuqrzF.svg");
    background-position: center;
    background-repeat: no-repeat;
    background-size: 85%;
    background-color: var(--surface);
}

.register-form__checkbox-label,
.profile-form__checkbox-label {
    font-size: 0.9rem;
    color: var(--surface);
    line-height: 1.4;
    font-weight: 500;
    cursor: default;
    text-underline-offset: 2px;
}

.register-form__checkbox-icon,
.profile-form__checkbox-icon {
    width: 16px;
    height: 16px;
    vertical-align: text-top;
    margin-left: 3px;
}

a.register-form__checkbox-label {
    font-weight: var(--font-weight-bold);
    text-decoration: underline;
    cursor: pointer;
}

.register-form__checkbox-asterisk {
    display: inline-block;
    text-decoration: none;
}

.register-form__submit {
    justify-content: center;
    margin-top: 4px;
}

.register-form__field .select__trigger,
.profile-form__field .select__trigger {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 12px;
}

.register-form__field .multiselect__dropdown,
.profile-form__field .multiselect__dropdown {
    max-height: none;
    overflow-y: visible;
}

.register-form__field .multiselect__dropdown {
    top: 43px;
}

/* Radio group */

.register-form__radio-group,
.profile-form__radio-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.register-form__radio,
.profile-form__radio {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--surface);
}

.register-form__radio input[type="radio"],
.profile-form__radio input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    cursor: pointer;
    border: 2px solid var(--surface);
    border-radius: 50%;
    background-color: white;
}

.register-form__radio input[type="radio"]:checked,
.profile-form__radio input[type="radio"]:checked {
    background-image: radial-gradient(circle, var(--surface) 45%, transparent 45%);
}

/* Pay slider */

.register-form__pay-display,
.profile-form__pay-display {
    text-align: center;
    font-weight: var(--font-weight-bold);
    color: var(--surface);
    font-size: 1rem;
    margin: 0;
}

.register-form__slider,
.profile-form__slider {
    width: 100%;
    cursor: pointer;
    appearance: none;
    height: 4px;
    border-radius: 2px;
    outline: none;
    background: linear-gradient(to right, var(--surface) 23.5%, color-mix(in srgb, var(--surface) 25%, transparent) 23.5%);
}

.register-form__slider::-webkit-slider-thumb,
.profile-form__slider::-webkit-slider-thumb {
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--surface);
    cursor: pointer;
}

.register-form__slider::-moz-range-thumb,
.profile-form__slider::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background-color: var(--surface);
    cursor: pointer;
    border: none;
}

/* Progress bar */

.register-progress {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.register-progress__bar {
    width: 100%;
    height: 6px;
    background-color: var(--overlay);
    border-radius: 3px;
    overflow: hidden;
}

.register-progress__fill {
    height: 100%;
    background-color: var(--surface);
    border-radius: 3px;
    transition: width 0.4s ease;
}

.register-progress__label {
    font-weight: 400;
    font-size: 0.8rem;
    color: var(--surface);
    margin: 0;
    text-align: left;
}

/* Photo upload grid */

.upload-grid {
    display: grid;
    grid-template-columns: repeat(3, 100px);
    gap: 10px;
    margin-top: 15px;
}

.upload-grid__item {
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 16px;
    overflow: hidden;
    background-color: color-mix(in srgb, var(--surface) 8%, transparent);
}

.upload-grid__item[draggable="true"] {
    cursor: grab;
}

.upload-grid__thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upload-grid__item--dragging {
    opacity: 0.4;
    cursor: grabbing;
}

.upload-grid__item--dragover {
    outline: 2px solid var(--cta);
    outline-offset: -2px;
}

.upload-grid__item--video {
    display: flex;
    align-items: center;
    justify-content: center;
}

.upload-grid__video-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.upload-grid__video-name {
    font-size: 0.7rem;
    color: var(--surface);
    text-align: center;
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    word-break: break-all;
}

.upload-grid__cover {
    position: absolute;
    bottom: 6px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--secondary);
    color: var(--surface);
    font-size: 0.65rem;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    padding: 3px 8px;
    border-radius: 40px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.upload-grid__remove {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background-color: var(--secondary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.upload-grid__remove-icon {
    width: 14px;
    height: 14px;
}

.upload-grid__loading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: color-mix(in srgb, var(--surface) 50%, transparent);
}

.upload-grid__loading::after {
    content: '';
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 3px solid color-mix(in srgb, var(--secondary) 35%, transparent);
    border-top-color: var(--secondary);
    animation: button-spinner-rotate .8s linear infinite;
}

.upload-grid__add {
    width: 100px;
    height: 100px;
    border: 2px solid var(--surface);
    border-radius: 16px;
    background-color: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: border-color var(--transition-base);
}

.upload-grid__add:hover {
    border-color: var(--cta);
}

.upload-grid__add-circle {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: var(--cta);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: transform var(--transition-slow) ease;
}

.upload-grid__add:hover .upload-grid__add-circle {
    transform: scale(var(--hover-scale--medium));
}

.upload-grid__add-icon {
    width: 18px;
    height: 18px;
}

/* ── PROFILE PAGE ── */

.profile-page {
    padding: 50px 0 80px;
}

.profile-header {
    margin-bottom: 40px;
}

.profile-header__title {
    text-transform: uppercase;
    color: var(--surface);
}

.profile-header__subtitle {
    margin-top: 5px;
    font-weight: 500;
    color: var(--surface);
}

.profile-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.profile-menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    max-width: 560px;
}

.profile-menu__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 20px 20px 20px 16px;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    background-color: white;
    color: var(--surface);
    transition: transform var(--transition-slow) ease;
}

.profile-menu__item:hover {
    transform: scale(var(--hover-scale));
}

.profile-menu__icon-wrapper {
    width: 40px;
    height: 40px;
    background-color: var(--secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.profile-menu__icon {
    width: 20px;
    height: 20px;
}

.profile-menu__label {
    flex: 1;
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
}

.profile-menu__chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.profile-sidebar {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
}

.profile-sidebar__promo {
    width: 100%;
    background-color: var(--surface);
    border-radius: var(--border-radius-xl);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.profile-sidebar__promo-title {
    color: var(--secondary);
    font-family: 'Castoro', serif;
    font-size: 1.5rem;
    line-height: 2rem;
}

.profile-sidebar__promo-button {
    border-color: var(--secondary);
    color: var(--secondary);
    margin-top: 10px;
}

.profile-sidebar__promo-button:hover {
    border-color: var(--secondary);
    color: var(--secondary);
}

.profile-sidebar__promo--sponsored {
    background-color: var(--accent);
    border: 2px solid var(--primary);
}

.profile-sidebar__promo-title--sponsored {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0;
    color: var(--primary);
}

.profile-sidebar__promo-days {
    color: var(--primary);
    font-size: 1rem;
}

.profile-sidebar__support {
    margin-top: 10px;
}

.profile-sidebar__support-link {
    font-weight: var(--font-weight-bold);
    color: var(--surface);
    text-decoration: underline;
}

.profile-sidebar__logout {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: var(--font-weight-bold);
    color: var(--surface);
    transition: transform var(--transition-base) ease;
}

.profile-sidebar__logout:hover {
    transform: translateX(-3px);
}

.profile-sidebar__logout-icon {
    width: 24px;
    height: 24px;
}

/* ── PROFILE SUBPAGE (personal info, etc.) ── */

.profile-subpage {
    display: flex;
    flex-direction: column;
    min-height: 60vh;
    padding: 50px 0;
}

.profile-subpage > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-subpage__inner {
    max-width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.profile-subpage-header {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 40px;
}

.profile-subpage-header:has(+ .profile-subpage-header__subtitle) {
    margin-bottom: 5px;
}

.profile-subpage-header__back {
    display: flex;
    align-items: center;
    transition: transform var(--transition-slow) ease;
}

.profile-subpage-header__back:hover {
    transform: scale(1.1);
}

.profile-subpage-header__back-icon {
    width: 54px;
    height: 54px;
    flex-shrink: 0;
}

.profile-subpage-header__title {
    text-transform: uppercase;
    color: var(--surface);
}

.profile-subpage-header__subtitle {
    color: var(--surface);
    font-weight: 500;
    margin: 0 0 40px 74px;
}

.payment-method-card {
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    padding: 20px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 640px;
    margin-bottom: 40px;
}

.payment-method-card__brand {
    font-weight: 700;
    color: var(--surface);
    margin-bottom: 4px;
}

.payment-method-card__expiry {
    color: var(--surface);
}

.payment-method-card__delete {
    flex-shrink: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-slow) ease;
}

.payment-method-card__delete:hover {
    transform: scale(var(--hover-scale--medium));
}

.payment-method-card__delete img {
    width: 24px;
    height: 24px;
}

.payment-method-empty {
    color: var(--surface);
    margin-bottom: 40px;
    font-weight: 600;
}

.payment-method-history {
    width: 50%;
}

.payment-method-history__title {
    font-family: 'Castoro', serif;
    font-weight: 400;
    font-size: 2rem;
    line-height: 2.5rem;
    letter-spacing: -0.02em;
    color: var(--surface);
    margin-bottom: 10px;
}

.payment-method-history__row {
    display: grid;
    grid-template-columns: minmax(200px, 2fr) minmax(120px, 1fr) minmax(80px, 1fr);
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--surface);
}

.payment-method-history__row:last-child {
    border-bottom: none;
}

.payment-method-history__label {
    font-weight: 700;
    color: var(--surface);
}

.payment-method-history__date {
    color: var(--surface);
}

.payment-method-history__price {
    color: var(--surface);
    text-align: right;
}

.payment-method-history__empty {
    color: var(--surface);
}

.profile-save-bar {
    position: sticky;
    bottom: 0;
    background-color: var(--secondary);
    padding: 30px var(--container-margin);
    border-top: 2px solid var(--surface);
}

.profile-save-bar__inner {
    max-width: 50%;
    display: flex;
    gap: 16px;
}

/* ── PROFILE FORM (personal info) ── */
/* Shared declarations with .register-form* live in the REGISTRATION section above. */

.profile-form__field {
    max-width: 50%;
}

.profile-form__input:disabled {
    color: var(--surface);
    background-color: color-mix(in srgb, var(--surface) 30%, transparent);
}

.profile-form__checkbox {
    max-width: 50%;
}

.profile-form__checkbox--tight {
    margin-top: -20px;
}

.register-form__password-input,
.profile-form__password-input {
    position: relative;
}

.register-form__password-input .register-form__input,
.profile-form__password-input .profile-form__input {
    padding-right: 44px;
}

.register-form__password-toggle,
.profile-form__password-toggle {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: flex;
}

.register-form__password-toggle img,
.profile-form__password-toggle img {
    width: 20px;
    height: 20px;
}

/* ── WORK EXPERIENCE ── */

.work-experience-list__add {
    width: calc((100% - 48px) / 3);
    justify-content: center;
    margin-bottom: 30px;
}

.work-experience-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

.work-experience-list__save-bar {
    display: none;
}

.work-experience-card {
    background-color: white;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-lg);
    padding: var(--padding-box);
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.work-experience-card__title {
    font-family: 'Anton', sans-serif;
    font-weight: 400;
    text-transform: uppercase;
    color: var(--surface);
    font-size: 1.8rem;
    line-height: 1.6rem;
}

.work-experience-card__description {
    color: var(--surface);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.work-experience-card__description ul,
.work-experience-card__description ol {
    padding-left: 20px;
}

.work-experience-card__cta {
    margin-top: 10px;
}

.work-experience-card__description p:empty {
    display: none;
}

.work-experience-card__rows {
    display: flex;
    flex-direction: column;
}

.work-experience-card__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid var(--tertiary);
}

.work-experience-card__row-label {
    font-weight: var(--font-weight-bold);
    color: var(--surface);
}

.work-experience-card__row-value {
    color: var(--surface);
    text-align: right;
}

.work-experience-card__section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.work-experience-card__section-label {
    font-weight: var(--font-weight-bold);
    color: var(--surface);
    margin: 0;
}

.work-experience-card__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.work-experience-card__edit {
    justify-content: center;
    margin-top: auto;
}

.form-with-tips {
    display: flex;
    gap: 30px;
    align-items: start;
}

.form-with-tips__fields {
    flex: 0 0 50%;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.form-with-tips__fields .profile-form__field,
.form-with-tips__fields .profile-form__checkbox {
    max-width: none;
}

.upload-tips {
    flex: 1;
    position: sticky;
    top: calc(var(--header-height) + 30px);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.upload-tips--static {
    position: static;
}

.upload-tips__title {
    color: var(--surface);
    margin: 0;
}

.upload-tips__video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--border-radius-xl);
    overflow: hidden;
    background-color: var(--surface);
    margin-bottom: 4px;
}

.upload-tips__video-el {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    cursor: pointer;
    border: none;
}

.upload-tips__video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    width: 48px;
    height: 48px;
}

.upload-tips__video-play img {
    width: 100%;
    height: 100%;
}

/* ── MY OFFERS ── */

.my-offers-page {
    display: flex;
    flex-direction: column;
    padding: 50px 0;
}

.my-offers-page > .container {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.my-offers-header {
    margin-bottom: 30px;
}

.my-offers-header h1 {
    text-transform: uppercase;
    color: var(--surface);
}

.my-offers-header__subtitle {
    margin-top: 5px;
    font-weight: 500;
    font-size: 1rem;
    color: var(--surface);
}

.my-offers__create-cta {
    width: calc((100% - 40px) / 3);
    justify-content: center;
    margin-bottom: 30px;
}

.my-offers__create-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.my-offers__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

.my-offers__save-bar {
    display: none;
}

.offer-card__sponsor-cta {
    margin-top: 14px;
}

.offer-card__sponsor-cta-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}








/* ── JOB OFFER FORM ── */

.job-offer-form__workdays {
    display: flex;
    flex-direction: column;
}

.job-offer-form__workday-row {
    padding: 14px 0;
    border-bottom: 1px solid color-mix(in srgb, var(--surface) 20%, transparent);
}

.job-offer-form__workday-row .profile-form__checkbox-label {
    cursor: pointer;
}

.job-offer-form__workday-row:last-child {
    border-bottom: none;
}

.job-offer-form__promo-benefits {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.job-offer-form__promo-intro {
    color: var(--secondary);
}

.job-offer-form__promo-list {
    list-style: square;
    padding-left: 20px;
    color: var(--secondary);
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── CITIES ── */

.cities-header {
    padding-top: 45px;
    margin-bottom: 30px;
}

.cities-header__title {
    text-transform: uppercase;
    color: var(--surface);
    margin-bottom: 8px;
}

.cities-header__subtitle {
    color: var(--surface);
}

.city-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    padding-bottom: 60px;
}

.city-grid__item {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 15px 20px;
    border: 2px solid var(--surface);
    border-radius: var(--border-radius-xl);
    background-color: white;
    color: var(--surface);
    transition: transform var(--transition-slow) ease;
}

.city-grid__item:hover {
    transform: scale(var(--hover-scale));
}

.city-grid__label {
    flex: 1;
    font-weight: var(--font-weight-bold);
    font-size: 1rem;
}

.city-grid__chevron {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* ── LOGO PAGES (sponsors / partners / business opportunities) ── */

.logo-page-header {
    padding-top: 45px;
    margin-bottom: 30px;
}

.logo-page-header__title {
    text-transform: uppercase;
    color: var(--surface);
    margin-bottom: 8px;
}

.logo-page-header__subtitle {
    color: var(--surface);
}

.logo-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px 20px;
    padding-bottom: 60px;
    padding-top: 10px;
}

.logo-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.logo-card__logo {
    width: 100%;
    max-width: 220px;
    height: auto;
    display: block;
    margin-bottom: 10px;
}

.logo-grid--compact .logo-card__logo {
    margin-bottom: 0;
}

.logo-card__name {
    font-weight: var(--font-weight-bold);
    color: var(--surface);
    margin-bottom: 4px;
}

.logo-card__description {
    color: var(--surface);
    font-size: 0.9rem;
    line-height: 1.5;
}

/* ── RESPONSIVE ── */

@keyframes header-bounce-in {
    from { opacity: 0; transform: scale(0.8); }
    to { opacity: 1; transform: scale(1); }
}

@keyframes header-menu-toggle-in {
    from { opacity: 0; transform: rotate(-90deg); }
    to { opacity: 1; transform: rotate(0deg); }
}

@media (max-width: 1200px) {
    .header {
        padding: 0 20px;
    }

    .header__logo-img {
        height: 40px;
    }

    .header--home .header__logo-img {
        animation: header-bounce-in 1.7s cubic-bezier(0.22, 1.15, 0.36, 1) backwards;
    }

    .header__menu-icon {
        width: 28px;
        height: 28px;
    }

    .header__menu-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        background: none;
        border: none;
        color: var(--secondary);
        font-size: .9rem;
        font-weight: var(--font-weight-bold);
        cursor: pointer;
        z-index: 10001;
        transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
    }

    .header--home .header__menu-toggle {
        animation: header-menu-toggle-in 0.5s ease-out 0.35s backwards;
    }

    .header:has(.header__nav--open) .header__menu-toggle {
        opacity: 0;
        transform: rotate(90deg);
        pointer-events: none;
    }

    .header__nav {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: center;
        gap: 30px;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        transform: none;
        padding: 24px 32px 240px;
        background-color: var(--primary);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity var(--transition-slow) ease, visibility var(--transition-slow) ease;
        z-index: 10000;
    }

    .header__nav--no-actions {
        padding-bottom: 20px;
    }

    .header__nav--single-action {
        padding-bottom: 120px;
    }

    .header__nav-close {
        display: flex;
        align-items: center;
        position: absolute;
        top: 28px;
        right: 20px;
        background: none;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 10001;
        opacity: 0;
        transform: rotate(-90deg);
        transition: opacity var(--transition-slow) ease, transform var(--transition-slow) ease;
    }

    .header__nav--open .header__nav-close {
        opacity: 1;
        transform: rotate(0);
    }

    .header__nav-close-icon {
        width: 28px;
        height: 28px;
    }

    .header__nav-mobile-actions {
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }

    .header__nav-links {
        display: contents;
    }

    .header__nav-link:first-child {
        margin-top: 48px;
    }

    .header__nav-link--logout {
        display: flex;
        gap: 8px;
    }

    .header__nav-link--profile {
        display: flex;
    }

    .header__nav--open {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .header__nav-link {
        font-family: 'Castoro', serif;
        font-size: 1.5rem;
        padding: 10px 32px;
        border-bottom: none;
        width: calc(100% + 64px);
        margin: 0 -32px;
        justify-content: center;
        text-align: center;
        border-radius: 0;
        color: var(--secondary);
        transition: transform var(--transition-slow) ease;
    }

    .header__nav-link:hover {
        transform: scale(var(--hover-scale));
    }

    .header__nav--open .header__nav-link,
    .header__nav--open ~ .header__actions .header__nav-mobile-actions .button,
    .header__nav--open ~ .header__actions .header__actions-buttons .button--outline-light {
        animation: card-fade-up .4s ease-out backwards;
    }

    .header__nav--open ~ .header__actions .header__nav-mobile-actions .button,
    .header__nav--open ~ .header__actions .header__actions-buttons .button--outline-light {
        padding-top: 16px;
        padding-bottom: 16px;
    }

    .header__nav-link:nth-child(1) { animation-delay: .08s; }
    .header__nav-link:nth-child(2) { animation-delay: .14s; }
    .header__nav-link:nth-child(3) { animation-delay: .2s; }
    .header__nav-link:nth-child(4) { animation-delay: .26s; }

    .header__nav-mobile-actions .button:nth-child(1) { animation-delay: .08s; }
    .header__nav-mobile-actions .button:nth-child(2) { animation-delay: .14s; }

    .header__actions-buttons .button--outline-light { animation-delay: .2s; }

    .header__nav-link--active {
        color: var(--accent);
    }

    .header__nav-indicator {
        display: none;
    }

    .header__actions {
        display: none;
    }

    .header__nav--open ~ .header__actions {
        display: flex;
        flex-direction: column;
        gap: 25px;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        padding: 20px 30px 30px;
        z-index: 10000;
        justify-self: stretch;
    }

    .header__nav--open ~ .header__actions .header__actions-buttons {
        width: 100%;
    }

    .header__nav--open ~ .header__actions .header__actions-buttons > .button:not(.button--outline-light) {
        display: none;
    }

    .header__nav--open ~ .header__actions .header__actions-buttons .button--outline-light {
        width: 100%;
        justify-content: center;
        border-width: 2px;
    }

    .header__nav--open ~ .header__actions .lang-trigger {
        position: fixed;
        top: 28px;
        left: 32px;
        padding: 0;
        font-size: 1.2rem;
        gap: 8px;
    }

    .header__nav--open ~ .header__actions .lang-trigger__chevron {
        width: 22px;
        height: 22px;
    }
}

@media (max-width: 1100px) {
    h1 {
        font-size: 2.6rem;
    }

    .button {
        height: 48px;
    }

    .lang-modal__submit {
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 16px;
    }

    #role-info-modal .confirm-modal__dialog {
        max-width: 88vw;
        padding: 15px;
    }

    .upload-grid {
        grid-template-columns: repeat(2, 100px);
    }

    .city-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .logo-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .work-experience-list__add {
        display: none;
    }

    .work-experience-list__save-bar {
        display: block;
    }

    .profile-form__checkbox--tight {
        margin-top: 0;
    }

    .work-experience-list {
        grid-template-columns: 1fr;
    }

    .form-with-tips {
        flex-direction: column;
        align-items: stretch;
    }

    .form-with-tips__fields {
        flex-basis: auto;
        max-width: none;
        order: 2;
    }

    .upload-tips {
        position: static;
        order: 1;
    }

    .profile-subpage-header__subtitle {
        margin: 0 0 30px 60px;
    }

    .profile-sidebar__promo-title {
        font-size: 1.3rem;
    }

    .profile-sidebar__promo {
        gap: 10px;
    }

    .login-page {
        padding: 30px 20px 50px;
    }

    .login-page__inner {
        gap: 10px;
    }

    .login-page__title {
        line-height: 3.4rem;
    }

    .detail-lock-modal {
        width: calc(100% - 40px);
    }

    /* ── BUSINESSES (mobile) ── */

    .businesses-page {
        padding: 30px 0 60px;
    }

    .businesses__grid {
        grid-template-columns: 1fr;
    }

    .business-cta-card {
        grid-row: auto;
    }

    .businesses-search {
        max-width: 100%;
    }

    .business-cta-card {
        margin-bottom: 20px;
    }

    .cities-header {
        padding-top: 30px;
    }

    .logo-page-header {
        padding-top: 30px;
        padding-bottom: 20px;
    }

    .talent-detail {
        padding: 20px 0 50px;
    }

    .talent-detail__section-heading {
        font-size: 2.2rem;
        margin-bottom: 10px;
    }

    .work-experience-card {
        padding: 25px 20px;
    }

    .offer-detail-bar__actions--compact {
        flex: 1;
    }

    .offer-detail-bar,
    .profile-save-bar {
        padding-top: 20px;
        padding-bottom: 20px;
    }

    /* ── OFFER DETAIL (mobile) ── */

    .offer-detail {
        padding-top: 30px;
    }

    .offer-detail__title {
        margin-bottom: 20px;
        line-height: 1.2;
        font-size: 2.2rem;
    }

    .offer-detail__layout {
        flex-direction: column;
        align-items: stretch;
    }

    .offer-detail__left,
    .offer-detail__right {
        display: contents;
    }

    .offer-detail__business {
        order: 1;
    }

    .offer-detail__pay-box {
        order: 2;
    }

    .offer-detail__group {
        order: 5;
    }

    .offer-detail__group:has(.offer-detail__workdays) {
        order: 3;
    }

    .offer-detail__description-box {
        order: 4;
    }

    .offer-detail-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

    .offer-detail-bar__promo {
        order: 1;
    }

    .offer-detail-bar__actions {
        order: 2;
    }

    /* ── BUSINESS DETAIL (mobile) ── */

    .business-detail {
        padding-top: 30px;
    }

    .business-detail__layout {
        flex-direction: column;
        align-items: stretch;
    }

    .business-detail__thumbs.card-carousel > .business-detail__thumb {
        flex-basis: 140px;
    }

    .business-detail__offers-heading {
        font-size: 1.6rem;
        margin-bottom: 15px;
    }

    /* ── ABOUT (mobile) ── */

    .about-hero {
        flex-direction: column;
        gap: 24px;
        margin-bottom: 50px;
    }

    .about-hero__text h1 {
        font-size: 2.2rem;
        line-height: 1.2;
        margin-bottom: 16px;
    }

    .about-hero__description {
        width: 100%;
        line-height: 1.5;
    }

    .about-hero__images {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
        height: auto;
    }

    .about-hero__images-left {
        grid-column: 1;
        grid-row: 1;
    }

    .about-hero__images-right {
        display: contents;
    }

    .about-hero__image--1,
    .about-hero__image--2 {
        height: 180px;
    }

    .about-hero__image--2 {
        grid-column: 2;
        grid-row: 1;
    }

    .about-hero__image--3 {
        grid-column: 1 / -1;
        grid-row: 2;
        height: 240px;
    }

    .about-values {
        grid-template-columns: 1fr;
        margin-bottom: 50px;
    }

    .about-founder {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 24px;
    }

    .about-founder__photo {
        width: 80%;
        height: auto;
    }

    .about-founder__bio {
        width: 100%;
    }

    .business-detail__title {
        margin-bottom: 20px;
    }

    .my-offers-page {
        min-height: calc(100vh - var(--header-height));
        padding-top: 30px;
    }

    .my-offers__create-cta {
        display: none;
    }

    .my-offers__save-bar {
        display: block;
    }

    .my-offers__grid {
        grid-template-columns: 1fr;
    }

    .my-offers-header h1 {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .sponsor-modal__dialog {
        gap: 10px;
    }

    .business-detail__offers-grid {
        grid-template-columns: 1fr;
    }

    .offer-detail-bar__actions .button {
        min-width: 0;
    }

    .offer-detail-bar__actions .button--wide {
        padding: 10px 16px;
    }

    .talent-detail__divider {
        margin: 0 0 30px;
    }

    /* ── LIGHTBOX (mobile) ── */

    .lightbox {
        padding: 60px 0;
    }

    .lightbox__box,
    .lightbox__row {
        width: 100%;
    }

    .lightbox__close {
        right: 30px;
    }

    .lightbox__nav {
        display: none;
    }

    .lightbox__frame {
        width: 100%;
        max-width: 100%;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: 0;
        background: none;
        border-radius: 0;
    }

    .lightbox__frame::-webkit-scrollbar {
        display: none;
    }

    .lightbox__slide {
        flex: 0 0 100%;
        scroll-snap-align: center;
        overflow: hidden;
    }

    .lightbox__slide[hidden] {
        display: flex;
    }

    .lightbox__slide-media {
        width: 100%;
        max-height: 80vh;
        height: auto;
        border-radius: var(--border-radius-xl);
    }

    .lightbox__slide iframe {
        width: 100%;
    }

    .talent-detail__title {
        margin-bottom: 20px;
        font-size: 2.5rem;
    }

    .talent-detail__photos {
        margin-bottom: 15px;
    }

    .talent-detail__photos.card-carousel > .talent-detail__photo {
        flex-basis: 220px;
    }

    .logo-page-header__title {
        line-height: 1.2;
    }

    .upload-tips__title {
        font-size: 1.6rem;
        line-height: unset;
    }

    .offer-card,
    .talent-card {
        border-radius: var(--border-radius-xl);
    }

    .talent-card__name {
        font-size: 1.6rem;
    }

    /* ── HERO (mobile) ── */

    .hero {
        display: grid;
        grid-template-columns: 1fr;
        min-height: auto;
    }

    .hero__column--main,
    .hero--activities .hero__column--main {
        grid-column: 1;
        grid-row: 1;
        position: relative;
        z-index: 1;
        background-color: transparent;
        justify-content: flex-end;
        min-height: 480px;
        padding: 32px;
        gap: 20px;
    }

    .hero__column--main::before {
        content: '';
        position: absolute;
        inset: 0;
        z-index: -1;
        background-color: var(--overlay);
    }

    .hero__column--main .button {
        width: 100%;
        justify-content: center;
    }

    .hero__title {
        font-size: 2.6rem;
        line-height: 1.2;
    }

    .hero__subtitle {
        max-width: 100%;
        font-size: 1.2rem;
        margin-bottom: 10px;
    }

    .hero__column--video {
        grid-column: 1;
        grid-row: 1;
        z-index: 0;
    }

    .hero__video {
        width: 103%;
        height: 103%;
    }

    .hero__badge {
        display: none;
    }

    .hero__column--trust {
        grid-column: 1;
        grid-row: 2;
        padding: 36px 32px;
    }

    .hero__trust-avatars {
        height: 70px;
        animation: card-fade-up 0.6s ease-out backwards;
    }

    /* ── OFFERS (mobile) ── */

    .offers {
        padding: 50px 0;
    }

    .offers .container {
        display: flex;
        flex-direction: column;
    }

    .offers__header {
        display: contents;
    }

    .offers__title {
        order: 1;
        font-size: 1.6rem;
    }

    .offers__grid--home {
        order: 2;
    }

    .card-carousel {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        gap: 16px;
        padding-bottom: 4px;
        scrollbar-width: none;
        position: relative;
        left: 50%;
        right: 50%;
        width: 100vw;
        margin-left: -50vw;
        margin-right: -50vw;
        padding-left: 5vw;
        padding-right: 5vw;
    }

    .card-carousel::-webkit-scrollbar {
        display: none;
    }

    .card-carousel > * {
        flex: 0 0 280px;
        scroll-snap-align: center;
    }

    .card-carousel-dots {
        order: 3;
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 10px;
        margin-bottom: 30px;
    }

    .card-carousel-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: var(--surface);
        opacity: .3;
        cursor: pointer;
        transition: opacity var(--transition-base) ease, transform var(--transition-base) ease;
    }

    .card-carousel-dot--active {
        opacity: 1;
        transform: scale(1.2);
    }

    .offers__header .button {
        order: 4;
        width: 100%;
        justify-content: center;
    }

    /* ── TALENTS (for-activities, mobile) ── */

    .talents {
        padding: 50px 0;
    }

    .talents .container {
        display: flex;
        flex-direction: column;
    }

    .talents__header {
        display: contents;
    }

    .talents__title {
        order: 1;
        font-size: 1.6rem;
    }

    .talents__grid {
        order: 2;
        padding-left: 30px;
        padding-right: 30px;
    }

    .talents--activities .talents__grid {
        padding-left: 20px;
        padding-right: unset;
    }

    .talents__header .button {
        order: 4;
        width: 100%;
        justify-content: center;
    }

    .hero__column--profile {
        grid-column: 1;
        grid-row: 2;
        padding: 36px 32px;
    }

    .hero__profile-card {
        margin-bottom: 20px;
    }

    /* ── OFFERS / TALENTS PAGE HEADER (mobile) ── */

    .offers-header,
    .talents-header {
        flex-wrap: wrap;
        row-gap: 8px;
        padding-top: 15px;
    }

    .offers-header__controls,
    .talents-header__controls {
        display: contents;
    }

    .search-box {
        order: 3;
        width: 100%;
        height: 46px;
    }

    .offers-header__filter-button,
    .talents-header__filter-button {
        flex-shrink: 0;
        padding: 10px 18px 11px 22px;
        height: unset;
    }

    .offers-header__title,
    .talents-header__title {
        font-size: 2.5rem;
    }

    .offers-toolbar,
    .talents-toolbar {
        padding-bottom: 18px;
    }

    .city-autocomplete__dropdown--pill {
        left: -46px;
        right: -12px;
        top: calc(100% + 10px);
    }

    /* ── FILTER DRAWER (mobile) ── */

    .filter-drawer__panel {
        top: 0;
        left: 0;
        right: 0;
        width: 100%;
        max-height: 100vh;
        height: 100%;
        border-radius: 0;
        transform: translateY(100%);
        transition: transform .38s ease;
    }

    .filter-drawer__panel--open {
        transform: translateY(0);
    }

    .filter-drawer__title {
        font-size: 2.4rem;
    }

    .filter-drawer__close img {
        width: 28px;
        height: 28px;
    }

    main {
        min-height: auto;
    }

    .offers-page,
    .talents-page {
        min-height: auto;
    }

    .register-page {
        padding-top: 30px;
        padding-bottom: 30px;
    }

    .register-page__heading {
        width: 100%;
        margin-inline: 0;
        line-height: 3.6rem;
    }

    .register-page--signup .register-page__heading {
        width: 100%;
        white-space: normal;
    }

    .register-form,
    .profile-form {
        gap: 20px;
    }

    .register-form__submit {
        margin-top: 10px;
    }

    /* ── SUBSCRIPTION (mobile) ── */

    .subscription-layout {
        flex-direction: column;
    }

    .subscription-card-column,
    .subscription-benefits-column {
        width: 100%;
        min-width: 0;
    }

    /* ── PAYMENT METHOD (mobile) ── */

    .payment-method-history {
        width: 100%;
    }

    .payment-method-history__title {
        font-size: 1.6rem;
        line-height: 2rem;
    }

    .payment-method-history__row {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 8px;
    }

    /* ── PROFILE (mobile) ── */

    .profile-page {
        padding-top: 30px;
        padding-bottom: 40px;
    }

    .profile-header {
        margin-bottom: 30px;
    }

    .profile-header__title {
        font-size: 2.2rem;
        line-height: 1.2;
    }

    .profile-subpage {
        min-height: calc(100vh - var(--header-height));
        padding: 30px 0;
    }

    .profile-subpage-header {
        margin-bottom: 20px;
    }

    .profile-subpage-header__back-icon {
        width: 40px;
        height: 40px;
    }

    .profile-form__field {
        max-width: 100%;
    }

    .profile-save-bar__inner {
        max-width: 100%;
    }

    .sponsor-modal__dialog .chip {
        white-space: normal;
        line-height: 1rem;
        text-align: center;
    }

    .empty-state {
        padding: 20px 0 10px;
    }

    .tip-callout {
        margin: 0 10px 15px;
    }

    .empty-state__title {
        font-size: 1.8rem;
        line-height: 2.4rem;
    }

    .empty-state__cta {
        width: 100%;
        justify-content: center;
    }

    .profile-subpage-header__title {
        font-size: 2.4rem;
        line-height: 3rem;
    }

    .profile-menu__item {
        padding: 15px 20px 15px 16px;
    }

    .profile-layout {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    .profile-menu,
    .profile-sidebar {
        display: contents;
    }

    .profile-sidebar__promo {
        order: 1;
        margin-bottom: 12px;
    }

    .profile-menu__item {
        order: 2;
    }

    .profile-sidebar > .button--outline {
        order: 3;
        width: 100%;
        justify-content: center;
        margin-top: 12px;
    }

    .profile-sidebar__support {
        order: 4;
        margin-top: 28px;
    }

    .profile-sidebar__logout {
        display: none;
    }

    .register-selector {
        padding: 30px 20px 40px;
        gap: 20px;
    }

    .register-selector__cta-bar {
        display: block;
    }

    .register-selector__cta--desktop {
        display: none;
    }

    .register-selector__title {
        font-size: 2.8rem;
        line-height: 3.4rem;
        margin-bottom: 0;
    }

    .offers-header__title-full {
        display: none;
    }

    .offers-header__title-short {
        display: inline;
    }

    /* ── FOOTER (mobile) ── */

    .footer {
        flex-direction: column;
        position: relative;
    }

    .footer__left {
        flex: none;
        padding: 50px 25px 25px;
        gap: 40px;
    }

    .footer__nav {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 16px 12px;
    }

    .footer__nav-group {
        display: contents;
    }

    .footer__nav-link {
        grid-column: 1 / -1;
        font-size: 1rem;
    }

    .footer__nav-link--home { order: 1; }
    .footer__nav-link--offers { order: 2; }
    .footer__nav-link--cities { order: 3; }
    .footer__nav-link--businesses { order: 4; }

    .footer__nav-link--about {
        order: 5;
        margin-top: 20px;
    }

    .footer__nav-link--for-activities { order: 6; }
    .footer__nav-link--schools { order: 7; }
    .footer__nav-link--talents { order: 8; }

    .footer__nav-link--sponsor {
        order: 9;
        margin-top: 20px;
    }

    .footer__nav-link--partner { order: 10; }
    .footer__nav-link--business-opportunity { order: 11; }

    .footer__nav-divider {
        display: block;
        order: 12;
        grid-column: 1 / -1;
        height: 1px;
        border: none;
        background-color: var(--secondary);
        margin: 20px 0 0;
    }

    .footer__nav-link--privacy { order: 13; }
    .footer__nav-link--cookie-policy { order: 14; }
    .footer__nav-link--terms { order: 15; }

    .footer__nav-group--legal {
        display: flex;
        justify-content: space-between;
        align-items: center;
        grid-column: 1 / -1;
        order: 12;
    }

    .footer__nav-link--privacy,
    .footer__nav-link--cookie-policy,
    .footer__nav-link--terms {
        font-size: .8rem;
        white-space: nowrap;
    }

    .footer__bottom {
        flex-direction: column-reverse;
        align-items: center;
        gap: 16px;
    }

    .footer__right {
        position: absolute;
        top: 220px;
        right: 48px;
        width: 130px;
        height: 130px;
    }

    .footer__pictograms {
        display: none;
    }

    .footer__badge {
        position: static;
        width: 100%;
        transform: none;
    }

    /* ── ACTIVITY (mobile) ── */

    .activity {
        min-height: auto;
        padding: 0 20px;
        margin-bottom: 40px;
    }

    .activity__right {
        display: none;
    }

    .activity__title {
        font-size: 2.2rem;
    }

    .activity__left {
        flex: none;
        width: 100%;
        padding: 25px;
        border-radius: var(--border-radius-xl);
        gap: 20px;
    }

    .activity__subtitle {
        max-width: 100%;
        margin-bottom: 10px;
    }

    .activity__left .button {
        width: 100%;
        justify-content: center;
    }

    /* ── HOW IT WORKS (mobile) ── */

    .how-it-works {
        padding: 10px 0 60px;
    }

    .how-it-works__steps {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .how-it-works__step {
        padding: 15px;
        border-radius: var(--border-radius-xl);
    }

    /* ── SIGN UP (mobile) ── */

    .sign-up {
        min-height: auto;
        align-items: flex-end;
        padding: 40px 28px;
        margin: 0 20px 60px;
        border-radius: var(--border-radius-xl);
    }

    .sign-up__content {
        max-width: 100%;
        gap: 14px;
    }

    .sign-up__title {
        font-size: 2.6rem;
        line-height: 1.2;
    }

    .sign-up__content .button {
        width: 100%;
        justify-content: center;
    }

    .about-page {
        padding-top: 30px;
    }

    .about-value-card {
        padding: 20px;
        border-radius: var(--border-radius-xl);
    }

    .about-value-card__title {
        font-size: 1.5rem;
    }

    .legal-page {
        padding-top: 30px;
    }

    .filter-drawer .select__dropdown {
        max-height: 60vh;
    }

    .filter-drawer .multiselect__dropdown {
        max-height: 60vh;
    }
}