/* ══════════════════════════════════════════════════════
   BND Design System — bunniesnextdoor.com
   Luxury · Elegant · Exotic
   ══════════════════════════════════════════════════════ */

/* ── Design Tokens ─────────────────────────────────── */
:root {
    /* Colors */
    --bnd-black:          #0A0A0A;
    --bnd-onyx:           #1A1A1A;
    --bnd-charcoal:       #2D2D2D;
    --bnd-graphite:       #3A3A3A;
    --bnd-silver:         #C0C0C0;
    --bnd-platinum:       #E8E8E8;
    --bnd-pearl:          #FAFAFA;
    --bnd-champagne:      #D4AF37;
    --bnd-champagne-dim:  #B8962F;
    --bnd-amethyst:       #7B4FA2;
    --bnd-vermillion:     #D32F2F;
    --bnd-emerald:        #2E7D32;

    /* Semantic */
    --bnd-bg-primary:     var(--bnd-black);
    --bnd-bg-secondary:   var(--bnd-onyx);
    --bnd-bg-elevated:    var(--bnd-charcoal);
    --bnd-text-primary:   var(--bnd-platinum);
    --bnd-text-secondary: var(--bnd-silver);
    --bnd-text-hero:      var(--bnd-pearl);
    --bnd-border:         var(--bnd-charcoal);
    --bnd-accent:         var(--bnd-champagne);
    --bnd-live:           var(--bnd-amethyst);
    --bnd-danger:         var(--bnd-vermillion);
    --bnd-success:        var(--bnd-emerald);

    /* Typography */
    --bnd-font-display:   'Cormorant Garamond', Georgia, serif;
    --bnd-font-heading:   'Montserrat', system-ui, sans-serif;
    --bnd-font-body:      'Inter', system-ui, sans-serif;

    /* Type Scale */
    --bnd-text-xs:    0.75rem;
    --bnd-text-sm:    0.875rem;
    --bnd-text-base:  1rem;
    --bnd-text-lg:    1.125rem;
    --bnd-text-xl:    1.25rem;
    --bnd-text-2xl:   1.5rem;
    --bnd-text-3xl:   1.875rem;
    --bnd-text-4xl:   2.25rem;
    --bnd-text-5xl:   3rem;
    --bnd-text-6xl:   3.75rem;

    /* Motion */
    --bnd-ease:           cubic-bezier(0.4, 0, 0.2, 1);
    --bnd-duration-fast:  150ms;
    --bnd-duration-base:  300ms;
    --bnd-duration-slow:  500ms;

    /* Spacing */
    --bnd-space-1:   0.25rem;
    --bnd-space-2:   0.5rem;
    --bnd-space-3:   0.75rem;
    --bnd-space-4:   1rem;
    --bnd-space-6:   1.5rem;
    --bnd-space-8:   2rem;
    --bnd-space-12:  3rem;
    --bnd-space-16:  4rem;
    --bnd-space-24:  6rem;
    --bnd-space-32:  8rem;

    /* Effects */
    --bnd-shadow-sm:   0 2px 8px rgba(0,0,0,0.3);
    --bnd-shadow-md:   0 4px 24px rgba(0,0,0,0.4);
    --bnd-shadow-lg:   0 8px 48px rgba(0,0,0,0.6);
    --bnd-shadow-glow: 0 0 24px rgba(212,175,55,0.15);

    /* Layout */
    --bnd-max-width:      1440px;
    --bnd-content-width:  960px;
    --bnd-margin:         64px;
    --bnd-margin-mobile:  20px;
}

/* ── Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--bnd-font-body);
    font-weight: 300;
    color: var(--bnd-text-primary);
    background: var(--bnd-bg-primary);
    line-height: 1.6;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button { cursor: pointer; border: none; background: none; font: inherit; color: inherit; }
img { max-width: 100%; display: block; }

/* ── Age Gate ──────────────────────────────────────── */
.age-gate {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bnd-bg-primary);
    transition: opacity var(--bnd-duration-slow) var(--bnd-ease);
}

.age-gate--exit {
    opacity: 0;
    pointer-events: none;
}

.age-gate__particles {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.age-gate__particles canvas {
    width: 100%;
    height: 100%;
}

.age-gate__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--bnd-space-8);
}

.age-gate__logo {
    margin-bottom: var(--bnd-space-8);
}

.age-gate__logo-icon {
    width: 120px;
    height: 120px;
    margin: 0 auto;
}

.age-gate__tagline {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-3xl);
    font-weight: 300;
    color: var(--bnd-text-secondary);
    letter-spacing: 0.1em;
    margin-bottom: var(--bnd-space-6);
}

.age-gate__notice {
    font-size: var(--bnd-text-sm);
    color: var(--bnd-graphite);
    margin-bottom: var(--bnd-space-12);
    line-height: 1.8;
}

.age-gate__actions {
    display: flex;
    gap: var(--bnd-space-4);
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Buttons ───────────────────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--bnd-space-4) var(--bnd-space-8);
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-sm);
    font-weight: 600;
    letter-spacing: 0.15em;
    border-radius: 2px;
    transition: all var(--bnd-duration-base) var(--bnd-ease);
    min-width: 160px;
}

