/* ============================================================
   SPOTT.FOOD - Global styles & landing page
   Tokens live in tokens.css (loaded first). This file must not
   introduce colours, sizes or shadows that are not tokens.
   ============================================================ */

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

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background: var(--color-canvas);
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: var(--leading-body);
    color: var(--color-text-primary);
    background-color: var(--color-canvas);
    overflow-x: hidden;
    min-height: 100vh;
}

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

a {
    color: var(--color-primary-text);
    text-decoration: none;
    transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary); }

/* --- Typography ---------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    line-height: var(--leading-snug);
    letter-spacing: var(--tracking-heading);
    color: var(--color-text-primary);
}

.heading-display {
    font-family: var(--font-display);
    font-size: var(--text-display-sm);
    font-weight: var(--weight-display-bold);
    line-height: var(--leading-tight);
    text-transform: uppercase;
}
.heading-section {
    font-family: var(--font-display);
    font-size: var(--text-h2);
    text-transform: uppercase;
    letter-spacing: var(--tracking-heading);
    line-height: var(--leading-snug);
}
.text-body-lg { font-size: var(--text-lead); }
.text-body-sm { font-size: var(--text-body-sm); }
.text-caption {
    font-size: var(--text-caption);
    color: var(--color-text-muted);
    line-height: var(--leading-body);
}
.accent { color: var(--color-primary); }
.section-label {
    display: inline-block;
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: var(--space-2);
}
.section-label a { color: inherit; }
.section-label a:hover { color: var(--color-primary); }

/* --- Buttons -------------------------------------------------- */
.btn-primary-custom,
.btn-secondary-custom,
.btn-accent,
.btn-white,
.btn-ghost,
.btn-danger-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: var(--text-lead);
    font-weight: var(--weight-display);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    line-height: 1;
    padding: var(--space-4) var(--space-8);
    border-radius: var(--radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: transform var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-base) ease,
                background-color var(--duration-base) ease,
                border-color var(--duration-base) ease,
                color var(--duration-base) ease;
}

.btn-primary-custom {
    color: var(--color-text-inverse);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    box-shadow: var(--elev-raised);
}
.btn-primary-custom:hover {
    color: var(--color-text-inverse);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-primary));
    box-shadow: var(--elev-glow-primary), var(--elev-floating);
    transform: translateY(-2px);
}
.btn-primary-custom:active { transform: scale(0.97); }
.btn-primary-custom:disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

.btn-secondary-custom {
    color: var(--color-text-primary);
    background: transparent;
    border-color: var(--color-border-strong);
}
.btn-secondary-custom:hover {
    color: var(--color-text-primary);
    background: var(--tint-neutral);
    border-color: var(--color-text-muted);
    transform: translateY(-2px);
}
.btn-secondary-custom:active { transform: scale(0.97); }

.btn-accent {
    color: var(--color-on-accent);
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark));
    box-shadow: var(--elev-raised);
}
.btn-accent:hover {
    color: var(--color-on-accent);
    box-shadow: var(--elev-glow-accent), var(--elev-floating);
    transform: translateY(-2px);
}

.btn-white {
    color: var(--color-primary-dark);
    background: var(--color-paper);
    box-shadow: var(--elev-raised);
}
.btn-white:hover { color: var(--color-primary-dark); box-shadow: var(--elev-floating); transform: translateY(-2px); }

.btn-ghost {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: var(--space-3) var(--space-6);
    color: var(--color-text-secondary);
    background: transparent;
    border: 1px solid var(--color-border-strong);
}
.btn-ghost:hover {
    color: var(--color-text-primary);
    background: var(--tint-neutral);
    border-color: var(--color-text-muted);
}
.btn-ghost:active { transform: scale(0.97); }

.btn-danger-outline {
    font-family: var(--font-body);
    font-size: var(--text-body);
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    padding: var(--space-3) var(--space-6);
    color: var(--color-error-text);
    background: transparent;
    border: 1px solid var(--color-error);
}
.btn-danger-outline:hover { background: var(--tint-error); color: var(--color-error-text); }

.btn-ghost-sm { font-size: var(--text-caption); padding: var(--space-2) var(--space-4); }
.btn-primary-sm { font-size: var(--text-body); padding: var(--space-3) var(--space-6); }

