/* DkTechnoLab — pre-footer CTA & footer (loaded after style.css). Header lives in header.css */
:root {
  --lay-shadow: 0 1px 2px rgba(60, 45, 10, .04), 0 8px 24px -8px rgba(60, 45, 10, .10);
  --lay-shadow-lg: 0 2px 6px rgba(60, 45, 10, .04), 0 24px 60px -18px rgba(60, 45, 10, .22);
  --lay-ease: cubic-bezier(.22, .8, .26, 1);
  --lay-line: #EFE7D3;
}

/* Brand lockup (footer) */
.brand img { width: 44px; height: 44px; object-fit: contain; }
.brand-text { font-family: var(--dk-font-head); font-weight: 800; font-size: 1.3rem; color: var(--dk-ink); line-height: 1; letter-spacing: -.01em; }
.brand-text span { color: var(--dk-cyan-600); }
.brand-text small { display: block; font-size: .6rem; font-weight: 600; letter-spacing: .22em; color: var(--dk-muted); text-transform: uppercase; margin-top: 4px; }

.btn-wa { background: #25d366; color: #fff; border: 0; box-shadow: 0 10px 24px -12px rgba(37, 211, 102, .8); }
.btn-wa:hover, .btn-wa:focus { background: #1fb457; color: #fff; transform: translateY(-2px); }

/* ---------- Pre-footer CTA ---------- */
.prefooter { position: relative; z-index: 2; padding-top: 32px; background: linear-gradient(to bottom, transparent 50%, var(--dk-navy) 50%); }
.prefooter-card {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  padding: 36px 44px; border-radius: 28px; background-color: #FFFDF6;
  background-image: radial-gradient(420px 220px at 100% 0%, rgba(255, 193, 7, .22), transparent 70%),
                    radial-gradient(360px 200px at 0% 100%, rgba(245, 158, 11, .10), transparent 70%);
  border: 1px solid rgba(255, 193, 7, .35);
  box-shadow: 0 2px 6px rgba(60, 45, 10, .05), 0 30px 70px -30px rgba(60, 45, 10, .35);
}
.pf-copy { display: flex; align-items: center; gap: 20px; flex: 1 1 420px; min-width: 0; }
.pf-ico { flex: 0 0 60px; height: 60px; border-radius: 18px; display: grid; place-items: center; background: var(--dk-grad, var(--dk-cyan)); color: var(--dk-on-yellow, #1F1A10); font-size: 1.6rem; box-shadow: 0 12px 26px -12px rgba(245, 180, 0, .6); }
.prefooter h2 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); margin: 0 0 6px; color: var(--dk-ink); letter-spacing: -.01em; }
.prefooter p { margin: 0; color: var(--dk-muted); }
.pf-actions { display: flex; gap: 12px; flex-wrap: wrap; }
@media (max-width: 767.98px) {
  .prefooter { padding-top: 24px; }
  .prefooter-card { padding: 26px 22px; border-radius: 22px; }
  .pf-copy { flex-direction: column; align-items: flex-start; gap: 14px; flex-basis: 100%; }
  .pf-ico { flex-basis: auto; width: 52px; height: 52px; font-size: 1.35rem; }
  .pf-actions { width: 100%; }
  .pf-actions .btn { flex: 1 1 100%; }
}

/* ---------- Footer ---------- */
.footer { background: radial-gradient(800px 400px at 100% 0%, rgba(255, 193, 7, .10), transparent 60%), var(--dk-navy); color: #D9CDB0; padding-top: 72px; font-size: .95rem; position: relative; }
.footer .brand { display: inline-flex; align-items: center; gap: 10px; }
.footer .brand img { background: #fff; border-radius: 50%; padding: 4px; box-shadow: 0 0 0 2px rgba(255, 193, 7, .35); }
.footer .brand-text { color: #fff; }
.footer .brand-text span { color: var(--dk-cyan); }
.footer .brand-text small { color: #A89C80; }
.footer h5 { color: #FFF8E1; font-size: 1rem; font-weight: 700; letter-spacing: .02em; margin-bottom: 20px; }
.footer a { color: #E6DBC0; transition: color .2s ease; }
.footer a:hover { color: var(--dk-cyan); }
.footer-about { margin: 18px 0 18px; max-width: 360px; line-height: 1.7; }
.footer-badges { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.footer-badges span { font-size: .8rem; color: #EFE5CC; background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .18); border-radius: 50px; padding: 5px 12px; display: inline-flex; gap: 6px; align-items: center; }
.footer-badges .bi { color: var(--dk-cyan); }
.footer-badges .bi-star-fill { color: #FFC107; }
.footer .social { display: flex; gap: 10px; }
.footer .social a { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255, 193, 7, .08); border: 1px solid rgba(255, 193, 7, .16); color: #fff; margin: 0; transition: all .25s var(--lay-ease); }
.footer .social a:hover { background: var(--dk-cyan); color: #1F1A10; transform: translateY(-3px); }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 11px; }
.footer-links a { display: inline-flex; align-items: center; gap: 0; position: relative; }
.footer-links a::before { content: none; }
.footer-links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--lay-ease); }
.footer-links a:hover::after { transform: scaleX(1); transform-origin: left; }
.footer-links-inline { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-bottom: 22px; }
.footer-links-inline li { margin: 0; }
.footer-contact { margin: 0; }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 12px; font-size: .92rem; line-height: 1.6; }
.footer-contact i { color: var(--dk-cyan); font-size: 1rem; margin-top: 2px; }
.footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; border-top: 1px solid rgba(255, 193, 7, .14); margin-top: 56px; padding: 24px 0 28px; font-size: .87rem; color: #A89C80; }
.footer-legal { display: flex; gap: 20px; }
.made-in .bi-heart-fill { color: #ff5a6e; display: inline-block; animation: lay-beat 1.8s ease-in-out infinite; }
@keyframes lay-beat { 0%, 100% { transform: scale(1); } 15% { transform: scale(1.22); } 30% { transform: scale(1); } 45% { transform: scale(1.15); } }
@media (max-width: 767.98px) {
  .footer { padding-top: 56px; }
  .footer-bottom { flex-direction: column; align-items: flex-start; margin-top: 40px; padding-bottom: 96px; }
}


/* ---------- Focus & motion ---------- */
.footer a:focus-visible, .prefooter a:focus-visible { outline: 3px solid var(--dk-cyan); outline-offset: 2px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) {
  .footer *, .prefooter * { transition: none !important; animation: none !important; }
}

/* Footer: light DK mark on the dark footer, no white plate */
.footer .brand img.footer-mark { width: 240px; height: auto; background: none; border-radius: 0; padding: 0; box-shadow: none; }