.btn--primary {
    background: linear-gradient(135deg, #D4AF37 0%, #C0A030 100%);
    color: var(--bnd-black);
    box-shadow: var(--bnd-shadow-glow);
}

.btn--primary:hover {
    box-shadow: 0 0 32px rgba(212,175,55,0.3);
    transform: translateY(-1px);
}

.btn--outline {
    border: 1px solid var(--bnd-silver);
    color: var(--bnd-silver);
}

.btn--outline:hover {
    border-color: var(--bnd-platinum);
    color: var(--bnd-platinum);
}

/* ── Main Site Entry ────────────────────────────────── */
.main-site--enter {
    animation: fadeIn var(--bnd-duration-slow) var(--bnd-ease) forwards;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ── Navigation ────────────────────────────────────── */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    padding: var(--bnd-space-6) var(--bnd-margin);
    transition: all var(--bnd-duration-base) var(--bnd-ease);
}

.nav--scrolled {
    background: rgba(10, 10, 10, 0.9);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: var(--bnd-space-4) var(--bnd-margin);
    box-shadow: var(--bnd-shadow-sm);
}

.nav__inner {
    max-width: var(--bnd-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.nav__brand {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-sm);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--bnd-silver);
}

.nav__links {
    display: flex;
    gap: var(--bnd-space-8);
}

.nav__link {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-xs);
    font-weight: 500;
    letter-spacing: 0.15em;
    color: var(--bnd-text-secondary);
    transition: color var(--bnd-duration-fast) var(--bnd-ease);
}

.nav__link:hover {
    color: var(--bnd-pearl);
}

/* ── Hero ─────────────────────────────────────────── */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #0A0A0A 0%, #1A1A1A 50%, #0A0A0A 100%);
    overflow: hidden;
}

.hero__overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 40%, rgba(212,175,55,0.03) 0%, transparent 70%);
}

.hero__content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: var(--bnd-space-8);
}

.hero__headline {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-6xl);
    font-weight: 300;
    color: var(--bnd-text-hero);
    letter-spacing: 0.1em;
    line-height: 1.1;
    margin-bottom: var(--bnd-space-6);
}

.hero__sub {
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-lg);
    font-weight: 300;
    color: var(--bnd-silver);
    margin-bottom: var(--bnd-space-12);
}

.hero__cta {
    margin-bottom: var(--bnd-space-16);
}

.hero__scroll {
    animation: scrollBounce 2s ease-in-out infinite;
}

@keyframes scrollBounce {
    0%, 100% { transform: translateY(0); opacity: 0.5; }
    50% { transform: translateY(8px); opacity: 1; }
}

/* ── Sections ──────────────────────────────────────── */
.section {
    padding: var(--bnd-space-32) var(--bnd-margin);
}

.section--alt {
    background: var(--bnd-bg-secondary);
}

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

.container--narrow {
    max-width: var(--bnd-content-width);
    margin: 0 auto;
    text-align: center;
}

.section__heading {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-4xl);
    font-weight: 300;
    color: var(--bnd-text-hero);
    letter-spacing: 0.05em;
    margin-bottom: var(--bnd-space-4);
    text-align: center;
}

.section__lead {
    font-size: var(--bnd-text-lg);
    color: var(--bnd-text-secondary);
    max-width: 65ch;
    margin: 0 auto var(--bnd-space-16);
    text-align: center;
    line-height: 1.7;
}

/* ── Pillars ───────────────────────────────────────── */
.pillars {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--bnd-space-6);
}

.pillar-card {
    background: var(--bnd-bg-secondary);
    border: 1px solid var(--bnd-border);
    border-radius: 8px;
    padding: var(--bnd-space-8);
    transition: all var(--bnd-duration-base) var(--bnd-ease);
}

.pillar-card:hover {
    border-color: rgba(192,192,192,0.2);
    transform: translateY(-2px);
    box-shadow: var(--bnd-shadow-md);
}

.pillar-card__title {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-xl);
    font-weight: 600;
    color: var(--bnd-text-hero);
    margin-bottom: var(--bnd-space-3);
}

.pillar-card__text {
    font-size: var(--bnd-text-sm);
    color: var(--bnd-text-secondary);
    line-height: 1.7;
}

/* ── Creator Cards ────────────────────────────────── */
.creator-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--bnd-space-6);
    max-width: 960px;
    margin: 0 auto;
}

.creator-card {
    background: var(--bnd-bg-primary);
    border: 1px solid var(--bnd-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all var(--bnd-duration-base) var(--bnd-ease);
}

.creator-card:hover {
    transform: translateY(-4px);
    border-color: rgba(192,192,192,0.3);
    box-shadow: var(--bnd-shadow-md);
}

.creator-card__portrait {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--bnd-bg-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator-card__placeholder {
    opacity: 0.3;
}

.creator-card__badge {
    position: absolute;
    top: var(--bnd-space-3);
    right: var(--bnd-space-3);
    padding: var(--bnd-space-1) var(--bnd-space-3);
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    border-radius: 4px;
}

.creator-card__badge--live {
    background: var(--bnd-live);
    color: #fff;
}

.creator-card__badge--online {
    background: var(--bnd-success);
    color: #fff;
}

.creator-card__name {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-xl);
    font-weight: 600;
    color: var(--bnd-text-primary);
    padding: var(--bnd-space-4) var(--bnd-space-4) var(--bnd-space-1);
}

.creator-card__status {
    font-size: var(--bnd-text-sm);
    color: var(--bnd-text-secondary);
    padding: 0 var(--bnd-space-4) var(--bnd-space-4);
}

/* ── Join Stats ────────────────────────────────────── */
.join-stats {
    display: flex;
    justify-content: center;
    gap: var(--bnd-space-12);
    margin-bottom: var(--bnd-space-12);
    flex-wrap: wrap;
}

.join-stat {
    text-align: center;
}

.join-stat__number {
    display: block;
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-4xl);
    font-weight: 400;
    color: var(--bnd-accent);
    line-height: 1.2;
}