/* --- Form fields ---------------------------------------------- */
.form-group { margin-bottom: var(--space-4); }
.form-input,
select.form-input,
textarea.form-input {
    width: 100%;
    padding: var(--space-3) var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-body);
    color: var(--color-field-text);
    background: var(--color-field-bg);
    border: 1.5px solid var(--color-field-border);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
}
.form-input::placeholder { color: var(--color-field-placeholder); }
.form-input:hover:not(:focus) { border-color: var(--color-border-strong); }
.form-input:focus {
    background: var(--color-field-bg-focus);
    border-color: var(--color-primary);
    box-shadow: var(--focus-ring-primary);
}
select.form-input option { color: var(--color-paper-ink); background: var(--color-paper); }
.form-input.is-invalid { border-color: var(--color-error); box-shadow: 0 0 0 3px var(--tint-error); }
.form-input.is-valid { border-color: var(--color-success); }

.form-label-custom {
    display: block;
    margin-bottom: var(--space-1);
    font-size: var(--text-caption);
    font-weight: 600;
    color: var(--color-text-secondary);
    letter-spacing: 0.02em;
}
.form-row-2col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.form-error, .form-success {
    display: block;
    font-size: var(--text-micro);
    margin-top: var(--space-1);
}
.form-error { color: var(--color-error-text); }
.form-success { color: var(--color-success-text); }
.has-error .form-input { border-color: var(--color-error); }

/* --- Cards & surfaces ------------------------------------------ */
.card-elevated {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-raised);
    border: 1px solid var(--color-border-light);
}
.card-flat {
    background: var(--color-surface-alt);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border-light);
}
.bg-dark-gradient {
    background:
        radial-gradient(60% 50% at 50% 0%, var(--scene-glow), transparent 70%),
        linear-gradient(160deg, var(--scene-wall-top) 0%, var(--scene-wall-mid) 55%, var(--scene-wall-bottom) 100%);
}
.home-actions { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-top: var(--space-8); }

/* Category chips: shared by filters, cards, and truck pages */
.category-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-micro);
    font-weight: 600;
    line-height: 1.5;
    color: var(--color-text-secondary);
    background: var(--tint-neutral);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
a.category-tag:hover { color: var(--color-primary-text); border-color: var(--color-primary); background: var(--tint-primary); }

/* --- Search bar (hero + list) ---------------------------------- */
.hero-search { width: 100%; max-width: 520px; margin-bottom: var(--space-8); }
.hero-search-form {
    display: flex;
    align-items: center;
    background: var(--color-field-bg);
    border: 1.5px solid var(--color-field-border);
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-1) var(--space-1) var(--space-5);
    box-shadow: var(--elev-raised);
    transition: border-color var(--transition-base), box-shadow var(--transition-base), background-color var(--transition-base);
}
.hero-search-form:focus-within {
    border-color: var(--color-primary);
    background: var(--color-field-bg-focus);
    box-shadow: var(--focus-ring-primary), var(--elev-raised);
}
.hero-search-form > i { color: var(--color-field-placeholder); font-size: 1rem; flex-shrink: 0; }
.hero-search-form input {
    flex: 1;
    min-width: 0;
    background: none;
    border: none;
    outline: none;
    color: var(--color-field-text);
    font-family: var(--font-body);
    font-size: var(--text-body);
    padding: var(--space-3) var(--space-3);
}
.hero-search-form input::placeholder { color: var(--color-field-placeholder); }
.hero-search-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--space-3) var(--space-5);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    border: none;
    border-radius: var(--radius-full);
    font-family: var(--font-display);
    font-size: var(--text-body);
    font-weight: var(--weight-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    cursor: pointer;
    flex-shrink: 0;
    transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.hero-search-btn:hover { box-shadow: var(--elev-glow-primary); }
.hero-search-btn:active { transform: scale(0.97); }
.hero-search-kbd {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    margin-right: var(--space-2);
    background: var(--tint-neutral);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xs);
    color: var(--color-text-muted);
    font-family: var(--font-mono);
    font-size: var(--text-micro);
    flex-shrink: 0;
    transition: opacity var(--transition-fast);
}
.hero-search-form:focus-within .hero-search-kbd { opacity: 0; }

