/* ══════════════════════════════════════
   Header & Navigation
══════════════════════════════════════ */

header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  background: white;
  padding: 1.25rem 0;
  transition: all .3s ease;
}

header.scrolled {
  background: rgba(255,255,255,.95);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 8px rgba(224,90,0,.1);
  padding: .75rem 0;
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* ── Logo ── */
.logo {
  display: flex;
  align-items: center;
  gap: .75rem;
  cursor: pointer;
}
.logo svg { width: 40px; height: 40px; flex-shrink: 0; }
.logo-text { display: flex; flex-direction: column; gap: .1rem; }
.logo-main { font-size: 1.15rem; font-weight: 900; line-height: 1.1; letter-spacing: .01em; color: hsl(222, 47%, 15%); text-transform: uppercase; }
.logo-sub  { font-size: .55rem; font-weight: 700; text-transform: uppercase; letter-spacing: .12em; color: var(--primary-hex); margin-top: .15rem; }

/* ── Nav ── */
.nav-links { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1024px) { .nav-links { display: flex; } }

.nav-links a {
  font-size: .875rem;
  font-weight: 500;
  color: var(--muted-foreground);
  transition: color .2s;
}
.nav-links a:hover { color: var(--primary-hex); }

.header-actions { display: none; align-items: center; gap: 1rem; }
@media (min-width: 1024px) { .header-actions { display: flex; } }

/* ── Mobile Toggle ── */
.mobile-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  background: none; border: none;
  cursor: pointer;
  color: var(--foreground);
}
@media (min-width: 1024px) { .mobile-toggle { display: none; } }

/* ── Mobile Menu ── */
.mobile-menu {
  display: none;
  position: fixed; inset: 0;
  background: white; z-index: 100;
  flex-direction: column;
  padding: 5rem 2rem 2rem;
}
.mobile-menu.open { display: flex; }

.mobile-menu-close {
  position: absolute; top: 1rem; right: 1rem;
  background: none; border: none; cursor: pointer; padding: .5rem;
}

.mobile-menu a {
  font-size: 1.125rem; font-weight: 600;
  padding: .75rem 1rem;
  border-radius: .5rem; transition: all .2s;
  color: var(--foreground);
}
.mobile-menu a:hover { color: var(--primary-hex); background: var(--muted); }
.mobile-menu-wa { margin-top: 1.5rem; }

/* ══════════════════════════════════════
   Footer
══════════════════════════════════════ */

footer {
  background: hsl(220, 40%, 7%);
  color: hsl(220, 10%, 72%);
  padding: 4rem 0 2rem;
}

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

.footer-brand p {
  color: hsl(220, 10%, 55%);
  font-size: .875rem;
  line-height: 1.7;
  margin-top: 1.5rem;
}

.footer-col h3 {
  color: white;
  font-weight: 600;
  margin-bottom: 1.5rem;
}

.footer-links { list-style: none; display: flex; flex-direction: column; gap: .75rem; }
.footer-links a {
  color: hsl(220, 10%, 55%);
  font-size: .875rem;
  transition: color .2s;
}
.footer-links a:hover { color: white; }

.footer-contact-items { display: flex; flex-direction: column; gap: 1rem; }
.footer-contact-item  { display: flex; align-items: flex-start; gap: .75rem; }
.footer-contact-item svg { width: 1.25rem; height: 1.25rem; color: var(--secondary-hex); flex-shrink: 0; margin-top: .125rem; }
.footer-contact-item a,
.footer-contact-item span { color: hsl(220, 10%, 55%); font-size: .875rem; transition: color .2s; }
.footer-contact-item a:hover { color: white; }
.footer-contact-phones { display: flex; flex-wrap: wrap; gap: .5rem 1rem; }

.footer-bottom {
  border-top: 1px solid hsl(220, 20%, 15%);
  padding-top: 2rem;
  display: flex; flex-direction: column; gap: 1rem;
}
@media (min-width: 768px) {
  .footer-bottom { flex-direction: row; justify-content: space-between; align-items: center; }
}
.footer-copy { color: hsl(220, 10%, 42%); font-size: .875rem; }
.footer-legal { display: flex; gap: 1.5rem; }
.footer-legal a { color: hsl(220, 10%, 42%); font-size: .875rem; transition: color .2s; }
.footer-legal a:hover { color: white; }

/* ══════════════════════════════════════
   Floating Buttons
══════════════════════════════════════ */

.floating-btns {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 50;
  display: flex; flex-direction: column; gap: 1rem;
}

.float-btn {
  width: 3.25rem; height: 3.25rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,.2);
  transition: all .3s;
  border: none; cursor: pointer;
}
@media (min-width: 768px) { .float-btn { width: 3.5rem; height: 3.5rem; } }
.float-btn:hover { transform: scale(1.1); }
.float-btn svg { width: 1.5rem; height: 1.5rem; }
@media (min-width: 768px) { .float-btn svg { width: 1.75rem; height: 1.75rem; } }

.float-yt { background: #FF0000; color: white; box-shadow: 0 4px 16px rgba(255,0,0,.3); }
.float-yt:hover { box-shadow: 0 8px 24px rgba(255,0,0,.4); }
.float-ig { background: #E4405F; color: white; box-shadow: 0 4px 16px rgba(228,64,95,.3); }
.float-ig:hover { box-shadow: 0 8px 24px rgba(228,64,95,.4); }
.float-wa { background: #25D366; color: white; box-shadow: 0 4px 16px rgba(37,211,102,.3); }
.float-wa:hover { box-shadow: 0 8px 24px rgba(37,211,102,.4); }

/* ══════════════════════════════════════
   Footer — Services Offered Chips
══════════════════════════════════════ */

.footer-services-chips {
  display: flex;
  flex-direction: column;
  gap: .5rem;
  padding-bottom: 1rem;
}

.fsvc-item { width: 100%; }

.fsvc-chip {
  width: 100%;
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .875rem;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: .5rem;
  color: hsl(220, 10%, 75%);
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  transition: background .2s, border-color .2s, color .2s;
  line-height: 1.3;
}

.fsvc-chip svg:first-child {
  flex-shrink: 0;
  color: var(--primary-hex);
  opacity: .85;
}

.fsvc-chip:hover {
  background: rgba(224,90,0,.12);
  border-color: rgba(224,90,0,.35);
  color: white;
}

.fsvc-open .fsvc-chip {
  background: rgba(224,90,0,.15);
  border-color: rgba(224,90,0,.5);
  color: white;
  border-radius: .5rem .5rem 0 0;
}

.fsvc-arrow {
  margin-left: auto;
  flex-shrink: 0;
  transition: transform .25s ease;
  opacity: .55;
}
.fsvc-open .fsvc-arrow { transform: rotate(180deg); opacity: 1; }

.fsvc-desc {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: .8rem;
  color: hsl(220, 10%, 62%);
  line-height: 1.75;
  padding: 0 1rem;
  transition: max-height .45s ease, opacity .3s ease;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(224,90,0,.25);
  border-top: none;
  border-radius: 0 0 .5rem .5rem;
  margin-top: 0;
}

.fsvc-desc strong {
  display: block;
  color: hsl(220, 10%, 88%);
  font-size: .8125rem;
  margin-bottom: .35rem;
}

.fsvc-open .fsvc-desc {
  padding: .875rem 1rem 1rem;
  opacity: 1;
}

/* Extra bottom clearance on last chip so floating buttons don't overlap */
.fsvc-last { margin-bottom: .5rem; }

/* Wider footer grid to fit the extra column */
@media (min-width: 1024px) {
  .footer-grid { grid-template-columns: 1fr 1fr 1.5fr 2fr; }
}