/* ==========================================================================
   SITE FOOTER: CTA card, brand + link columns, contact cards, bottom bar.
   Content comes from Admin → Footer; reveal is triggered by initFooter in main.js.
   ========================================================================== */
.ft {
    --ft-ease: cubic-bezier(.22, 1, .36, 1);
    --ft-line: rgba(255, 255, 255, .09);
    --ft-text: #A3ABBA;
    position: relative; overflow: hidden; isolation: isolate;
    padding-top: 5rem; color: var(--ft-text); background: #0A0D14;
}
.ft::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; z-index: 2;
    background: linear-gradient(90deg, transparent, rgba(79, 207, 255, .55), rgba(155, 199, 59, .45), transparent);
}

/* Background: two slow glows and a faint grid that fades out */
.ft-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.ft-glow { position: absolute; border-radius: 50%; filter: blur(110px); opacity: .5; }
.ft-glow-a { width: 520px; height: 520px; top: -260px; left: -140px; background: rgba(30, 143, 208, .45); animation: ftDrift 24s ease-in-out infinite alternate; }
.ft-glow-b { width: 440px; height: 440px; bottom: -240px; right: -120px; background: rgba(155, 199, 59, .22); animation: ftDrift 30s ease-in-out infinite alternate-reverse; }
@keyframes ftDrift { to { transform: translate3d(160px, 80px, 0) scale(1.12); } }
.ft-grid {
    position: absolute; inset: 0;
    background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .035) 1px, transparent 1px);
    background-size: 56px 56px;
    -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%);
    mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, #000, transparent 75%);
}

/* Staggered entrance */
.ft-reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ft-ease), transform .8s var(--ft-ease); transition-delay: calc(var(--i, 0) * 80ms); }
.ft.is-visible .ft-reveal { opacity: 1; transform: none; }