.hero-categories {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-bottom: var(--space-6);
}
.hero-cat-label {
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--color-text-muted);
}
.hero-cat-tag {
    display: inline-flex;
    padding: var(--space-1) var(--space-3);
    font-size: var(--text-micro);
    font-weight: 600;
    color: var(--color-text-secondary);
    background: var(--tint-neutral);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}
.hero-cat-tag:hover { background: var(--tint-primary); border-color: var(--color-primary); color: var(--color-primary-text); }

.hero-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    margin-bottom: var(--space-10);
    width: 100%;
}
.hero-actions .btn-primary-custom,
.hero-actions .btn-secondary-custom { width: 100%; max-width: 320px; }
.hero-actions .btn-primary-custom { padding: var(--space-4) var(--space-8); font-size: 1.25rem; }

@media (max-width: 480px) {
    .hero-search-btn span { display: none; }
    .hero-search-kbd { display: none; }
}

/* --- Social sign-in ------------------------------------------- */
.social-login { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: var(--space-4); }
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin: var(--space-6) 0;
    color: var(--color-text-muted);
    font-size: var(--text-micro);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    width: 100%;
    max-width: 320px;
}
.auth-divider::before, .auth-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); }
.auth-social { display: flex; gap: var(--space-4); }
.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    color: var(--color-text-primary);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--elev-raised);
    transition: transform var(--transition-base), box-shadow var(--transition-base), border-color var(--transition-base);
}
.social-btn:hover { border-color: var(--color-border-strong); box-shadow: var(--elev-floating); transform: translateY(-2px); }
.social-btn img { width: 22px; height: 22px; object-fit: contain; }
.auth-social .social-btn { flex: 1; width: auto; height: 44px; }

/* --- Auth pages (login, register) ------------------------------ */
.auth-page {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-8) var(--space-4);
    position: relative;
    overflow: hidden;
}
.auth-page .bg-dark-gradient { position: absolute; inset: 0; z-index: 0; }
.auth-page .bg-dark-gradient::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: var(--scene-grain-opacity);
    mix-blend-mode: overlay;
}
.auth-container { position: relative; z-index: 1; width: 100%; max-width: 440px; }
.auth-header { text-align: center; margin-bottom: var(--space-8); }
.auth-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-family: var(--font-display);
    font-size: 1.75rem;
    font-weight: var(--weight-display-bold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: var(--space-6);
}
.auth-logo:hover { color: var(--color-text-primary); }
.auth-title {
    font-size: var(--text-h2);
    color: var(--color-text-primary);
    text-transform: uppercase;
    margin-bottom: var(--space-1);
}
.auth-subtitle { color: var(--color-text-secondary); font-size: var(--text-body); }
.auth-card {
    position: relative;
    overflow: hidden;
    padding: var(--space-10) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    box-shadow: var(--elev-floating);
}
.auth-card::before {
    content: '';
    position: absolute;
    top: -1px; left: -1px; right: -1px;
    height: 3px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent), var(--color-primary));
    background-size: 200% 100%;
    animation: shimmer 3s ease infinite;
}
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.auth-form .form-group { margin-bottom: var(--space-5); }
.auth-form .form-label-custom { margin-bottom: var(--space-2); }
.auth-form .btn-primary-custom { width: 100%; margin-top: var(--space-2); }
.auth-footer { text-align: center; margin-top: var(--space-8); color: var(--color-text-muted); font-size: var(--text-body-sm); }
.auth-footer a { font-weight: 600; }
.auth-footer a:hover { text-decoration: underline; }
.password-strength { margin-top: var(--space-2); display: flex; gap: var(--space-1); }
.password-strength-bar {
    flex: 1;
    height: 3px;
    background: var(--color-border-strong);
    border-radius: var(--radius-full);
    transition: background-color var(--transition-fast);
}
.password-strength-bar.active { background: var(--color-primary); }
.password-strength-bar.strong { background: var(--color-success); }
@media (max-width: 480px) { .auth-card { padding: var(--space-8) var(--space-5); } }