.join-stat__label {
    display: block;
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--bnd-text-secondary);
    margin-top: var(--bnd-space-2);
    text-transform: uppercase;
}

/* ── Nav Auth Button ───────────────────────────────── */
.nav__auth-btn {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    color: var(--bnd-accent);
    border: 1px solid var(--bnd-accent);
    padding: var(--bnd-space-2) var(--bnd-space-4);
    border-radius: 2px;
    transition: all var(--bnd-duration-base) var(--bnd-ease);
    cursor: pointer;
}

.nav__auth-btn:hover {
    background: rgba(212,175,55,0.1);
    box-shadow: 0 0 12px rgba(212,175,55,0.15);
}

.nav__auth-btn--active {
    background: var(--bnd-accent);
    color: var(--bnd-black);
    border-color: var(--bnd-accent);
}

.nav__auth-btn--active:hover {
    background: var(--bnd-champagne-dim);
}

.nav__link--live {
    color: var(--bnd-live) !important;
    position: relative;
}

.nav__link--live::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--bnd-live);
    animation: livePulse 2s ease-in-out infinite;
}

@keyframes livePulse {
    0%, 100% { opacity: 1; box-shadow: 0 0 4px var(--bnd-live); }
    50% { opacity: 0.4; box-shadow: 0 0 8px var(--bnd-live); }
}

/* ── Hero Video ────────────────────────────────────── */
.hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.3;
    z-index: 0;
}

/* ── Hero Banner Reel (crossfade) ─────────────────── */
.hero__banner-reel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    overflow: hidden;
}
.hero__banner {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
}
.hero__banner.active {
    opacity: 0.35;
}

/* ── Live Streams Section ─────────────────────────── */
.section--dark {
    background: var(--bnd-bg-primary);
    border-top: 1px solid var(--bnd-border);
    border-bottom: 1px solid var(--bnd-border);
}

.live-embed {
    max-width: 1200px;
    margin: 0 auto;
}

.live-embed__frame-wrap {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 */
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--bnd-border);
    box-shadow: var(--bnd-shadow-lg);
    background: var(--bnd-bg-secondary);
}

.live-embed__frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.live-embed__actions {
    text-align: center;
    margin-top: var(--bnd-space-8);
}

.live-embed__note {
    font-size: var(--bnd-text-xs);
    color: var(--bnd-graphite);
    margin-top: var(--bnd-space-3);
    letter-spacing: 0.05em;
}

/* ── Auth Modal ────────────────────────────────────── */
.auth-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bnd-space-4);
}

.auth-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.auth-modal__panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--bnd-bg-secondary);
    border: 1px solid var(--bnd-border);
    border-radius: 12px;
    padding: var(--bnd-space-12) var(--bnd-space-8);
    box-shadow: var(--bnd-shadow-lg);
}

.auth-modal__close {
    position: absolute;
    top: var(--bnd-space-4);
    right: var(--bnd-space-4);
    font-size: var(--bnd-text-2xl);
    color: var(--bnd-graphite);
    cursor: pointer;
    transition: color var(--bnd-duration-fast) var(--bnd-ease);
    line-height: 1;
}

.auth-modal__close:hover {
    color: var(--bnd-platinum);
}

.auth-modal__header {
    text-align: center;
    margin-bottom: var(--bnd-space-8);
}

.auth-modal__title {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-3xl);
    font-weight: 300;
    color: var(--bnd-text-hero);
    letter-spacing: 0.05em;
    margin-bottom: var(--bnd-space-2);
}

.auth-modal__subtitle {
    font-size: var(--bnd-text-sm);
    color: var(--bnd-text-secondary);
}

/* ── Auth Form ─────────────────────────────────────── */
.auth-form__field {
    margin-bottom: var(--bnd-space-4);
}

.auth-form__label {
    display: block;
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-xs);
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--bnd-text-secondary);
    margin-bottom: var(--bnd-space-2);
    text-transform: uppercase;
}

.auth-form__input {
    width: 100%;
    padding: var(--bnd-space-3) var(--bnd-space-4);
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-base);
    color: var(--bnd-text-primary);
    background: var(--bnd-bg-primary);
    border: 1px solid var(--bnd-border);
    border-radius: 4px;
    outline: none;
    transition: border-color var(--bnd-duration-fast) var(--bnd-ease);
}

.auth-form__input:focus {
    border-color: var(--bnd-accent);
    box-shadow: 0 0 0 2px rgba(212,175,55,0.1);
}

