/* ── SHARED STYLES — Creative Mojo ─────────────────────────────────────── */

/* ── FOOTER ── */
footer { background: #0e2340; padding: 60px 5% 32px; color: rgba(255,255,255,0.6); }
.footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 48px; border-bottom: 1px solid rgba(255,255,255,0.08); margin-bottom: 32px; }
.footer-brand { display: flex; flex-direction: column; }
.footer-brand a { display: inline-block; margin-bottom: 16px; }
.footer-brand img { height: 36px; display: block; }
.footer-brand p { font-size: 0.88rem; line-height: 1.7; max-width: 260px; }
.footer-col h5 { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; margin-bottom: 16px; }
.footer-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-col a { text-decoration: none; color: rgba(255,255,255,0.5); font-size: 0.88rem; transition: color 0.2s; }
.footer-col a:hover { color: #f26a2e; }
.footer-bottom { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; }
.footer-bottom p { font-size: 0.82rem; }

/* ── SECTION UTILITIES ── */
.section-inner { max-width: 1100px; margin: 0 auto; }
.section-tag { display: inline-flex; align-items: center; gap: 10px; font-size: 0.8rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: #f26a2e; margin-bottom: 16px; }
.section-tag span { display: inline-block; width: 28px; height: 2px; background: #f26a2e; }
h2 { font-family: 'DM Serif Display', serif; font-size: clamp(1.7rem, 3vw, 2.6rem); color: #133157; font-weight: 400; line-height: 1.25; margin-bottom: 20px; }

/* ── BUTTONS ── */
.btn-primary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #f26a2e; color: #fff; padding: 14px 30px; border-radius: 4px; font-size: 0.95rem; font-weight: 600; letter-spacing: 0.02em; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.btn-primary:hover { background: #d95a22; transform: translateY(-1px); }
.btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 8px; color: #133157; font-size: 0.95rem; font-weight: 500; text-decoration: none; padding: 14px 4px; border-bottom: 2px solid #133157; transition: color 0.2s, border-color 0.2s; }
.btn-secondary:hover { color: #f26a2e; border-color: #f26a2e; }
.btn-outline { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 2px solid #133157; color: #133157; padding: 12px 28px; border-radius: 4px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: background 0.2s, color 0.2s; }
.btn-outline:hover { background: #133157; color: #fff; }
.btn-white { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #fff; color: #133157; padding: 14px 30px; border-radius: 4px; font-size: 0.95rem; font-weight: 600; text-decoration: none; transition: background 0.2s, transform 0.15s; }
.btn-white:hover { background: #f7f9fc; transform: translateY(-1px); }

/* ── CTA BANNER ── */
.cta-banner { background: linear-gradient(135deg, #133157 0%, #0e2340 100%); padding: 80px 5%; text-align: center; position: relative; overflow: hidden; }
.cta-banner::before { content: ''; position: absolute; top: -60px; left: 50%; transform: translateX(-50%); width: 600px; height: 300px; background: radial-gradient(ellipse, rgba(242,106,46,0.18) 0%, transparent 70%); }
.cta-banner-inner { position: relative; max-width: 680px; margin: 0 auto; }
.cta-banner h2 { color: #fff; font-size: clamp(1.6rem, 3vw, 2.4rem); margin-bottom: 16px; }
.cta-banner p { color: rgba(255,255,255,0.65); font-size: 1rem; font-weight: 300; line-height: 1.8; margin-bottom: 36px; }
.cta-actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.cta-banner .btn-primary { font-size: 1rem; padding: 16px 36px; }

/* ── LOGO GRID ── */
.logo-grid { max-width: 1000px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 0; justify-content: center; }
.logo-item { width: 16.66%; padding: 20px; display: flex; align-items: center; justify-content: center; border: 1px solid #e6e6e6; }
.logo-placeholder { height: 28px; background: #e6e6e6; border-radius: 4px; width: 80%; opacity: 0.6; }
.logo-item img { max-height: 36px; max-width: 80%; width: auto; object-fit: contain; opacity: 0.55; filter: grayscale(100%); transition: opacity 0.25s, filter 0.25s; }
.logo-item img:hover { opacity: 1; filter: grayscale(0%); }

/* ── ANIMATIONS ── */
.fade-up { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }

/* ════════════════════════════════════════════
   RESPONSIVE — Tablet 900px
   ════════════════════════════════════════════ */
@media (max-width: 900px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .logo-item { width: 25%; }
  .cta-banner { padding: 64px 5%; }
  .cta-actions { flex-direction: column; align-items: center; }
  .cta-actions .btn-primary, .cta-actions .btn-white { width: 100%; max-width: 320px; }
}

/* ════════════════════════════════════════════
   RESPONSIVE — Mobile 600px
   ════════════════════════════════════════════ */
@media (max-width: 600px) {
  .footer-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 36px; }
  .footer-brand p { max-width: 100%; }
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: 4px; }
  .logo-item { width: 33.33%; padding: 14px; }
  .cta-banner { padding: 56px 5%; }
  .cta-banner p { font-size: 0.95rem; }
  .cta-banner .btn-primary { width: 100%; justify-content: center; }
}

/* ════════════════════════════════════════════
   RESPONSIVE — Small 400px
   ════════════════════════════════════════════ */
@media (max-width: 400px) {
  .logo-item { width: 50%; }
}