/* ==========================================================================
   MyBotPlus.com — Application design system
   assets/css/app.css
   --------------------------------------------------------------------------
   Loaded by includes/header.php on EVERY signed-in and auth page, so this is
   the one file guaranteed to be present. It holds, in order:

     1. Design tokens (:root)
     2. Base / reset
     3. App navigation
     4. App shell + shared mc-* components
     5. FAQ accordion
     6. Footer

   Why sections 1, 3 and 4 are here rather than where they used to be:

   - The tokens (--brand, --border, --text-muted …) were referenced by
     leads.php, billing.php and ai-knowledge-base.php but DEFINED NOWHERE.
     A declaration using an undefined custom property is invalid at compute
     time and is thrown away, so those pages rendered with no borders, no
     radii and inherited text colours.
   - The mc-table / mc-empty / mc-btn-ghost / mc-select family had the same
     problem: leads.php is built entirely out of them and none existed.
   - The navigation CSS lived in an inline <style> inside header.php, which
     meant ~4 KB of identical, uncacheable CSS in the HTML of every single
     page view. Here it is downloaded once and cached for a year.

   Cache-busted by ASSET_VERSION in admin/config.php — bump that after
   editing this file.
   ========================================================================== */

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
    /* Brand */
    --brand:          #00346C;
    --brand-dark:     #00254D;
    --brand-darker:   #001F42;
    --brand-tint:     #EDF3F9;
    --brand-line:     #B5CCE3;

    /* Text */
    --ink:            #0F172A;
    --text:           #334155;
    --text-muted:     #64748B;
    --text-faint:     #94A3B8;

    /* Surfaces & lines */
    --surface:        #FFFFFF;
    --surface-2:      #F8FAFC;
    --surface-3:      #F1F5F9;
    --border:         #E2E8F0;
    --border-strong:  #CBD5E1;

    /* Status */
    --success:        #10B981;
    --success-dark:   #059669;
    --success-tint:   #ECFDF5;
    --warning:        #D97706;
    --warning-tint:   #FFFBEB;
    --danger:         #DC2626;
    --danger-dark:    #B91C1C;
    --danger-tint:    #FEF2F2;

    /* Shape */
    --radius-sm:      6px;
    --radius:         8px;
    --radius-lg:      12px;
    --radius-full:    999px;

    /* Elevation */
    --shadow-sm:      0 1px 2px rgba(15, 23, 42, 0.04);
    --shadow:         0 1px 3px rgba(15, 23, 42, 0.06);
    --shadow-md:      0 4px 12px rgba(15, 23, 42, 0.07);
    --shadow-lg:      0 20px 40px -12px rgba(15, 23, 42, 0.25);

    /* Typography */
    --font-sans:      Inter, -apple-system, BlinkMacSystemFont, "Segoe UI",
                      Roboto, "Helvetica Neue", Arial, sans-serif;
    --font-mono:      ui-monospace, SFMono-Regular, "SF Mono", Menlo,
                      Consolas, "Liberation Mono", monospace;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--font-sans);
    background: var(--surface);
    color: var(--ink);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, picture, video, canvas, svg { display: block; max-width: 100%; }

/* Users who have asked their OS to reduce motion get no transitions or
   smooth scrolling. Vestibular disorders make sliding panels genuinely
   unpleasant, and this is a two-line fix. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* One visible focus ring for the whole app. :focus-visible means it appears
   for keyboard users and not on mouse click, so it costs nothing visually
   while making the app navigable without a mouse. */
:focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: 3px;
}

.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
    min-width: 0;
}
@media (min-width: 640px)  { .container { padding: 0 1.5rem; } }
@media (min-width: 1024px) { .container { padding: 0 2rem;   } }