.auth-form__input::placeholder {
    color: var(--bnd-graphite);
}

.auth-form__error {
    background: rgba(211,47,47,0.1);
    border: 1px solid rgba(211,47,47,0.3);
    color: #ef5350;
    font-size: var(--bnd-text-sm);
    padding: var(--bnd-space-3) var(--bnd-space-4);
    border-radius: 4px;
    margin-bottom: var(--bnd-space-4);
}

.auth-form__submit {
    width: 100%;
    margin-top: var(--bnd-space-4);
}

.auth-modal__switch {
    text-align: center;
    margin-top: var(--bnd-space-6);
    font-size: var(--bnd-text-sm);
    color: var(--bnd-text-secondary);
}

.auth-modal__switch-btn {
    color: var(--bnd-accent);
    font-weight: 500;
    cursor: pointer;
    margin-left: var(--bnd-space-1);
    transition: color var(--bnd-duration-fast) var(--bnd-ease);
}

.auth-modal__switch-btn:hover {
    color: var(--bnd-champagne-dim);
    text-decoration: underline;
}

/* ── Footer ────────────────────────────────────────── */
.footer {
    padding: var(--bnd-space-8) var(--bnd-margin);
    border-top: 1px solid var(--bnd-border);
}

.footer__inner {
    max-width: var(--bnd-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--bnd-space-4);
}

.footer__brand {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-xs);
    font-weight: 600;
    letter-spacing: 0.2em;
    color: var(--bnd-graphite);
}

.footer__copy {
    font-size: var(--bnd-text-xs);
    color: var(--bnd-graphite);
}

/* ── Member Home (post-login split layout) ────────── */
.member-home {
    min-height: 100vh;
    background: var(--bnd-bg-primary);
    padding: calc(80px + var(--bnd-space-6)) var(--bnd-margin) var(--bnd-space-8);
}

.member-home__grid {
    max-width: var(--bnd-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--bnd-space-8);
    min-height: calc(100vh - 120px);
    align-items: stretch;
}

.member-home__welcome {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--bnd-space-8);
}

.member-home__welcome-inner {
    max-width: 440px;
}

.member-home__avatar {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--bnd-onyx);
    border: 2px solid var(--bnd-champagne);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--bnd-space-6);
}

.member-home__greeting {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-5xl);
    font-weight: 300;
    color: var(--bnd-text-hero);
    line-height: 1.1;
    margin-bottom: var(--bnd-space-3);
}

.member-home__tagline {
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-lg);
    color: var(--bnd-text-secondary);
    margin-bottom: var(--bnd-space-8);
}

.member-home__stats {
    display: flex;
    flex-direction: column;
    gap: var(--bnd-space-4);
    margin-bottom: var(--bnd-space-8);
}

.member-home__stat {
    display: flex;
    align-items: center;
    gap: var(--bnd-space-3);
}

.member-home__stat-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: var(--bnd-onyx);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.member-home__stat-label {
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-sm);
    color: var(--bnd-text-secondary);
    letter-spacing: 0.02em;
}

.member-home__actions {
    display: flex;
    gap: var(--bnd-space-4);
    flex-wrap: wrap;
}

.member-home__models {
    display: flex;
    flex-direction: column;
    background: var(--bnd-onyx);
    border: 1px solid var(--bnd-border);
    border-radius: 12px;
    overflow: hidden;
}

.member-home__models-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--bnd-space-4) var(--bnd-space-5);
    border-bottom: 1px solid var(--bnd-border);
}

.member-home__models-title {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-sm);
    font-weight: 600;
    letter-spacing: 0.1em;
    color: var(--bnd-text-primary);
    display: flex;
    align-items: center;
    gap: var(--bnd-space-2);
    text-transform: uppercase;
}

.member-home__live-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--bnd-amethyst);
    animation: bnd-pulse 2s ease-in-out infinite;
}

@keyframes bnd-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

.member-home__models-expand {
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-xs);
    color: var(--bnd-text-secondary);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: var(--bnd-space-1);
    letter-spacing: 0.05em;
    transition: color var(--bnd-duration-fast) var(--bnd-ease);
}
.member-home__models-expand:hover {
    color: var(--bnd-champagne);
}

.member-home__models-frame-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
}

.member-home__models-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* ── Responsive ────────────────────────────────────── */
@media (max-width: 768px) {
    :root {
        --bnd-margin: var(--bnd-margin-mobile);
    }

    .hero__headline {
        font-size: var(--bnd-text-4xl);
    }

    .section__heading {
        font-size: var(--bnd-text-3xl);
    }

    .nav__links {
        gap: var(--bnd-space-3);
    }

    .nav__link--live::before {
        display: none;
    }

    .join-stats {
        gap: var(--bnd-space-6);
    }

    .creator-grid {
        grid-template-columns: 1fr;
        max-width: 320px;
    }

    .age-gate__actions {
        flex-direction: column;
        align-items: center;
    }

    .auth-modal__panel {
        padding: var(--bnd-space-8) var(--bnd-space-6);
    }

    .live-embed__frame-wrap {
        padding-bottom: 75%; /* taller on mobile */
    }

    .member-home__grid {
        grid-template-columns: 1fr;
    }

    .member-home__models {
        min-height: 60vh;
    }

    .member-home__greeting {
        font-size: var(--bnd-text-4xl);
    }
}