/* ---------- CTA card ---------- */
.ft-cta {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: 1.4fr auto; align-items: center; gap: 2rem;
    padding: 2.8rem 3rem; margin-bottom: 4.5rem; border-radius: 28px;
    background: linear-gradient(140deg, #111C30 0%, #0C1424 60%, #0A111E 100%);
    border: 1px solid rgba(79, 207, 255, .16);
    box-shadow: 0 40px 90px -60px rgba(30, 143, 208, .9), inset 0 1px 0 rgba(255, 255, 255, .06);
}
/* Soft brand glows and a fine grid inside the card */
.ft-cta::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background:
        radial-gradient(520px circle at 92% 0%, rgba(30, 143, 208, .32), transparent 60%),
        radial-gradient(420px circle at 0% 120%, rgba(155, 199, 59, .16), transparent 60%),
        linear-gradient(rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 40px 40px,
        linear-gradient(90deg, rgba(255, 255, 255, .03) 1px, transparent 1px) 0 0 / 40px 40px;
}
.ft-cta-ring { position: absolute; right: -90px; top: -90px; width: 300px; height: 300px; z-index: -1; border-radius: 50%; border: 1px solid rgba(79, 207, 255, .14); box-shadow: 0 0 0 40px rgba(79, 207, 255, .03), 0 0 0 80px rgba(79, 207, 255, .02); animation: ftPulse 6s ease-in-out infinite; }
@keyframes ftPulse { 50% { transform: scale(1.08); opacity: .7; } }
.ft-eyebrow { display: inline-flex; align-items: center; gap: .5rem; padding: .35rem .8rem; margin-bottom: 1rem; border-radius: 999px; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #BFE9FF; background: rgba(30, 143, 208, .12); border: 1px solid rgba(79, 207, 255, .25); }
.ft-dot { width: 7px; height: 7px; border-radius: 50%; background: #9BE15D; box-shadow: 0 0 0 0 rgba(155, 225, 93, .7); animation: ftPing 2s infinite; }
@keyframes ftPing { 70% { box-shadow: 0 0 0 8px rgba(155, 225, 93, 0); } 100% { box-shadow: 0 0 0 0 rgba(155, 225, 93, 0); } }
.ft-cta h2 { margin: 0; font-family: var(--font-heading); font-size: clamp(1.6rem, 2.6vw, 2.3rem); line-height: 1.22; color: #fff; letter-spacing: -.01em; }
.ft-cta h2 span { display: inline-block; padding-bottom: .12em; background: linear-gradient(90deg, #4FCFFF, #8FD7FF 45%, #B5E27A); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ft-cta p { margin: .6rem 0 0; max-width: 560px; font-size: .98rem; line-height: 1.6; color: #C3CAD6; }
.ft-cta-actions { display: flex; flex-direction: column; gap: .7rem; min-width: 240px; }

.ft-btn { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1.3rem; border-radius: 14px; font-weight: 700; font-size: .95rem; text-decoration: none; transition: transform .35s var(--ft-ease), box-shadow .35s, background .3s; }
.ft-btn-light { justify-content: space-between; color: #0F2F5C; background: #fff; box-shadow: 0 16px 30px -18px rgba(0, 0, 0, .6); }
.ft-btn-light:hover { color: #0F2F5C; transform: translateY(-2px); box-shadow: 0 22px 36px -18px rgba(0, 0, 0, .7); }
.ft-btn-arrow { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; font-size: .78rem; color: #fff; background: linear-gradient(135deg, #1E8FD0, #16508E); transition: transform .35s var(--ft-ease); }
.ft-btn-light:hover .ft-btn-arrow { transform: translateX(3px) rotate(-45deg); }
.ft-btn-glass { color: #fff; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .14); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.ft-btn-glass:hover { color: #fff; background: rgba(255, 255, 255, .1); border-color: rgba(79, 207, 255, .4); transform: translateY(-2px); }

/* ---------- Main grid ---------- */
.ft-main { display: grid; grid-template-columns: 1.5fr repeat(3, minmax(0, .8fr)) 1.3fr; gap: 2.5rem; padding-bottom: 3.5rem; }
.ft-logo { display: inline-block; margin-bottom: 1.2rem; }
.ft-logo img { height: 52px; width: auto; }
.ft-tagline { margin: 0 0 .6rem; font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; color: #fff; }
.ft .ft-desc { margin: 0 0 1.3rem; font-size: .9rem; line-height: 1.7; color: #B4BCCB; }

.ft-hours { display: inline-flex; align-items: center; gap: .75rem; padding: .65rem .9rem; margin-bottom: 1.3rem; border-radius: 14px; background: rgba(255, 255, 255, .04); border: 1px solid var(--ft-line); }
.ft-hours strong { display: block; font-size: .85rem; color: #fff; }
.ft-hours small { font-size: .78rem; }
.ft-hours-dot { width: 10px; height: 10px; flex-shrink: 0; border-radius: 50%; background: #64748B; }
.ft-hours-dot.is-open { background: #4ADE80; animation: ftPingGreen 2s infinite; }
.ft-hours-dot.is-closed { background: #8FD7FF; }
@keyframes ftPingGreen { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); } 70%, 100% { box-shadow: 0 0 0 8px rgba(74, 222, 128, 0); } }

.ft-social { display: flex; flex-wrap: wrap; gap: .5rem; }
/* Social icons always show their brand colour; hover lifts them with a glow in the same colour */
.ft-social a { position: relative; width: 40px; height: 40px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--soc); border: 1px solid transparent; transition: transform .35s var(--ft-ease), box-shadow .35s, filter .3s; }
.ft-social a:hover { color: #fff; transform: translateY(-3px); filter: brightness(1.1); box-shadow: 0 12px 24px -10px var(--soc); }
.ft-social a.is-instagram { background: radial-gradient(circle at 30% 107%, #FDF497 0%, #FD5949 45%, #D6249F 60%, #285AEB 90%); }
/* Black brand colours (X, Threads, GitHub, Medium) need an outline on the dark footer */
.ft-social a.is-x, .ft-social a.is-threads, .ft-social a.is-github, .ft-social a.is-medium { border-color: rgba(255, 255, 255, .22); }
.ft-social a.is-x:hover, .ft-social a.is-threads:hover, .ft-social a.is-github:hover, .ft-social a.is-medium:hover { box-shadow: 0 12px 24px -10px rgba(255, 255, 255, .35); }
.ft-social a::after { content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translate(-50%, 4px); padding: .25rem .55rem; border-radius: 7px; font-size: .72rem; white-space: nowrap; color: #0A0D14; background: #fff; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.ft-social a:hover::after { opacity: 1; transform: translate(-50%, 0); }

.ft h4 { margin: 0 0 1.2rem; font-family: var(--font-heading); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; }
.ft-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .7rem; }
.ft-col a {
    font-size: .9rem; color: var(--ft-text); text-decoration: none;
    background: linear-gradient(90deg, #4FCFFF, #9BC73B) left bottom / 0 1px no-repeat;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
    padding-bottom: 2px; transition: color .25s, background-size .4s var(--ft-ease);
}
.ft-col a:hover { color: #fff; background-size: 100% 1px; }
.ft-col .ft-more { color: #8FD7FF; font-weight: 600; }
.ft-col .ft-more i { font-size: .7rem; margin-left: .2rem; }

.ft-contact { display: flex; flex-direction: column; gap: .6rem; }
.ft-card { display: flex; align-items: flex-start; gap: .8rem; padding: .75rem .85rem; border-radius: 14px; font-size: .88rem; line-height: 1.45; color: #E2E6EE; text-decoration: none; background: rgba(255, 255, 255, .035); border: 1px solid var(--ft-line); transition: background .3s, border-color .3s, transform .35s var(--ft-ease); word-break: break-word; }
.ft-card:hover { color: #fff; background: rgba(255, 255, 255, .07); border-color: rgba(79, 207, 255, .3); transform: translateY(-2px); }
.ft-card small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ft-text); }
.ft-card-ic { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-size: .82rem; color: #fff; background: linear-gradient(135deg, #1E8FD0, #16508E); }
.ft-card-ic.is-green { background: linear-gradient(135deg, #9BC73B, #5C8A1E); }
.ft-card-ic.is-orange { background: linear-gradient(135deg, #F2A541, #E57E27); }
.ft-certs { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.ft-certs span { display: inline-flex; align-items: center; gap: .35rem; padding: .3rem .65rem; border-radius: 999px; font-size: .74rem; font-weight: 600; color: #D5DAE3; background: rgba(255, 255, 255, .05); border: 1px solid var(--ft-line); }
.ft-certs i { color: #FDC943; }

/* ---------- Bottom bar ---------- */
.ft-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 96px 2rem; border-top: 1px solid var(--ft-line); font-size: .85rem; }
.ft .ft-bottom p { margin: 0; font-size: inherit; color: #A3ABBA; }
.ft-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 1.4rem; }
.ft-legal a { color: var(--ft-text); text-decoration: none; transition: color .25s; }
.ft-legal a:hover { color: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 1199px) {
    .ft-main { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ft-brand { grid-column: 1 / -1; max-width: 640px; }
    .ft-contact { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .ft-contact h4, .ft-certs { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
    .ft { padding-top: 3rem; }
    .ft-cta { grid-template-columns: 1fr; padding: 2rem 1.4rem; margin-bottom: 3rem; border-radius: 22px; }
    .ft-cta-actions { min-width: 0; }
    .ft-main { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 1.5rem; }
    /* Services (long names) gets the full width; Company and Resources share the next row, so no column sits alone */
    .ft-main > .ft-col:first-of-type { grid-column: 1 / -1; }
    .ft-contact { display: flex; }
    .ft-bottom { flex-direction: column; align-items: flex-start; padding: 1.5rem 0 6.5rem; }
    .ft-legal { gap: 1rem; }
}
@media (max-width: 420px) {
    .ft-brand, .ft-main > .ft-col:first-of-type, .ft-contact { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) {
    .ft-glow, .ft-cta-ring, .ft-dot, .ft-hours-dot.is-open { animation: none; }
    .ft-reveal { opacity: 1; transform: none; transition: none; }
}