.text-center { text-align: center; }
.text-white  { color: #ffffff; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ==========================================================================
   3. App navigation  (moved out of the inline <style> in header.php)
   ========================================================================== */

.nav {
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 200;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 4rem;
    gap: 1rem;
}
@media (min-width: 768px) { .nav-container { height: 4.5rem; } }

.nav-logo { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo img { height: 2rem; width: auto; display: block; }
@media (min-width: 768px) { .nav-logo img { height: 2.35rem; } }

.nav-menu { display: none; align-items: center; gap: 0.125rem; min-width: 0; }
@media (min-width: 900px) { .nav-menu { display: flex; } }

.nav-item {
    color: var(--text-muted);
    font-weight: 500;
    font-size: 0.9rem;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius);
    transition: color 0.15s, background 0.15s;
    white-space: nowrap;
}
.nav-item:hover,
.nav-item.active,
.nav-item[aria-current="page"] { color: var(--brand); background: var(--brand-tint); }

.nav-buttons { display: flex; align-items: center; gap: 0.5rem; flex-shrink: 0; }

.btn-signin {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--surface); color: var(--ink);
    font-weight: 600; font-size: 0.825rem;
    padding: 0.5rem 1rem; border-radius: var(--radius);
    border: 1px solid #D6DCE4; text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.btn-signin:hover { background: #F7F9FC; border-color: #AFBCCB; }

.btn-signin-dash {
    background: var(--brand-tint);
    border-color: var(--brand-line);
    color: var(--brand);
}
.btn-signin-logout { border-color: transparent; color: #B4232B; }
.nav-mobile .btn-signin-logout { border-color: #E8C4C6; }

.btn-signup {
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--brand); color: #ffffff;
    font-weight: 600; font-size: 0.825rem;
    padding: 0.5rem 1.05rem; border-radius: var(--radius);
    border: none; text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}
.btn-signup:hover { background: var(--brand-dark); color: #ffffff; }

.nav-hamburger {
    display: flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 2.25rem; height: 2.25rem;
    background: none; border: none; cursor: pointer;
    padding: 0.25rem; border-radius: var(--radius);
    transition: background 0.15s; flex-shrink: 0;
}
.nav-hamburger:hover { background: var(--surface-3); }
.nav-hamburger span {
    display: block; height: 2px; background: var(--ink);
    border-radius: 2px; transition: transform 0.25s, opacity 0.25s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px)  rotate(45deg);  }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 900px) { .nav-hamburger { display: none; } }

/* The drawer must be able to scroll inside itself.
   It holds eleven links when signed in — about 676px — and the toggle sets
   body{overflow:hidden} while it is open. On a 360x640 Android phone that put
   "Settings" and "Logout" below the fold with no way to reach them: the menu
   was open, the items were there, and they were simply unscrollable-to.
   100dvh, where supported, is the height once the browser's own toolbars are
   taken off, which is the number that actually matters on a phone. */
.nav-mobile {
    display: none; flex-direction: column; gap: 0.25rem;
    padding: 1rem; border-top: 1px solid var(--surface-3); background: var(--surface);

    max-height: calc(100vh - 4rem);
    max-height: calc(100dvh - 4rem);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;   /* keep the page behind still */
}
.nav-mobile.open { display: flex; }
@media (min-width: 768px) {
    /* the bar grows to 4.5rem here, so the drawer's ceiling follows it */
    .nav-mobile { max-height: calc(100vh - 4.5rem); max-height: calc(100dvh - 4.5rem); }
}
@media (min-width: 900px) { .nav-mobile { display: none !important; } }

.nav-mobile .nav-item { font-size: 1rem; padding: 0.75rem 1rem; border-radius: 0.625rem; }
.nav-mobile-divider { border: 0; border-top: 1px solid var(--surface-3); margin: 0.5rem 0; }
.nav-mobile .btn-signup,
.nav-mobile .btn-signin {
    width: 100%; justify-content: center;
    padding: 0.75rem; font-size: 0.95rem; border-radius: 0.625rem;
}

/* On a 390px phone the logo + two buttons + hamburger together are wider
   than the viewport, which pushed the whole page sideways. The secondary
   button is dropped here and lives in the drawer instead; the primary call
   to action stays visible. */
@media (max-width: 479px) {
    .nav-container > .nav-buttons > .btn-signin { display: none; }
    .nav-logo img { height: 1.65rem; }
}

/* ==========================================================================
   4. App shell + shared components
   ========================================================================== */

.mc-page {
    padding: 2rem 0;
    min-height: calc(100vh - 70px);
    background: var(--surface-2);
}

.mc-container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 1rem;
}
@media (min-width: 640px) { .mc-container { padding: 0 1.5rem; } }