@media (max-width: 480px) {
    .hero__headline {
        font-size: var(--bnd-text-3xl);
    }

    .nav__brand {
        font-size: var(--bnd-text-xs);
        letter-spacing: 0.1em;
    }

    .nav__auth-btn {
        padding: var(--bnd-space-1) var(--bnd-space-3);
        font-size: 0.65rem;
    }

    .footer__inner {
        flex-direction: column;
        text-align: center;
    }
}

/* ══════════════════════════════════════════════════════
   SPA PAGES — Models, Content, Dashboard
   Sprint 1 · DRY RUN · §28
   ══════════════════════════════════════════════════════ */

/* ── Page Hero ─────────────────────────────────────── */
.page-hero {
    padding: calc(var(--bnd-space-32) + 60px) var(--bnd-margin) var(--bnd-space-16);
    background: linear-gradient(180deg, var(--bnd-onyx) 0%, var(--bnd-black) 100%);
    text-align: center;
    border-bottom: 1px solid var(--bnd-border);
}
.page-hero__title {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-5xl);
    font-weight: 300;
    color: var(--bnd-text-hero);
    letter-spacing: 0.08em;
    margin-bottom: var(--bnd-space-4);
}
.page-hero__subtitle {
    font-size: var(--bnd-text-lg);
    color: var(--bnd-text-secondary);
    max-width: 600px;
    margin: 0 auto;
}

/* ── Active Nav Link ───────────────────────────────── */
.nav__link--active {
    color: var(--bnd-accent) !important;
    border-bottom: 2px solid var(--bnd-accent);
    padding-bottom: 2px;
}

/* ── Filter Bar ────────────────────────────────────── */
.models-filters, .content-filters {
    padding: var(--bnd-space-6) var(--bnd-margin);
    background: var(--bnd-onyx);
    border-bottom: 1px solid var(--bnd-border);
    position: sticky;
    top: 60px;
    z-index: 90;
}
.models-filters__bar, .content-filters__bar {
    max-width: var(--bnd-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: var(--bnd-space-6);
    flex-wrap: wrap;
}
.models-filters__search {
    display: flex;
    align-items: center;
    gap: var(--bnd-space-2);
    background: var(--bnd-charcoal);
    border: 1px solid var(--bnd-border);
    border-radius: 6px;
    padding: var(--bnd-space-2) var(--bnd-space-4);
    flex: 1;
    min-width: 200px;
    max-width: 360px;
}
.models-filters__icon { color: var(--bnd-graphite); flex-shrink: 0; }
.models-filters__input {
    background: transparent;
    border: none;
    color: var(--bnd-text-primary);
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-sm);
    width: 100%;
    outline: none;
}
.models-filters__input::placeholder { color: var(--bnd-graphite); }
.models-filters__tags {
    display: flex;
    gap: var(--bnd-space-2);
    flex-wrap: wrap;
}
.filter-tag {
    background: var(--bnd-charcoal);
    border: 1px solid var(--bnd-border);
    color: var(--bnd-text-secondary);
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-xs);
    padding: var(--bnd-space-1) var(--bnd-space-3);
    border-radius: 20px;
    cursor: pointer;
    transition: all var(--bnd-duration-fast) var(--bnd-ease);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.filter-tag:hover { border-color: var(--bnd-accent); color: var(--bnd-accent); }
.filter-tag--active {
    background: var(--bnd-accent);
    border-color: var(--bnd-accent);
    color: var(--bnd-black);
    font-weight: 500;
}
.models-filters__select {
    background: var(--bnd-charcoal);
    border: 1px solid var(--bnd-border);
    color: var(--bnd-text-secondary);
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-sm);
    padding: var(--bnd-space-2) var(--bnd-space-4);
    border-radius: 6px;
    cursor: pointer;
}
.models-filters__select option { background: var(--bnd-onyx); }