/* --- Alerts (Django messages) --------------------------------- */
.alert-container { display: grid; gap: var(--space-2); margin-bottom: var(--space-6); }
.alert-error, .alert-success, .alert-info, .alert-warning {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    border: 1px solid;
    font-size: var(--text-body-sm);
    line-height: var(--leading-body);
}
.alert-error, .alert-success, .alert-info, .alert-warning { color: var(--color-text-primary); }
.alert-error   { background: var(--tint-error);   border-color: var(--color-error); }
.alert-success { background: var(--tint-success); border-color: var(--color-success); }
.alert-info    { background: var(--tint-blue);    border-color: var(--color-blue); }
.alert-warning { background: var(--tint-warning); border-color: var(--color-warning); }
.alert-error i   { color: var(--color-error-text); }
.alert-success i { color: var(--color-success-text); }
.alert-info i    { color: var(--color-blue-text); }
.alert-warning i { color: var(--color-warning-text); }
.alert-container i { font-size: 1.125rem; flex-shrink: 0; margin-top: 1px; }

/* --- Dashboard quick actions ----------------------------------- */
.quick-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-8);
}
.quick-action-card {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--elev-raised);
    color: var(--color-text-primary);
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) ease, border-color var(--duration-base) ease;
}
.quick-action-card:hover { border-color: var(--color-primary); color: var(--color-text-primary); transform: translateY(-3px); box-shadow: var(--elev-floating); }
.quick-action-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: var(--tint-primary);
    border-radius: var(--radius-md);
    font-size: 1.25rem;
    color: var(--color-primary);
    flex-shrink: 0;
}
.quick-action-label { font-family: var(--font-display); font-size: var(--text-h4); text-transform: uppercase; letter-spacing: var(--tracking-heading); line-height: 1.1; }
.quick-action-desc { font-size: var(--text-caption); color: var(--color-text-muted); margin-top: 2px; }

/* --- Content sections & empty states ---------------------------- */
.content-section {
    background: var(--color-surface);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-border);
    box-shadow: var(--elev-raised);
    overflow: hidden;
}
.content-section-spaced { margin-top: var(--space-8); }
.content-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
    padding: var(--space-4) var(--space-6);
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border-light);
}
.content-section-title {
    font-size: var(--text-h4);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.content-section-title .text-caption { font-family: var(--font-body); text-transform: none; letter-spacing: 0; margin-left: var(--space-2); }
.content-section-body { padding: var(--space-6); }
.content-section-body > p { color: var(--color-text-secondary); }

.empty-state {
    text-align: center;
    padding: var(--space-12) var(--space-6);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
}
.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    margin-bottom: var(--space-2);
    font-size: 1.75rem;
    color: var(--color-primary);
    background: var(--tint-primary);
    border-radius: 50%;
    box-shadow: 0 0 0 8px var(--tint-neutral);
}
.empty-state h2, .empty-state h3 {
    font-size: var(--text-h3);
    text-transform: uppercase;
    letter-spacing: var(--tracking-heading);
}
.empty-state p { color: var(--color-text-secondary); font-size: var(--text-body); max-width: 360px; margin: 0 auto; }
.empty-state .btn-primary-custom, .empty-state .btn-primary-sm { margin-top: var(--space-4); }

/* --- Navbar --------------------------------------------------- */
.site-navbar {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-6);
    background: var(--color-nav-bg);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid var(--color-nav-border);
}
.navbar-brand {
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: var(--weight-display-bold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
}
.navbar-brand:hover { color: var(--color-text-primary); }
.navbar-brand .accent { color: var(--color-primary); text-shadow: 0 0 14px var(--scene-glow); }
.navbar-links { display: flex; align-items: center; gap: var(--space-5); flex-wrap: wrap; justify-content: flex-end; }
.navbar-link {
    color: var(--color-nav-link);
    font-size: var(--text-body-sm);
    font-weight: 600;
    transition: color var(--transition-fast);
}
.navbar-link:hover { color: var(--color-nav-link-hover); }
.navbar-cta {
    display: inline-flex;
    align-items: center;
    padding: var(--space-2) var(--space-5);
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: var(--weight-display);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-inverse);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    border-radius: var(--radius-full);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-base) ease;
}
.navbar-cta:hover { color: var(--color-text-inverse); transform: translateY(-1px); box-shadow: var(--elev-glow-primary); }
.navbar-cta:active { transform: scale(0.97); }

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    background: none;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-full);
    cursor: pointer;
    font-size: 1.05rem;
    color: var(--color-text-primary);
    transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.theme-toggle:hover { background: var(--tint-neutral); border-color: var(--color-border-strong); }