/* --- Page heading row --- */
.mc-page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}
.mc-page-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--ink);
    margin: 0;
    letter-spacing: -0.01em;
}
.mc-page-sub {
    font-size: 0.875rem;
    color: var(--text-muted);
    margin: 0.25rem 0 0;
}

/* --- Card --- */
.mc-card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    margin-bottom: 1.5rem;
    overflow: hidden;
}
.mc-card-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1.25rem 1.5rem; border-bottom: 1px solid var(--border);
}
.mc-card-title { font-size: 1.125rem; font-weight: 600; color: var(--ink); margin: 0; }
.mc-card-body  { padding: 1.5rem; }

/* --- Buttons --- */
.mc-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.6rem 1.2rem; border-radius: var(--radius-sm);
    font-weight: 600; font-size: 0.9rem; font-family: inherit;
    cursor: pointer; text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    border: none; gap: 0.4rem; white-space: nowrap;
}
.mc-btn-sm { padding: 0.4rem 0.8rem; font-size: 0.8rem; }

.mc-btn-primary { background: var(--brand); color: #fff; }
.mc-btn-primary:hover { background: var(--brand-dark); }
.mc-btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }

.mc-btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border-strong); }
.mc-btn-secondary:hover { background: var(--surface-2); border-color: var(--text-faint); }

.mc-btn-success { background: var(--success); color: #fff; }
.mc-btn-success:hover { background: var(--success-dark); }

/* Ghost button — used all over leads.php and ai-knowledge-base.php and,
   until now, defined nowhere. Buttons do not inherit font by default, so
   font-family/size are spelled out. */
.mc-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 0.375rem;
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    padding: 0.45rem 0.8rem;
    font-family: inherit; font-size: 0.8125rem; font-weight: 600;
    line-height: 1.2; text-decoration: none; cursor: pointer;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.mc-btn-ghost:hover { background: var(--surface-3); border-color: var(--text-faint); }
.mc-btn-ghost:disabled { opacity: 0.55; cursor: not-allowed; }
.mc-btn-ghost svg { width: 1rem; height: 1rem; flex-shrink: 0; }

/* --- Form controls --- */
.mc-label { display: block; font-size: 0.85rem; font-weight: 600; color: #374151; margin-bottom: 0.5rem; }

.mc-input {
    width: 100%; padding: 0.6rem 0.75rem;
    border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
    font-size: 0.95rem; font-family: inherit; color: var(--ink);
    background: var(--surface);
    outline: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.mc-input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 52, 108, 0.12); }
.mc-input::placeholder { color: var(--text-faint); }

/* The compact variant. crm.php, the form builder and the submissions toolbar
   all put a control inline with a button in a page header, where the full
   0.6rem padding makes the row too tall. The class was already being written
   in the markup and matched nothing, which is the worst of both worlds: it
   reads as deliberate and does nothing. */
.mc-input-sm,
.mc-select.mc-input-sm { padding: 0.4rem 0.6rem; font-size: 0.875rem; }
.mc-select.mc-input-sm { padding-right: 1.85rem; background-position: right 0.5rem center; }
textarea.mc-input-sm { padding: 0.45rem 0.6rem; }

/* Select — leads.php's widget filter. The chevron is an inline data: URI so
   it costs no extra request and inherits nothing from the theme. */
.mc-select {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.75rem;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    font-size: 0.875rem; font-family: inherit; font-weight: 500;
    color: var(--ink); background-color: var(--surface);
    cursor: pointer; outline: none;
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.6rem center;
    transition: border-color 0.2s, box-shadow 0.2s;
}
.mc-select:focus { border-color: var(--brand); box-shadow: 0 0 0 3px rgba(0, 52, 108, 0.12); }

.mc-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }
.mc-hint a { color: var(--brand); text-decoration: none; font-weight: 500; }
.mc-font-mono { font-family: var(--font-mono); letter-spacing: 0.3px; }