/* ── Model Grid ────────────────────────────────────── */
.models-grid-section, .content-grid-section {
    padding: var(--bnd-space-12) var(--bnd-margin);
    min-height: 400px;
}
.models-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: var(--bnd-space-6);
    max-width: var(--bnd-max-width);
    margin: 0 auto;
}
.model-card {
    background: var(--bnd-onyx);
    border: 1px solid var(--bnd-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--bnd-duration-base) var(--bnd-ease),
                box-shadow var(--bnd-duration-base) var(--bnd-ease),
                border-color var(--bnd-duration-base) var(--bnd-ease);
}
.model-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bnd-shadow-lg);
    border-color: var(--bnd-accent);
}
.model-card__portrait {
    position: relative;
    aspect-ratio: 3/4;
    background: var(--bnd-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
}
.model-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.model-card__placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
}
.model-card__badge {
    position: absolute;
    top: var(--bnd-space-3);
    font-size: var(--bnd-text-xs);
    font-weight: 600;
    letter-spacing: 0.1em;
    padding: 2px 8px;
    border-radius: 4px;
}
.model-card__badge--live {
    left: var(--bnd-space-3);
    background: var(--bnd-live);
    color: white;
    animation: pulse-live 2s infinite;
}
.model-card__badge--verified {
    right: var(--bnd-space-3);
    background: var(--bnd-accent);
    color: var(--bnd-black);
}
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}
.model-card__info {
    padding: var(--bnd-space-4);
}
.model-card__name {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-base);
    font-weight: 600;
    color: var(--bnd-text-primary);
    margin-bottom: var(--bnd-space-1);
}
.model-card__tagline {
    font-size: var(--bnd-text-sm);
    color: var(--bnd-text-secondary);
    margin-bottom: var(--bnd-space-3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.model-card__cats {
    display: flex;
    gap: var(--bnd-space-1);
    flex-wrap: wrap;
    margin-bottom: var(--bnd-space-3);
}
.model-card__cat {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 6px;
    border: 1px solid var(--bnd-graphite);
    border-radius: 3px;
    color: var(--bnd-graphite);
}
.model-card__stats {
    display: flex;
    justify-content: space-between;
    font-size: var(--bnd-text-xs);
    color: var(--bnd-graphite);
}
.model-card__stars { color: var(--bnd-accent); }

/* ── Content Grid ──────────────────────────────────── */
.content-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: var(--bnd-space-6);
    max-width: var(--bnd-max-width);
    margin: 0 auto;
}
.content-card {
    background: var(--bnd-onyx);
    border: 1px solid var(--bnd-border);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: transform var(--bnd-duration-base) var(--bnd-ease),
                box-shadow var(--bnd-duration-base) var(--bnd-ease);
}
.content-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--bnd-shadow-lg);
}
.content-card__thumb {
    position: relative;
    aspect-ratio: 16/9;
    background: var(--bnd-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
}
.content-card__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.content-card__placeholder {
    color: var(--bnd-graphite);
}
.content-card__type {
    position: absolute;
    top: var(--bnd-space-2);
    left: var(--bnd-space-2);
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(0,0,0,0.7);
    color: var(--bnd-silver);
}
.content-card__premium {
    position: absolute;
    bottom: var(--bnd-space-2);
    right: var(--bnd-space-2);
    font-size: var(--bnd-text-xs);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--bnd-accent);
    color: var(--bnd-black);
}
.content-card__free {
    position: absolute;
    bottom: var(--bnd-space-2);
    right: var(--bnd-space-2);
    font-size: var(--bnd-text-xs);
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(46,125,50,0.8);
    color: white;
}
.content-card__body {
    padding: var(--bnd-space-4);
}
.content-card__title {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-sm);
    font-weight: 500;
    color: var(--bnd-text-primary);
    margin-bottom: var(--bnd-space-1);
}
.content-card__creator {
    font-size: var(--bnd-text-xs);
    color: var(--bnd-text-secondary);
    margin-bottom: var(--bnd-space-2);
}
.content-card__meta {
    display: flex;
    justify-content: space-between;
    font-size: var(--bnd-text-xs);
    color: var(--bnd-graphite);
}

/* ── Toggle ────────────────────────────────────────── */
.content-filters__toggle { display: flex; align-items: center; margin-left: auto; }
.toggle { display: flex; align-items: center; gap: var(--bnd-space-2); cursor: pointer; }
.toggle input { display: none; }
.toggle__slider {
    width: 36px;
    height: 20px;
    background: var(--bnd-charcoal);
    border-radius: 10px;
    position: relative;
    transition: background var(--bnd-duration-fast) var(--bnd-ease);
}
.toggle__slider::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--bnd-silver);
    top: 2px;
    left: 2px;
    transition: transform var(--bnd-duration-fast) var(--bnd-ease);
}
.toggle input:checked + .toggle__slider { background: var(--bnd-accent); }
.toggle input:checked + .toggle__slider::after { transform: translateX(16px); background: var(--bnd-black); }
.toggle__label { font-size: var(--bnd-text-sm); color: var(--bnd-text-secondary); }

/* ── Empty / Loading States ────────────────────────── */
.models-empty, .dash-empty {
    text-align: center;
    padding: var(--bnd-space-16) var(--bnd-space-4);
    color: var(--bnd-graphite);
}
.models-empty p, .dash-empty p {
    margin-top: var(--bnd-space-4);
    font-size: var(--bnd-text-base);
}
.models-loading {
    text-align: center;
    padding: var(--bnd-space-16);
    color: var(--bnd-graphite);
}
.spinner {
    width: 32px;
    height: 32px;
    border: 2px solid var(--bnd-charcoal);
    border-top-color: var(--bnd-accent);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto var(--bnd-space-4);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Dashboard ─────────────────────────────────────── */
.page-dashboard { padding-top: 60px; }

.auth-required {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80vh;
    padding: var(--bnd-space-8);
}
.auth-required__box {
    text-align: center;
    background: var(--bnd-onyx);
    border: 1px solid var(--bnd-border);
    border-radius: 12px;
    padding: var(--bnd-space-12) var(--bnd-space-8);
    max-width: 400px;
}
.auth-required__box h2 {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-3xl);
    font-weight: 300;
    margin-bottom: var(--bnd-space-4);
}
.auth-required__box p {
    color: var(--bnd-text-secondary);
    margin-bottom: var(--bnd-space-6);
}