@media (max-width: 640px) {
    .site-navbar { padding: var(--space-2) var(--space-4); }
    .navbar-links { gap: var(--space-3); }
    .navbar-link { font-size: var(--text-caption); }
}

/* --- Footer --------------------------------------------------- */
.site-footer {
    background: var(--color-footer-bg);
    border-top: 1px solid var(--color-border);
    padding: var(--space-12) var(--space-6);
}
.footer-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: var(--container);
    margin: 0 auto;
    flex-wrap: wrap;
    gap: var(--space-6);
}
.footer-logo {
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: var(--weight-display-bold);
    color: var(--color-text-primary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.footer-logo:hover { color: var(--color-text-primary); }
.footer-logo .accent { color: var(--color-primary); }
.footer-nav { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.footer-nav a { color: var(--color-text-secondary); font-size: var(--text-body-sm); }
.footer-nav a:hover { color: var(--color-text-primary); }
.footer-copyright {
    width: 100%;
    text-align: center;
    padding-top: var(--space-6);
    border-top: 1px solid var(--color-border);
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-size: var(--text-micro);
}
@media (max-width: 768px) {
    .footer-content { flex-direction: column; text-align: center; }
    .footer-nav { justify-content: center; }
}

/* --- Accessibility --------------------------------------------- */
:is(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}
.skip-link {
    position: absolute;
    top: -100%;
    left: var(--space-4);
    padding: var(--space-2) var(--space-4);
    background: var(--color-primary);
    color: var(--color-text-inverse);
    font-weight: 600;
    border-radius: var(--radius-md);
    z-index: 9999;
}
.skip-link:focus { top: var(--space-4); }
.visually-hidden {
    position: absolute; width: 1px; height: 1px;
    margin: -1px; padding: 0; overflow: hidden;
    clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Entrance animations --------------------------------------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.animate-fade-in-up { animation: fadeInUp 0.6s var(--ease-out) both; }
.animate-fade-in { animation: fadeIn 0.4s ease both; }
.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* Scroll reveal (driven by IntersectionObserver in the page head) */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.55s ease, transform 0.55s var(--ease-out); }
.reveal.in { opacity: 1; transform: none; }

/* ============================================================
   LANDING - "The sign at night"
   A lit scene: a painted wall with grain, the neon sign, warm
   spill from the tubes, string lights above, a vignette closing
   the corners. Below the fold, sections alternate wall tones.
   ============================================================ */
.v2 { background: var(--color-canvas); overflow-x: hidden; }

/* ---- Hero: the wall ---- */
.v2-hero {
    position: relative;
    min-height: 92vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-24) var(--space-6) var(--space-16);
    overflow: hidden;
    isolation: isolate;
    background:
        radial-gradient(ellipse 70% 50% at 50% 34%, var(--scene-glow), transparent 68%),
        radial-gradient(ellipse 50% 40% at 12% 88%, var(--scene-glow-cool), transparent 70%),
        linear-gradient(180deg, var(--scene-wall-top) 0%, var(--scene-wall-mid) 55%, var(--scene-wall-bottom) 100%);
}
/* grain: painted plaster, not a flat fill */
.v2-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: var(--scene-grain-opacity);
    mix-blend-mode: overlay;
    pointer-events: none;
    z-index: 0;
}
/* vignette: the corners fall away into the night */
.v2-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(120% 90% at 50% 112%, var(--scene-vignette), transparent 58%),
        radial-gradient(140% 100% at 50% -20%, transparent 55%, var(--scene-vignette) 100%);
}

.v2-stringlights {
    position: absolute;
    top: 2.2rem; left: 0; right: 0;
    height: 8px;
    background-image: radial-gradient(circle 3px, var(--scene-lights) 0 2px, transparent 3px);
    background-size: 52px 8px;
    background-position: 10px 0;
    filter: drop-shadow(0 0 6px var(--scene-lights-glow));
    opacity: 0.75;
    z-index: 1;
}

/* Haze: warm spill from the tube that drifts very slowly.
   Cheap experiment from the plan; delete this block to cut it. */
