/* TestSeriesPoint — footer.css */
/* ── Shared font import (skip if already loaded by navbar) ── */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Inter:wght@400;500;600&display=swap');

/* ── Footer design tokens — mirror navbar gradient palette ── */
.tsp-footer {
    /* ── Gradient colours (same ramp as navbar topbar) ── */
    --ft-indigo:    #4f46e5;   /* navbar active / primary          */
    --ft-violet:    #7c3aed;   /* navbar dropdown / admin          */
    --ft-green:     #059669;   /* navbar highlight / reg btn       */
    --ft-amber:     #f59e0b;   /* logo dot / accent                */
    --ft-sky:       #38bdf8;   /* third accent stop                */

    /* ── Dark background ramp ── */
    --ft-nv:        #080e1c;   /* deepest bg                       */
    --ft-nv2:       #0d1528;   /* card surfaces                    */
    --ft-nv3:       #141f3a;   /* hover surfaces                   */
    --ft-nv4:       #1b2a4e;   /* border highlights                */

    /* ── Text ── */
    --ft-white:     #ffffff;
    --ft-bright:    rgba(255,255,255,.87);
    --ft-muted:     rgba(255,255,255,.52);
    --ft-hint:      rgba(255,255,255,.28);

    /* ── Rule / divider ── */
    --ft-rule:      rgba(255,255,255,.07);

    /* ── Badge colours ── */
    --ft-badge-hot:  #f4600c;
    --ft-badge-free: #38bdf8;
    --ft-badge-new:  #22c55e;

    /* ── Easing ── */
    --ft-ease:      cubic-bezier(.4,0,.2,1);
    --ft-spring:    cubic-bezier(.34,1.56,.64,1);
    --ft-dur:       .22s;

    /* ── Typography ── */
    --ft-ff:        'Inter', sans-serif;
    --ft-ffh:       'Outfit', sans-serif;

    font-family: var(--ft-ff);
    background:  var(--ft-nv);
    color:       var(--ft-muted);
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow: hidden;
}

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

/* ── Background orbs — mirrors navbar topbar radial glows ── */
.ft-orb { position: absolute; border-radius: 50%; pointer-events: none; }
.ft-orb-1 {
    width: 560px; height: 560px;
    background: radial-gradient(circle, rgba(79,70,229,.09) 0%, transparent 70%);
    top: -200px; right: -100px;
}
.ft-orb-2 {
    width: 380px; height: 380px;
    background: radial-gradient(circle, rgba(16,185,129,.07) 0%, transparent 70%);
    bottom: 80px; left: -80px;
}
.ft-orb-3 {
    width: 300px; height: 300px;
    background: radial-gradient(circle, rgba(124,58,237,.06) 0%, transparent 70%);
    top: 38%; left: 38%;
}

/* ════════════════════════════════════
   TOP ACCENT BAR
   Exact match of navbar::before gradient + animation
════════════════════════════════════ */
.ft-accent-bar {
    height: 2.5px;
    background: linear-gradient(
        90deg,
        var(--ft-indigo)  0%,
        #8b5cf6           22%,
        var(--ft-green)   50%,
        var(--ft-amber)   78%,
        var(--ft-indigo)  100%
    );
    background-size: 200% 100%;
    animation: ft-accent-move 5s linear infinite;
}
@keyframes ft-accent-move { to { background-position: 200% 0; } }

/* ════════════════════════════════════
   MAIN GRID SECTION
════════════════════════════════════ */
.ft-main {
    max-width: 1360px;
    margin: 0 auto;
    padding: 52px 24px 0;
    position: relative;
    z-index: 1;
}
.ft-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 36px;
    padding-bottom: 44px;
    border-bottom: 1px solid var(--ft-rule);
}

/* ════════════════════════════════════
   BRAND COLUMN
════════════════════════════════════ */
.ft-logo-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    margin-bottom: 18px;
}
.ft-logo-mark {
    width: 48px; height: 48px;
    border-radius: 13px; flex-shrink: 0;
    /* gradient mirrors navbar logo-mark: indigo → green */
    background: linear-gradient(135deg, var(--ft-indigo) 0%, var(--ft-green) 100%);
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 6px 22px rgba(79,70,229,.35);
    transition: transform var(--ft-dur) var(--ft-spring),
                box-shadow var(--ft-dur) var(--ft-ease);
}
.ft-logo-link:hover .ft-logo-mark {
    transform: rotate(-6deg) scale(1.07);
    box-shadow: 0 12px 30px rgba(79,70,229,.45);
}
.ft-logo-mark i { font-size: 21px; color: #fff; }

.ft-brand-name strong {
    display: block;
    font-family: var(--ft-ffh);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--ft-white);
    letter-spacing: -.02em;
    line-height: 1.1;
}
.ft-brand-name strong em {
    font-style: normal;
    /* amber accent — same as navbar logo "Point" */
    color: var(--ft-amber);
}
.ft-brand-name small {
    font-size: 10px;
    color: var(--ft-muted);
    letter-spacing: .08em;
    text-transform: uppercase;
}

