/* ============================================================================
   First 1 Car — Navigation, footer, and shared page furniture
   ============================================================================ */

/* ── Fixed canvas backdrop (starfield + horizon grid) ─────────────────── */
#bg-canvas{
  position:fixed;inset:0;width:100%;height:100%;
  z-index:0;pointer-events:none;
}
.bg-orb{
  position:fixed;border-radius:50%;filter:blur(110px);
  z-index:0;pointer-events:none;will-change:transform;
}
.bg-orb.g{width:min(600px,70vw);height:min(600px,70vw);top:-14%;inset-inline-start:-12%;
  background:radial-gradient(circle,rgba(34,197,94,.26),transparent 68%)}
.bg-orb.v{width:min(640px,74vw);height:min(640px,74vw);bottom:-18%;inset-inline-end:-14%;
  background:radial-gradient(circle,rgba(147,51,234,.24),transparent 68%)}

/* ── Header ───────────────────────────────────────────────────────────── */
.nav{
  position:fixed;inset-inline:0;top:0;z-index:100;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background var(--tr),border-color var(--tr),backdrop-filter var(--tr);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(2,6,23,.82);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom-color:var(--border);
}
.nav-inner{width:var(--shell);margin-inline:auto;display:flex;align-items:center;gap:1.5rem}

.brand{display:flex;align-items:center;gap:.7rem;font-weight:800;font-size:1.06rem;flex-shrink:0}
.brand img{height:30px;width:auto;filter:drop-shadow(0 0 16px rgba(34,197,94,.5))}
.footer .brand img{height:38px}

.nav-links{display:flex;align-items:center;gap:.3rem;margin-inline-start:auto}
.nav-links a{
  position:relative;padding:.55rem .95rem;border-radius:10px;
  font-size:.93rem;font-weight:600;color:var(--muted);
  transition:color var(--tr),background var(--tr);
}
.nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)}
.nav-links a.active{color:var(--green-2)}
.nav-links a.active::after{
  content:"";position:absolute;bottom:.24rem;inset-inline:.95rem;height:2px;border-radius:2px;
  background:var(--green);box-shadow:0 0 10px var(--green);
}

.nav-actions{display:flex;align-items:center;gap:.6rem;flex-shrink:0}

.lang-btn{
  padding:.5rem .9rem;border-radius:999px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--border-hi);
  font-size:.82rem;font-weight:700;letter-spacing:.02em;
  transition:background var(--tr),border-color var(--tr),color var(--tr);
}
.lang-btn:hover{background:var(--violet-dim);border-color:var(--violet-2);color:var(--violet-2)}

.nav-cta{padding:.62rem 1.3rem;font-size:.88rem}

/* burger */
.burger{
  display:none;width:44px;height:44px;border-radius:12px;cursor:pointer;
  background:rgba(255,255,255,.05);border:1px solid var(--border-hi);
  position:relative;flex-shrink:0;
}
.burger span{
  position:absolute;inset-inline-start:12px;width:20px;height:2px;border-radius:2px;
  background:var(--text);transition:transform var(--tr),opacity var(--tr),top var(--tr);
}
.burger span:nth-child(1){top:15px}
.burger span:nth-child(2){top:21px}
.burger span:nth-child(3){top:27px}
.burger.open span:nth-child(1){top:21px;transform:rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){top:21px;transform:rotate(-45deg)}

/* mobile drawer */
.drawer{
  position:fixed;inset:var(--nav-h) 0 auto 0;z-index:99;
  background:rgba(2,6,23,.97);backdrop-filter:blur(24px);
  border-bottom:1px solid var(--border);
  padding:1.1rem var(--shell-pad,5vw) 1.8rem;
  display:flex;flex-direction:column;gap:.25rem;
  transform:translateY(-14px);opacity:0;visibility:hidden;
  transition:transform var(--tr),opacity var(--tr),visibility var(--tr);
}
.drawer.open{transform:none;opacity:1;visibility:visible}
.drawer a{
  padding:.95rem .6rem;border-radius:12px;font-weight:700;font-size:1.03rem;
  border-bottom:1px solid rgba(255,255,255,.05);
}
.drawer a.active{color:var(--green-2)}
.drawer .btn{margin-top:1rem}

@media (max-width:940px){
  .nav-links{display:none}
  .nav-cta{display:none}
  .burger{display:block;margin-inline-start:auto}
  .nav-actions{gap:.5rem}
}

/* ── Footer ───────────────────────────────────────────────────────────── */
.footer{
  border-top:1px solid var(--border);
  background:linear-gradient(180deg,transparent,rgba(7,13,28,.85));
  padding:clamp(48px,7vw,84px) 0 2rem;margin-top:2rem;
}
.footer-grid{
  display:grid;gap:clamp(2rem,4vw,3.4rem);
  grid-template-columns:1.5fr 1fr 1fr 1.3fr;
}
@media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.footer-grid{grid-template-columns:1fr}}

.footer h4{font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--green-2);margin-bottom:1.15rem;font-weight:800}
.footer-col a,.footer-col p{display:block;color:var(--muted);font-size:.93rem;
  padding:.3rem 0;transition:color var(--tr)}
.footer-col a:hover{color:var(--green-2)}
.footer .brand{margin-bottom:1rem}
.footer .lead{font-size:.93rem}

.socials{display:flex;gap:.6rem;margin-top:1.2rem}
.socials a{
  width:42px;height:42px;border-radius:12px;display:grid;place-items:center;
  background:rgba(255,255,255,.05);border:1px solid var(--border);
  transition:transform var(--tr),background var(--tr),border-color var(--tr);
}
.socials a:hover{transform:translateY(-4px);background:var(--green-dim);border-color:var(--green)}
.socials svg{width:19px;height:19px;fill:currentColor}

.footer-bottom{
  margin-top:clamp(2.4rem,5vw,3.6rem);padding-top:1.6rem;
  border-top:1px solid var(--border);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  font-size:.85rem;color:var(--faint);
}

/* ── Floating WhatsApp ────────────────────────────────────────────────── */
.wa-float{
  position:fixed;inset-block-end:22px;inset-inline-end:22px;z-index:90;
  width:58px;height:58px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(135deg,#25d366,#128c7e);
  box-shadow:0 12px 34px -8px rgba(37,211,102,.75);
  transition:transform var(--tr);
}
.wa-float:hover{transform:scale(1.09) translateY(-3px)}
.wa-float svg{width:29px;height:29px;fill:#fff}
.wa-float::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:2px solid rgba(37,211,102,.55);
  animation:ring 2.6s ease-out infinite;
}
@keyframes ring{0%{transform:scale(1);opacity:.9}100%{transform:scale(1.75);opacity:0}}

/* ── Page hero (inner pages) ──────────────────────────────────────────── */
.page-hero{
  padding:calc(var(--nav-h) + clamp(56px,8vw,96px)) 0 clamp(40px,6vw,70px);
  position:relative;text-align:center;
}
.page-hero h1{margin-bottom:1.1rem}
.page-hero .lead{margin-inline:auto}

/* ── Section divider (glowing hairline) ───────────────────────────────── */
.hr-glow{
  height:1px;border:0;
  background:linear-gradient(90deg,transparent,rgba(34,197,94,.55),rgba(147,51,234,.55),transparent);
}

/* a branch that has not opened yet, noted in the footer list */
.soon-note{color:#c4b5fd;font-size:.8rem;font-weight:600}