.form-row { display: flex; gap: 1rem; flex-wrap: wrap; }
.form-col { flex: 1; min-width: 200px; }
.input-group { display: flex; gap: 0.5rem; }
.input-group .mc-input { flex: 1; }

/* --- Table --- */
/* The wrapper is what makes a wide table scroll inside the card instead of
   pushing the whole page sideways on a phone. */
.mc-table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }

.mc-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.mc-table th {
    text-align: left;
    padding: 0.75rem 1rem;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.mc-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}
.mc-table tbody tr:last-child td { border-bottom: none; }
.mc-table tbody tr { transition: background 0.12s; }
.mc-table tbody tr:hover { background: var(--surface-2); }

.mc-lead-avatar {
    width: 34px; height: 34px; border-radius: 50%;
    background: var(--brand-tint); color: var(--brand);
    display: flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 0.8125rem;
    flex-shrink: 0;
}

/* --- Empty state --- */
.mc-empty { text-align: center; padding: 3.5rem 1.5rem; }
.mc-empty-icon  { font-size: 2.5rem; line-height: 1; margin-bottom: 0.75rem; }
.mc-empty-title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-bottom: 0.375rem; }
.mc-empty-sub   { font-size: 0.875rem; color: var(--text-muted); max-width: 26rem; margin: 0 auto; line-height: 1.6; }

/* --- Tabs --- */
.mc-tabs {
    display: flex; gap: 0.5rem;
    border-bottom: 2px solid var(--border);
    margin-bottom: 1.5rem;
    overflow-x: auto;
}
.mc-tab {
    padding: 0.625rem 1rem;
    background: none; border: none;
    font-family: inherit; font-weight: 600; font-size: 0.95rem;
    color: var(--text-muted); cursor: pointer;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    white-space: nowrap;
    transition: color 0.2s, border-color 0.2s;
}
.mc-tab:hover { color: var(--ink); }

/* Both spellings, on purpose. This file has always used .active; dashboard.css
   uses .is-active for .setup-item, and the form builder follows that. A tab
   strip whose panels are all display:none because the class was the other
   spelling is a blank screen with nothing in the console to explain it, so
   both are accepted rather than picking a winner and hunting every call site. */
.mc-tab.active,
.mc-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }

.mc-tab-panel { display: none; }
.mc-tab-panel.active,
.mc-tab-panel.is-active { display: block; }