.v2-hero-glow {
    position: absolute;
    left: 50%; top: 46%;
    width: min(900px, 96vw); height: 320px;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 1;
    background:
        radial-gradient(ellipse 55% 60% at 40% 50%, var(--scene-glow), transparent 70%),
        radial-gradient(ellipse 45% 55% at 65% 45%, var(--scene-glow), transparent 72%);
    filter: blur(18px);
    animation: v2Haze 14s ease-in-out infinite alternate;
    transition: opacity 0.25s ease;
}
@keyframes v2Haze {
    from { transform: translate(-52%, -50%) scale(1); opacity: 0.85; }
    to   { transform: translate(-48%, -48%) scale(1.08); opacity: 1; }
}
.glow-dim .v2-hero-glow { opacity: 0.3; }

.v2-hero-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 720px;
    width: 100%;
}

.v2-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
    font-family: var(--font-body);
    font-size: var(--text-caption);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-accent-text);
}
.v2-live-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 8px var(--color-accent);
    animation: v2Pulse 2.2s ease-in-out infinite;
}

/* ---- The sign ---- */
.v2-sign {
    font-family: var(--font-display);
    font-weight: var(--weight-display-bold);
    font-size: var(--text-display);
    line-height: 0.95;
    letter-spacing: 0.015em;
    margin: 0 0 var(--space-2);
}
.v2-sign-main {
    color: var(--scene-sign-main);
    text-shadow: 0 0 2px var(--scene-sign-main-halo), 0 0 18px var(--scene-sign-main-halo);
}
/* The brand element: the double-T is lit neon glass.
   White-hot core, then progressively wider orange halos.
   JS in base.html drives random flicker by toggling .neon-dim;
   the keyframe is the no-JS fallback. */
.v2-sign-tt {
    color: var(--scene-sign-tt);
    animation: v2NeonFlicker 6.5s linear infinite;
    text-shadow:
        0 0 4px rgba(255, 255, 255, 0.9),
        0 0 10px rgba(255, 107, 53, 0.9),
        0 0 24px rgba(255, 107, 53, 0.6),
        0 0 52px rgba(255, 107, 53, 0.35),
        0 0 90px rgba(255, 107, 53, 0.2);
}
.v2-sign-tt.neon-dim {
    color: rgba(255, 107, 53, 0.30);
    text-shadow: 0 0 3px rgba(255, 107, 53, 0.15);
    animation: none;
}
@keyframes v2NeonFlicker {
    0%, 6.9%, 8.2%, 11.9%, 13.5%, 74.9%, 76.3%, 100% { opacity: 1; }
    7%, 8.1%, 12%, 13.4%, 75%, 76.2% { opacity: 0.35; }
}
.theme-light .v2-sign-tt {
    text-shadow:
        0 0 3px rgba(255, 255, 255, 0.9),
        0 0 8px rgba(255, 107, 53, 0.75),
        0 0 18px rgba(255, 107, 53, 0.4),
        0 0 36px rgba(255, 107, 53, 0.18);
}
.theme-light .v2-sign-tt.neon-dim { color: rgba(229, 90, 43, 0.35); text-shadow: none; }

.v2-promise {
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.6rem, 4.5vw, 2.6rem);
    color: var(--color-text-primary);
    letter-spacing: 0.03em;
    margin: var(--space-3) 0 var(--space-2);
}
.v2-promise-accent { color: var(--color-accent); }
.v2-sub {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    font-size: clamp(0.95rem, 2.2vw, 1.1rem);
    max-width: 480px;
    margin: 0 auto var(--space-8);
    line-height: var(--leading-body);
}

/* ---- Ticket rail: paper tickets on a dark rail ---- */
.v2-rail {
    background: var(--color-canvas-deep);
    border-top: 1px solid var(--color-border);
    border-bottom: 1px solid var(--color-border);
    padding: var(--space-4) 0;
    overflow: hidden;
    box-shadow: inset 0 6px 14px rgba(0, 0, 0, 0.25);
}
.theme-light .v2-rail { box-shadow: inset 0 6px 14px rgba(15, 25, 35, 0.06); }
.v2-rail-track {
    display: flex;
    gap: var(--space-4);
    width: max-content;
    animation: v2Rail 36s linear infinite;
}
.v2-rail:hover .v2-rail-track { animation-play-state: paused; }
@keyframes v2Rail { to { transform: translateX(-50%); } }