.ft-desc {
    font-size: 13px;
    line-height: 1.78;
    color: var(--ft-muted);
    margin-bottom: 20px;
    max-width: 298px;
}

/* contact block */
.ft-contact {
    font-size: 12.5px;
    line-height: 1.9;
    color: var(--ft-muted);
    margin-bottom: 20px;
}
.ft-contact a,
.ft-contact span {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--ft-muted);
    text-decoration: none;
    transition: color var(--ft-dur);
}
.ft-contact a:hover { color: #a5b4fc; }   /* indigo-200 */
.ft-contact i { font-size: 12px; color: var(--ft-indigo); flex-shrink: 0; }

/* trust badges — pill system matching navbar "hl-item" palette */
.ft-trust-row {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 20px;
}
.ft-trust-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10.5px; font-weight: 600;
    border-radius: 20px; padding: 4px 11px; letter-spacing: .03em;
}
.ft-trust-pill i { font-size: 10px; }
.ftp-green  { background: rgba( 5,150,105,.14); color: #6ee7b7; border: 1px solid rgba( 5,150,105,.25); }
.ftp-sky    { background: rgba(56,189,248,.12); color: #7dd3fc; border: 1px solid rgba(56,189,248,.22); }
.ftp-amber  { background: rgba(245,158, 11,.12); color: #fcd34d; border: 1px solid rgba(245,158,11,.22); }
.ftp-violet { background: rgba(124, 58,237,.13); color: #c4b5fd; border: 1px solid rgba(124,58,237,.25); }

/* social row — mirrors topbar auth btn hover style */
.ft-social { display: flex; gap: 8px; }
.ft-soc-btn {
    width: 36px; height: 36px; border-radius: 9px;
    border: 1px solid var(--ft-rule);
    background: rgba(255,255,255,.04);
    display: flex; align-items: center; justify-content: center;
    color: var(--ft-muted); font-size: 14px; text-decoration: none;
    transition: background var(--ft-dur), color var(--ft-dur),
                border-color var(--ft-dur), transform var(--ft-dur) var(--ft-spring);
}
.ft-soc-btn:hover { transform: translateY(-3px); }
.ft-soc-btn.fb:hover { background: #1877f2; color: #fff; border-color: #1877f2; }
.ft-soc-btn.yt:hover { background: #ff0000; color: #fff; border-color: #ff0000; }
.ft-soc-btn.ig:hover { background: linear-gradient(135deg,#e1306c,#833ab4); color: #fff; border-color: #e1306c; }
.ft-soc-btn.tw:hover { background: #000; color: #fff; border-color: #333; }
.ft-soc-btn.li:hover { background: #0077b5; color: #fff; border-color: #0077b5; }
.ft-soc-btn.tg:hover { background: #0088cc; color: #fff; border-color: #0088cc; }

/* ════════════════════════════════════
   LINK COLUMNS
════════════════════════════════════ */
.ft-col-title {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--ft-white);
    margin-bottom: 18px;
    display: flex;
    align-items: center;
    gap: 9px;
}
/* accent line matches navbar col-title::before with gradient */
.ft-col-title::before {
    content: '';
    width: 20px; height: 2.5px; flex-shrink: 0;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--ft-indigo), var(--ft-amber));
}

.ft-nav-list { list-style: none; display: flex; flex-direction: column; gap: 1px; }
.ft-nav-list li a {
    display: flex; align-items: center; gap: 10px;
    font-size: 13px; color: var(--ft-muted);
    padding: 5px 0; text-decoration: none;
    transition: color var(--ft-dur), gap var(--ft-dur) var(--ft-ease);
}
.ft-nav-list li a:hover { color: var(--ft-bright); gap: 14px; }

/* nav icon — same style as navbar .n-ico */
.ft-nav-list li a .ni {
    width: 22px; height: 22px; border-radius: 6px;
    background: rgba(255,255,255,.06);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; font-size: 11px; color: var(--ft-muted);
    transition: background var(--ft-dur), color var(--ft-dur);
}
.ft-nav-list li a:hover .ni {
    /* gradient mirrors navbar hover icon: indigo → violet */
    background: linear-gradient(135deg, rgba(79,70,229,.35), rgba(124,58,237,.35));
    color: #c4b5fd;
}

/* inline badges */
.ft-badge {
    font-size: 8.5px; font-weight: 700; letter-spacing: .06em;
    border-radius: 3px; padding: 1px 6px;
    margin-left: auto; flex-shrink: 0;
}
.ft-badge.hot  { background: var(--ft-badge-hot);  color: #fff; }
.ft-badge.free { background: var(--ft-badge-free); color: #0c4a6e; }
.ft-badge.new  { background: var(--ft-badge-new);  color: #052e16; }
.ft-badge.pop  { background: rgba(124,58,237,.8);  color: #ede9fe; }

/* ════════════════════════════════════
   POPULAR SEARCHES STRIP
════════════════════════════════════ */
.ft-strip-outer {
    position: relative;
    z-index: 1;
}
.ft-strip {
    max-width: 1360px;
    margin: 0 auto;
    padding: 26px 24px;
    border-bottom: 1px solid var(--ft-rule);
}
.ft-strip-label {
    font-size: 10px; font-weight: 700; letter-spacing: .16em;
    text-transform: uppercase; color: var(--ft-indigo);
    display: flex; align-items: center; gap: 9px;
    margin-bottom: 13px;
}
/* fade line after label matches topbar gradient line */
.ft-strip-label::after {
    content: '';
    flex: 1; height: 1px;
    background: linear-gradient(90deg, rgba(79,70,229,.35), transparent);
}
.ft-strip-label i { font-size: 9px; }

.ft-tags { display: flex; flex-wrap: wrap; gap: 7px; }
.ft-tag {
    font-size: 11.5px; font-weight: 500;
    color: var(--ft-muted);
    background: rgba(255,255,255,.04);
    border: 1px solid var(--ft-rule);
    border-radius: 20px; padding: 5px 14px;
    text-decoration: none;
    transition: background var(--ft-dur), color var(--ft-dur), border-color var(--ft-dur);
}
.ft-tag:hover {
    /* hover: indigo tint — mirrors topbar link hover */
    background: rgba(79,70,229,.15);
    color: #a5b4fc;
    border-color: rgba(79,70,229,.35);
}

/* ════════════════════════════════════
   SEO PARAGRAPH BLOCK
════════════════════════════════════ */
.ft-seo-outer { position: relative; z-index: 1; }
.ft-seo {
    max-width: 1360px;
    margin: 0 auto;
    padding: 20px 24px;
    border-bottom: 1px solid var(--ft-rule);
}
.ft-seo p {
    font-size: 12px;
    line-height: 1.82;
    color: rgba(255,255,255,.3);
}
.ft-seo p a {
    color: rgba(255,255,255,.42);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color var(--ft-dur);
}
.ft-seo p a:hover { color: #a5b4fc; }

/* ════════════════════════════════════
   COPYRIGHT BAR
════════════════════════════════════ */
.ft-copy-outer {
    background: rgba(0,0,0,.38);
    position: relative;
    z-index: 1;
}
.ft-copy {
    max-width: 1360px;
    margin: 0 auto;
    padding: 15px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
}
.ft-copy-txt {
    font-size: 12.5px;
    color: rgba(255,255,255,.32);
}
.ft-copy-txt a { color: var(--ft-indigo); text-decoration: none; font-weight: 600; }
.ft-copy-txt a:hover { text-decoration: underline; }
.ft-copy-links { display: flex; gap: 18px; flex-wrap: wrap; }
.ft-copy-links a {
    font-size: 11.5px; color: rgba(255,255,255,.28);
    text-decoration: none; transition: color var(--ft-dur);
}
.ft-copy-links a:hover { color: var(--ft-muted); }

/* ════════════════════════════════════
   RESPONSIVE
════════════════════════════════════ */
@media (max-width: 1020px) {
    .ft-grid { grid-template-columns: 1fr 1fr; }
    .ft-brand-col { grid-column: 1 / -1; }
    .ft-desc { max-width: 100%; }
}
@media (max-width: 580px) {
    .ft-grid { grid-template-columns: 1fr; }
    .ft-main { padding: 36px 16px 0; }
    .ft-strip,
    .ft-seo,
    .ft-copy { padding-left: 16px; padding-right: 16px; }
    .ft-copy { flex-direction: column; align-items: flex-start; }
}