.dash-header {
    padding: var(--bnd-space-8) var(--bnd-margin);
    background: var(--bnd-onyx);
    border-bottom: 1px solid var(--bnd-border);
}
.dash-header__row {
    max-width: var(--bnd-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--bnd-space-4);
}
.dash-header__user {
    display: flex;
    align-items: center;
    gap: var(--bnd-space-4);
}
.dash-header__avatar {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: var(--bnd-charcoal);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border: 2px solid var(--bnd-border);
}
.dash-header__avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.dash-header__name {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-3xl);
    font-weight: 300;
    color: var(--bnd-text-hero);
}
.dash-header__role {
    font-size: var(--bnd-text-sm);
    color: var(--bnd-accent);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}
.dash-header__actions {
    display: flex;
    gap: var(--bnd-space-3);
}
.btn--sm {
    padding: var(--bnd-space-2) var(--bnd-space-4);
    font-size: var(--bnd-text-xs);
}
.btn--danger {
    border-color: var(--bnd-danger);
    color: var(--bnd-danger);
}
.btn--danger:hover {
    background: var(--bnd-danger);
    color: white;
}

/* ── Dashboard Tabs ────────────────────────────────── */
.dash-tabs {
    background: var(--bnd-onyx);
    border-bottom: 1px solid var(--bnd-border);
    position: sticky;
    top: 60px;
    z-index: 90;
}
.dash-tabs__bar {
    max-width: var(--bnd-max-width);
    margin: 0 auto;
    display: flex;
    gap: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.dash-tab {
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--bnd-text-secondary);
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-sm);
    padding: var(--bnd-space-4) var(--bnd-space-6);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--bnd-duration-fast) var(--bnd-ease);
}
.dash-tab:hover { color: var(--bnd-text-primary); }
.dash-tab--active {
    color: var(--bnd-accent);
    border-bottom-color: var(--bnd-accent);
}

/* ── Dashboard Panels ──────────────────────────────── */
.dash-panel { padding: var(--bnd-space-8) var(--bnd-margin); }

.dash-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--bnd-space-4);
    max-width: var(--bnd-max-width);
    margin: 0 auto var(--bnd-space-8);
}
.dash-stat-card {
    background: var(--bnd-onyx);
    border: 1px solid var(--bnd-border);
    border-radius: 8px;
    padding: var(--bnd-space-6);
    text-align: center;
}
.dash-stat-card__value {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-3xl);
    font-weight: 300;
    color: var(--bnd-accent);
    margin-bottom: var(--bnd-space-2);
}
.dash-stat-card__label {
    font-size: var(--bnd-text-xs);
    color: var(--bnd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.dash-section {
    max-width: var(--bnd-max-width);
    margin: 0 auto var(--bnd-space-8);
}
.dash-section__title {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-lg);
    font-weight: 500;
    color: var(--bnd-text-primary);
    margin-bottom: var(--bnd-space-4);
    letter-spacing: 0.05em;
}

.dash-actions {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: var(--bnd-space-4);
}
.dash-action-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--bnd-space-3);
    padding: var(--bnd-space-6);
    background: var(--bnd-onyx);
    border: 1px solid var(--bnd-border);
    border-radius: 8px;
    cursor: pointer;
    transition: all var(--bnd-duration-base) var(--bnd-ease);
    text-decoration: none;
    color: var(--bnd-text-secondary);
    font-size: var(--bnd-text-sm);
    text-align: center;
}
.dash-action-card:hover {
    border-color: var(--bnd-accent);
    box-shadow: var(--bnd-shadow-glow);
    transform: translateY(-2px);
}

/* ── Token Packages ────────────────────────────────── */
.token-packages {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--bnd-space-4);
    max-width: var(--bnd-max-width);
    margin: 0 auto;
}
.token-pkg {
    background: var(--bnd-onyx);
    border: 1px solid var(--bnd-border);
    border-radius: 8px;
    padding: var(--bnd-space-6);
    text-align: center;
    position: relative;
}
.token-pkg--popular {
    border-color: var(--bnd-accent);
    box-shadow: var(--bnd-shadow-glow);
}
.token-pkg__badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--bnd-accent);
    color: var(--bnd-black);
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 12px;
    border-radius: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}
.token-pkg__amount {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-2xl);
    color: var(--bnd-text-primary);
    margin-bottom: var(--bnd-space-2);
}
.token-pkg__price {
    font-size: var(--bnd-text-lg);
    color: var(--bnd-accent);
    font-weight: 500;
    margin-bottom: var(--bnd-space-4);
}

/* ── Admin ─────────────────────────────────────────── */
.dash-admin-actions {
    display: flex;
    gap: var(--bnd-space-3);
    flex-wrap: wrap;
    margin-bottom: var(--bnd-space-8);
}
.dash-table {
    max-width: var(--bnd-max-width);
    margin: 0 auto;
}
.dash-table__row {
    display: grid;
    grid-template-columns: 2fr 1.5fr 0.8fr 1fr;
    gap: var(--bnd-space-4);
    padding: var(--bnd-space-3) var(--bnd-space-4);
    border-bottom: 1px solid var(--bnd-border);
    align-items: center;
    font-size: var(--bnd-text-sm);
    color: var(--bnd-text-secondary);
}
.dash-table__row:hover {
    background: var(--bnd-charcoal);
}
.dash-table__badge {
    display: inline-block;
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 1px 8px;
    border-radius: 3px;
    text-align: center;
}
.dash-table__badge--admin { background: var(--bnd-accent); color: var(--bnd-black); }
.dash-table__badge--model { background: var(--bnd-live); color: white; }
.dash-table__badge--subscriber { background: var(--bnd-success); color: white; }
.dash-table__badge--viewer { background: var(--bnd-charcoal); color: var(--bnd-silver); }