.v2-ticket {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2) var(--space-4) var(--space-2) var(--space-5);
    background: var(--color-paper);
    color: var(--color-paper-ink);
    border-radius: var(--radius-sm);
    font-family: var(--font-body);
    font-size: var(--text-body-sm);
    white-space: nowrap;
    box-shadow: var(--elev-raised);
}
/* punched hole, like a rail spike through the ticket */
.v2-ticket::before {
    content: "";
    position: absolute;
    left: 0.35rem; top: 50%;
    width: 7px; height: 7px;
    transform: translateY(-50%);
    border-radius: 50%;
    background: var(--color-canvas-deep);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.5);
}
.v2-ticket-num {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: var(--weight-display);
    color: var(--color-primary-dark);
    letter-spacing: 0.03em;
    margin-left: var(--space-1);
}
.v2-ticket-pill {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-full);
}
.v2-pill-ready   { background: rgba(0, 212, 170, 0.18); color: var(--color-paper-accent); }
.v2-pill-cooking { background: rgba(255, 107, 53, 0.16); color: var(--color-paper-primary); }
.v2-pill-new     { background: rgba(27, 40, 56, 0.10); color: var(--color-paper-muted); }

/* ---- Below the fold: alternating wall tones ---- */
.v2-lanes {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-16) var(--space-6) var(--space-4);
}
.v2-lane {
    border-radius: var(--radius-lg);
    padding: var(--space-8) var(--space-8);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    box-shadow: var(--elev-raised);
    position: relative;
    overflow: hidden;
}
.v2-lane::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
}
.v2-lane-eat::before { background: var(--color-accent); box-shadow: 0 0 18px var(--color-accent); }
.v2-lane-run::before { background: var(--color-primary); box-shadow: 0 0 18px var(--color-primary); }
.v2-lane-label {
    font-family: var(--font-body);
    font-size: var(--text-micro);
    font-weight: 700;
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 var(--space-1);
}
.v2-lane-title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: 2.6rem;
    letter-spacing: var(--tracking-heading);
    line-height: 1;
    margin: 0 0 var(--space-5);
}
.v2-lane-eat .v2-lane-title { color: var(--color-accent); }
.v2-lane-run .v2-lane-title { color: var(--color-primary); }
.v2-lane-list {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-7);
    display: grid;
    gap: var(--space-3);
}
.v2-lane-list li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    font-size: var(--text-body);
    line-height: 1.5;
}
.v2-lane-list i { margin-top: 0.15rem; }
.v2-lane-eat .v2-lane-list i { color: var(--color-accent); }
.v2-lane-run .v2-lane-list i { color: var(--color-primary); }

.v2-steps {
    background: var(--scene-band-b);
    border-top: 1px solid var(--color-border-light);
    border-bottom: 1px solid var(--color-border-light);
    padding: var(--space-16) var(--space-6) var(--space-16);
    margin-top: var(--space-16);
    text-align: center;
}
.v2-steps-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: var(--space-6);
    max-width: 1080px;
    margin: 0 auto;
    text-align: left;
}
.v2-section-title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-h2);
    letter-spacing: var(--tracking-heading);
    color: var(--color-text-primary);
    margin-bottom: var(--space-10);
}
.v2-title-accent { color: var(--color-primary); }
.v2-step {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: var(--space-6) var(--space-6);
    box-shadow: var(--elev-raised);
}
.v2-step-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem; height: 2.25rem;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    color: var(--color-text-inverse);
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: var(--weight-display);
    margin-bottom: var(--space-4);
    box-shadow: var(--elev-glow-primary);
}
.v2-step h3 {
    font-weight: 500;
    font-size: var(--text-h3);
    color: var(--color-text-primary);
    margin: 0 0 var(--space-2);
}
.v2-step p {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    font-size: var(--text-body);
    line-height: 1.55;
    margin: 0;
}