/* --- Alerts --- */
.mc-alert {
    padding: 0.75rem 1rem; border-radius: var(--radius-sm);
    font-size: 0.875rem; font-weight: 500; margin-bottom: 1rem;
    display: flex; align-items: center; gap: 0.5rem;
}
.mc-alert-ok    { background: var(--success-tint); color: #065F46; border: 1px solid #A7F3D0; }
.mc-alert-error { background: var(--danger-tint);  color: #991B1B; border: 1px solid #FECACA; }
.mc-alert-info  { background: var(--brand-tint);   color: var(--brand-darker); border: 1px solid var(--brand-line); }
.mc-alert-warn  { background: var(--warning-tint); color: #92400E; border: 1px solid #FDE68A; }

/* --- Badges --- */
.mc-badge {
    display: inline-flex; align-items: center;
    padding: 0.2rem 0.6rem; border-radius: var(--radius-full);
    font-size: 0.75rem; font-weight: 600;
}
.mc-badge-green { background: var(--success-tint); color: var(--success-dark); }
.mc-badge-gray  { background: #F3F4F6;             color: #4B5563; }
.mc-badge-red   { background: var(--danger-tint);  color: var(--danger-dark); }
.badge-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* --- Modal --- */
.mc-modal {
    display: none;
    position: fixed; inset: 0; z-index: 9999;
    background: rgba(15, 23, 42, 0.55);
    align-items: center; justify-content: center;
    padding: 1rem;
}
.mc-modal.open { display: flex; }
.mc-modal-box {
    background: var(--surface);
    border-radius: var(--radius-lg);
    width: 100%; max-width: 560px; max-height: 80vh;
    display: flex; flex-direction: column;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}
.mc-modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1rem 1.25rem; border-bottom: 1px solid var(--border);
    font-weight: 700;
}

/* --- Pagination --- */
.mc-pager {
    display: flex; justify-content: center; align-items: center;
    gap: 0.375rem; flex-wrap: wrap;
    padding: 1rem; border-top: 1px solid var(--border);
}
.mc-pager-gap { color: var(--text-faint); padding: 0 0.25rem; font-size: 0.8125rem; }
.mc-pager .mc-btn-ghost { min-width: 2.25rem; }
.mc-pager .is-current {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.mc-pager .is-current:hover { background: var(--brand); border-color: var(--brand); }

/* --- Toast (replaces alert() for copy/save confirmations) --- */
.mc-toast {
    position: fixed;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%) translateY(1rem);
    z-index: 10000;
    background: var(--ink);
    color: #fff;
    padding: 0.7rem 1.1rem;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    max-width: calc(100vw - 2rem);
    text-align: center;
}
.mc-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.mc-toast.is-error { background: var(--danger-dark); }

/* ==========================================================================
   5. FAQ accordion
   ========================================================================== */

.faq-grid {
    display: flex; flex-direction: column; gap: 1rem;
    max-width: 48rem; margin-left: auto; margin-right: auto;
}

.faq-item {
    background: var(--surface);
    border-radius: 1rem;
    border: 1px solid #E5E7EB;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.faq-item:hover { box-shadow: var(--shadow-md); }

.faq-question {
    width: 100%; text-align: left;
    background: none; border: none;
    padding: 1.25rem 1.5rem;
    font-family: inherit; font-size: 1rem; font-weight: 700;
    color: #111827; cursor: pointer;
    display: flex; justify-content: space-between; align-items: center;
    gap: 1rem; line-height: 1.4;
}
.faq-question:hover { background: #F9FAFB; }

.faq-icon { flex-shrink: 0; transition: transform 0.2s; color: #6B7280; }
.faq-icon.open { transform: rotate(180deg); }

.faq-answer {
    display: none;
    padding: 0 1.5rem 1.25rem;
    font-size: 0.95rem; color: #4B5563; line-height: 1.7;
}
.faq-answer.show { display: block; }

/* ==========================================================================
   6. Footer
   ========================================================================== */

.site-footer { background: #111827; color: #9CA3AF; padding: 3rem 0 1.5rem; }

/* The logo is a blue mark with near-black wordmark on a transparent
   background, and this footer is near-black. It used to be forced white with
   filter:brightness(0) invert(1), which flattened the whole thing — the blue
   bubble, the .com badge and the cursor all became one white blob.
   Standing it on a light chip keeps the real artwork and the real colours,
   and reads as deliberate rather than as a logo that failed to load. */
.footer-logo {
    display: inline-block;
    background: #fff;
    padding: .45rem .65rem;
    border-radius: .55rem;
    margin-bottom: 1rem;
    line-height: 0;              /* no descender gap under the image */
}
.footer-logo img { height: 2rem; width: auto; display: block; }

.footer-grid { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 2rem; }
@media (min-width: 640px)  { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer-grid { grid-template-columns: 2fr 1fr 1fr; } }

.footer-col-brand { max-width: 24rem; }

.footer-logo {
    font-size: 1.5rem; font-weight: 700; color: #fff;
    text-decoration: none; display: inline-block; margin-bottom: 1rem;
}
.footer-logo:hover { color: #E5E7EB; }

.footer-tagline { color: #D1D5DB; margin-bottom: 0.5rem; line-height: 1.6; font-size: 0.95rem; }

.footer-title { font-size: 1.125rem; font-weight: 600; color: #fff; margin-bottom: 1rem; }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 0.5rem; }

.footer-link {
    color: #9CA3AF; text-decoration: none; font-size: 0.95rem;
    transition: color 0.2s;
}
.footer-link:hover { color: #fff; }

.footer-bottom { text-align: center; padding-top: 2rem; border-top: 1px solid #1F2937; }
.footer-copyright { font-size: 0.875rem; color: #6B7280; }
.footer-copyright a { color: #9CA3AF; text-decoration: none; font-weight: 600; }
.footer-copyright a:hover { color: #fff; }