/* ════════════════════════════════════════════════════════════
   BRAVOS — UI 2.0  ·  Refined navy/blue design system
   Override layer — loaded after main.css. Reversible.
   ════════════════════════════════════════════════════════════ */

:root{
  --r:10px; --r-lg:16px; --r-xl:22px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 1px 2px rgba(15,23,42,.04), 0 10px 24px rgba(15,23,42,.06);
  --shadow-lg:0 18px 50px rgba(15,23,42,.16);
  --trans:.25s cubic-bezier(.4,0,.2,1);
  --ease:cubic-bezier(.4,0,.2,1);
  --ring:0 0 0 4px rgba(37,99,235,.16);
}

*,*::before,*::after{ -webkit-tap-highlight-color:transparent; }

/* ────────────────────────────── NAVBAR 2.0 ───────────────────────────── */
.navbar{
  height:66px;
  background:rgba(255,255,255,.82);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(15,23,42,.07);
  transition:height var(--trans), box-shadow var(--trans), background var(--trans);
}
.navbar.scrolled{ height:58px; box-shadow:0 6px 24px rgba(15,23,42,.09); background:rgba(255,255,255,.92); }
.nav-inner{ gap:16px; }
.nav-logo .logo-wordmark{ font-size:1.05rem; letter-spacing:.14em; }
.logo-flag{ width:20px; height:20px; border-radius:5px; box-shadow:0 2px 6px rgba(0,0,0,.18); }

.nav-links{ gap:1px; justify-content:center; }
.nav-link{
  position:relative; font-size:.88rem; font-weight:600; color:var(--gray-600);
  padding:8px 14px; border-radius:8px;
  transition:color var(--trans), background var(--trans);
}
.nav-link::after{
  content:''; position:absolute; left:14px; right:14px; bottom:3px; height:2px;
  background:var(--navy-light); border-radius:2px;
  transform:scaleX(0); transform-origin:center; transition:transform var(--trans);
}
.nav-link:hover{ color:var(--navy); background:rgba(30,58,138,.05); }
.nav-link:hover::after{ transform:scaleX(1); }
.nav-active{ color:var(--navy); background:rgba(30,58,138,.08); }
.nav-active::after{ transform:scaleX(1); }

.btn-nav-login,.btn-nav-signup{
  padding:9px 20px; border-radius:9px; font-size:.86rem; font-weight:600;
  transition:transform var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans), border-color var(--trans);
}
.btn-nav-login{ border:1.5px solid var(--gray-300); }
.btn-nav-login:hover{ transform:translateY(-1px); border-color:var(--navy); color:var(--navy); }
.btn-nav-signup{ box-shadow:0 4px 14px rgba(37,99,235,.28); }
.btn-nav-signup:hover{ transform:translateY(-1px); box-shadow:0 10px 24px rgba(37,99,235,.4); }

/* Mobile auth lives inside the menu; hidden on desktop */
.nav-menu-auth{ display:none; }

.hamburger span{ transition:transform var(--trans), opacity var(--trans); }

/* ──────────────────── SEGMENTED 2nd NAV BAR (image-6 style) ──────────────────── */
.quick-tabs{
  background:linear-gradient(180deg, var(--navy) 0%, var(--navy-dark) 100%);
  position:relative; overflow-x:auto; -webkit-overflow-scrolling:touch;
  box-shadow:inset 0 -1px 0 rgba(255,255,255,.06), 0 6px 18px rgba(15,23,42,.08);
}
.quick-tabs::-webkit-scrollbar{ display:none; }
.qt-inner{ max-width:1200px; margin:0 auto; padding:0; display:flex; width:100%; }
.qt-tab{
  flex:1; text-align:center; white-space:nowrap;
  padding:15px 18px; font-size:.85rem; font-weight:600;
  color:rgba(255,255,255,.72);
  border-right:1px solid rgba(255,255,255,.1);
  position:relative; overflow:hidden;
  transition:color var(--trans), background var(--trans);
}
.qt-tab:first-child{ border-left:1px solid rgba(255,255,255,.1); }
.qt-tab::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:3px;
  background:#fff; transform:scaleX(0); transition:transform var(--trans);
}
.qt-tab:hover{ color:#fff; background:rgba(255,255,255,.08); }
.qt-active{ color:#fff; background:rgba(255,255,255,.12); }
.qt-active::after,.qt-tab:hover::after{ transform:scaleX(1); }

/* ──────────────────────────── BUTTONS smoother ──────────────────────────── */
.btn-primary-sm,.btn-outline-dark,.btn-primary-hero,.btn-outline-hero,
.btn-primary-banner,.btn-outline-white,.btn-pc,.btn-pc-featured{
  transition:transform var(--trans), box-shadow var(--trans), background var(--trans), color var(--trans), border-color var(--trans) !important;
}
.btn-primary-sm:hover,.btn-primary-hero:hover,.btn-primary-banner:hover,
.btn-pc:hover,.btn-pc-featured:hover{ transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.btn-outline-dark:hover,.btn-outline-hero:hover,.btn-outline-white:hover{ transform:translateY(-2px); }
.btn-primary-hero{ box-shadow:0 8px 24px rgba(0,0,0,.18); }

/* ──────────────────────────── CARDS smoother lift ──────────────────────────── */
.feature-card,.resource-card,.team-card,.pricing-card,.mission-card,.service-detail{
  transition:transform var(--trans), box-shadow var(--trans), border-color var(--trans);
}
.feature-card:hover,.resource-card:hover,.team-card:hover{
  transform:translateY(-6px); box-shadow:var(--shadow-lg); border-color:rgba(37,99,235,.25);
}
.pricing-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.feat-icon,.mc-icon,.sd-icon,.qs-icon,.ci-icon{ transition:transform var(--trans); }
.feature-card:hover .feat-icon,.mission-card:hover .mc-icon,.service-detail:hover .sd-icon{ transform:scale(1.08) rotate(-3deg); }

/* ──────────────────────────── FORMS ──────────────────────────── */
.form-input{ transition:border-color var(--trans), box-shadow var(--trans); }
.form-input:focus{ box-shadow:var(--ring); }

/* ──────────────────────────── PAGE-HERO polish ──────────────────────────── */
.page-hero h1{ letter-spacing:-.01em; }

/* ──────────────────────────── FOOTER polish ──────────────────────────── */
.social-icon{ transition:transform var(--trans), background var(--trans), color var(--trans); }
.social-icon:hover{ transform:translateY(-3px); }
.footer-links a{ transition:color var(--trans), padding-left var(--trans); }
.footer-links a:hover{ padding-left:4px; }

/* ──────────────────────────── SMOOTH MOTION DEFAULTS ──────────────────────────── */
html{ scroll-behavior:smooth; }
a,button{ transition:color var(--trans), background var(--trans); }

/* ════════════════════════════ RESPONSIVE ════════════════════════════ */
@media(max-width:768px){
  .nav-auth{ display:none; }
  .nav-menu-auth{
    display:flex; flex-direction:column; gap:8px;
    padding-top:12px; margin-top:8px; border-top:1px solid var(--gray-100);
  }
  .nav-menu-auth .btn-nav-login,.nav-menu-auth .btn-nav-signup{
    width:100%; text-align:center; padding:11px 18px;
  }
  .nav-links{ justify-content:flex-start; }
}
@media(max-width:600px){
  .qt-inner{ min-width:max-content; }
  .qt-tab{ flex:0 0 auto; padding:13px 20px; }
}

/* Respect reduced-motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{ transition:none !important; animation:none !important; scroll-behavior:auto !important; }
}