.v2-map-teaser {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-10);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    padding: var(--space-16) var(--space-6);
}
.v2-map-panel {
    position: relative;
    min-height: 300px;
    border-radius: var(--radius-lg);
    background:
        radial-gradient(circle 2px, var(--color-border-strong) 0 1px, transparent 2px),
        linear-gradient(160deg, var(--color-surface), var(--color-surface-alt));
    background-size: 26px 26px, 100% 100%;
    border: 1px solid var(--color-border);
    box-shadow: var(--elev-raised);
    overflow: hidden;
}
.v2-map-panel::after {
    content: "";
    position: absolute;
    left: -10%; right: -10%; top: 52%;
    height: 2px;
    background: var(--color-border-strong);
    transform: rotate(-7deg);
}
.v2-map-marker {
    position: absolute;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: var(--color-accent);
    border: 2px solid var(--color-paper);
    animation: v2Pulse 2.4s ease-out infinite;
    z-index: 1;
}
.v2-map-marker-2 { animation-delay: 0.7s; }
.v2-map-marker-3 { animation-delay: 1.3s; background: var(--color-primary); }
@keyframes v2Pulse {
    0%   { box-shadow: 0 0 0 0 rgba(0, 212, 170, 0.45); }
    70%  { box-shadow: 0 0 0 14px rgba(0, 212, 170, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 212, 170, 0); }
}
.v2-map-copy .v2-section-title { margin-bottom: var(--space-4); text-align: left; }
.v2-map-copy p {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    line-height: 1.65;
    margin-bottom: var(--space-6);
}

.v2-referral {
    background:
        radial-gradient(60% 80% at 50% 100%, var(--scene-glow-cool), transparent 70%),
        var(--scene-band-c);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-14) var(--space-6);
    text-align: center;
}
.v2-referral-title {
    font-family: var(--font-display);
    font-weight: var(--weight-display);
    font-size: var(--text-h2);
    color: var(--color-text-primary);
    letter-spacing: var(--tracking-heading);
    margin-bottom: var(--space-3);
}
.v2-referral-money { color: var(--color-accent); text-shadow: 0 0 18px rgba(0, 212, 170, 0.35); }
.v2-referral-inner p {
    font-family: var(--font-body);
    color: var(--color-text-secondary);
    max-width: 560px;
    margin: 0 auto;
    line-height: 1.6;
}

/* ---- CTA banner ---- */
.cta-banner {
    position: relative;
    overflow: hidden;
    padding: var(--space-20) var(--space-6);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    text-align: center;
}
.cta-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(-45deg, transparent, transparent 10px, rgba(255, 255, 255, 0.04) 10px, rgba(255, 255, 255, 0.04) 20px);
    pointer-events: none;
}
.cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--grain);
    opacity: 0.1;
    mix-blend-mode: overlay;
    pointer-events: none;
}
.cta-banner-inner { position: relative; z-index: 1; max-width: 600px; margin: 0 auto; }
.cta-banner h2 { color: var(--color-text-inverse); font-size: var(--text-h2); margin-bottom: var(--space-4); }
.cta-banner p { color: rgba(255, 255, 255, 0.88); font-size: var(--text-lead); margin-bottom: var(--space-8); }

/* ---- Motion respect & small screens ---- */
@media (prefers-reduced-motion: reduce) {
    .v2-sign-tt, .v2-rail-track, .v2-map-marker, .v2-live-dot, .v2-hero-glow, .auth-card::before {
        animation: none !important;
    }
    .reveal { opacity: 1; transform: none; transition: none; }
    .animate-fade-in-up, .animate-fade-in { animation: none; opacity: 1; }
    * { scroll-behavior: auto !important; }
}
@media (max-width: 720px) { .v2-lanes { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .v2-hero { min-height: auto; padding-top: var(--space-20); padding-bottom: var(--space-12); }
    .v2-lane { padding: var(--space-7) var(--space-5); }
    .v2-steps { padding: var(--space-12) var(--space-4); margin-top: var(--space-12); }
    .v2-map-teaser { padding: var(--space-12) var(--space-4); }
}

/* ---- Theme transition ---- */
body, .site-navbar, .site-footer, .v2-hero, .content-section, .form-input, .auth-card {
    transition: background-color 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}

/* Theme control on the landing page: part of the footer, not a button
   floating over the hero. Signed-in pages keep theirs in the navbar. */
.theme-toggle-inline {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    height: auto;
    border-radius: var(--radius-sm);
}
.theme-toggle-inline:hover { color: var(--color-primary-text); }
.theme-toggle-inline:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; }