/* ── Modal ─────────────────────────────────────────── */
.modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
}
.modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.8);
}
.modal__content {
    position: relative;
    background: var(--bnd-onyx);
    border: 1px solid var(--bnd-border);
    border-radius: 12px;
    padding: var(--bnd-space-8);
    max-width: 480px;
    width: 90%;
    z-index: 1;
}
.modal__close {
    position: absolute;
    top: var(--bnd-space-4);
    right: var(--bnd-space-4);
    background: none;
    border: none;
    color: var(--bnd-text-secondary);
    font-size: var(--bnd-text-2xl);
    cursor: pointer;
}
.modal__title {
    font-family: var(--bnd-font-display);
    font-size: var(--bnd-text-2xl);
    font-weight: 300;
    margin-bottom: var(--bnd-space-6);
}

/* ── Forms ─────────────────────────────────────────── */
.form-group { margin-bottom: var(--bnd-space-4); }
.form-label {
    display: block;
    font-size: var(--bnd-text-xs);
    color: var(--bnd-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--bnd-space-2);
}
.form-input {
    width: 100%;
    padding: var(--bnd-space-3) var(--bnd-space-4);
    background: var(--bnd-charcoal);
    border: 1px solid var(--bnd-border);
    color: var(--bnd-text-primary);
    font-family: var(--bnd-font-body);
    font-size: var(--bnd-text-sm);
    border-radius: 6px;
    outline: none;
    transition: border-color var(--bnd-duration-fast) var(--bnd-ease);
}
.form-input:focus { border-color: var(--bnd-accent); }
.form-textarea { resize: vertical; min-height: 80px; }
.form-actions {
    display: flex;
    gap: var(--bnd-space-3);
    margin-top: var(--bnd-space-6);
}
.form-error {
    margin-top: var(--bnd-space-4);
    padding: var(--bnd-space-3) var(--bnd-space-4);
    background: rgba(211,47,47,0.1);
    border: 1px solid rgba(211,47,47,0.3);
    color: #ef5350;
    font-size: var(--bnd-text-sm);
    border-radius: 4px;
}
.form-success {
    margin-top: var(--bnd-space-4);
    padding: var(--bnd-space-3) var(--bnd-space-4);
    background: rgba(46,125,50,0.1);
    border: 1px solid rgba(46,125,50,0.3);
    color: #66bb6a;
    font-size: var(--bnd-text-sm);
    border-radius: 4px;
}

/* ── Footer Grid (shared across pages) ─────────────── */
.footer__grid {
    max-width: var(--bnd-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--bnd-space-8);
    margin-bottom: var(--bnd-space-6);
}
.footer__heading {
    font-family: var(--bnd-font-heading);
    font-size: var(--bnd-text-xs);
    font-weight: 600;
    letter-spacing: 0.15em;
    color: var(--bnd-silver);
    margin-bottom: var(--bnd-space-4);
    text-transform: uppercase;
}
.footer__text {
    font-size: var(--bnd-text-sm);
    color: var(--bnd-graphite);
    line-height: 1.6;
}
.footer__link {
    display: block;
    font-size: var(--bnd-text-sm);
    color: var(--bnd-graphite);
    text-decoration: none;
    margin-bottom: var(--bnd-space-2);
    transition: color var(--bnd-duration-fast) var(--bnd-ease);
}
.footer__link:hover { color: var(--bnd-accent); }
.footer__bottom {
    border-top: 1px solid var(--bnd-border);
    padding-top: var(--bnd-space-6);
    text-align: center;
    font-size: var(--bnd-text-xs);
    color: var(--bnd-graphite);
}

/* ── Responsive (SPA Pages) ────────────────────────── */
@media (max-width: 768px) {
    .page-hero__title { font-size: var(--bnd-text-3xl); }
    .models-filters__bar, .content-filters__bar { flex-direction: column; align-items: stretch; }
    .models-filters__search { max-width: none; }
    .models-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .content-grid { grid-template-columns: 1fr; }
    .footer__grid { grid-template-columns: 1fr 1fr; }
    .dash-header__row { flex-direction: column; align-items: flex-start; }
    .dash-stats { grid-template-columns: 1fr 1fr; }
    .dash-actions { grid-template-columns: 1fr 1fr; }
    .token-packages { grid-template-columns: 1fr 1fr; }
    .dash-table__row { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 480px) {
    .page-hero__title { font-size: var(--bnd-text-2xl); }
    .page-hero { padding-top: calc(var(--bnd-space-16) + 60px); }
    .footer__grid { grid-template-columns: 1fr; }
    .dash-stats { grid-template-columns: 1fr; }
    .token-packages { grid-template-columns: 1fr; }
}