/* ============================================================
   CLOXBI — SHARED HEADER & FOOTER STYLES
   Loaded once by baseof.html; styles the nav, mobile menu,
   founder banner, and footer for every page.
   ============================================================ */
:root{
  --purple:#5438dc; --purple-d:#3d28b0; --cyan:#2ec0f9; --yellow:#e0ca3c;
  --dark:#1a1a2e; --gray:#6b7280; --border:#ebebf5; --owhite:#fffeee; --white:#fff;
}

/* FOUNDER BANNER (only on pages that include the partial) */
.founder-banner{ background:var(--purple-d); color:#fff; text-align:center; padding:11px 44px 11px 24px; font-size:14px; position:relative; }
.founder-banner strong{ font-weight:800; }
.founder-banner a{ color:#fff; font-weight:700; text-decoration:underline; text-underline-offset:2px; margin-left:4px; }
.founder-banner-flag{ margin-right:4px; }
.founder-banner-dismiss{ position:absolute; right:16px; top:50%; transform:translateY(-50%); background:none; border:none; color:#fff; font-size:20px; line-height:1; cursor:pointer; opacity:.7; }
.founder-banner-dismiss:hover{ opacity:1; }

/* NAV */
nav[aria-label="Primary"]{ background:var(--purple); padding:18px 64px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; box-shadow:0 2px 20px rgba(0,0,0,.15); }
.nav-logo{ display:flex; flex-direction:column; gap:3px; text-decoration:none; }
.nav-logo-tag{ font-size:10px; font-weight:400; color:var(--cyan); letter-spacing:.3px; }
.nav-links{ display:flex; gap:28px; list-style:none; margin:0; padding:0; }
.nav-links a{ font-size:15px; font-weight:600; color:rgba(255,255,255,.82); text-decoration:none; transition:color .2s; }
.nav-links a:hover, .nav-links a.active{ color:#fff; }
.nav-actions{ display:flex; align-items:center; gap:8px; }
.nav-login{ font-size:15px; font-weight:600; color:rgba(255,255,255,.82); text-decoration:none; padding:0 10px; height:38px; display:inline-flex; align-items:center; transition:color .2s; }
.nav-login:hover{ color:#fff; }
.nav-cta{ background:#fff; color:var(--purple); font-size:15px; font-weight:700; padding:0 20px; height:38px; border-radius:8px; border:none; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; transition:background .2s; }
.nav-cta:hover{ background:var(--yellow); color:var(--dark); }
.nav-hamburger{ display:none; flex-direction:column; gap:5px; cursor:pointer; background:none; border:none; padding:4px; }
.nav-hamburger span{ display:block; width:24px; height:2px; background:#fff; border-radius:2px; transition:all .25s; }
.nav-hamburger.open span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2){ opacity:0; }
.nav-hamburger.open span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* MOBILE MENU */
.mobile-menu{ position:fixed; top:0; left:0; right:0; bottom:0; background:var(--purple-d); padding:76px 20px 24px; z-index:99; flex-direction:column; gap:4px; overflow-y:auto; transform:translateY(-100%); opacity:0; transition:transform .35s ease,opacity .35s ease; pointer-events:none; }
.mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; }
.mobile-menu a{ font-size:16px; font-weight:700; color:rgba(255,255,255,.85); text-decoration:none; padding:14px 8px; border-bottom:1px solid rgba(255,255,255,.08); }
.mobile-menu a:last-child{ border-bottom:none; }
.mobile-menu .mobile-cta{ margin-top:12px; background:#fff; color:var(--purple); text-align:center; border-radius:8px; padding:15px; font-size:17px; border-bottom:none; }

/* FOOTER */
footer{ background:#12122a; padding:64px 24px 0; text-align:center; }
.footer-logo-wrap{ display:flex; flex-direction:column; align-items:center; gap:12px; margin-bottom:20px; }
.footer-tagline{ font-size:15px; font-weight:400; color:rgba(255,255,255,.5); margin:0; }
.footer-trial-btn{ display:inline-flex; align-items:center; gap:8px; background:var(--cyan); color:var(--dark); font-size:16px; font-weight:800; padding:14px 32px; border-radius:10px; text-decoration:none; margin-bottom:32px; transition:background .2s,transform .2s; }
.footer-trial-btn:hover{ background:#5dd4fc; transform:translateY(-1px); }
.footer-nav{ display:flex; justify-content:center; align-items:center; gap:32px; flex-wrap:wrap; margin-bottom:16px; }
.footer-nav a{ font-size:15px; font-weight:500; color:rgba(255,255,255,.65); text-decoration:none; transition:color .2s; }
.footer-nav a:hover{ color:#fff; }
.footer-email{ font-size:13px; font-weight:400; color:rgba(255,255,255,.45); text-decoration:none; display:block; margin-bottom:20px; transition:color .2s; }
.footer-email:hover{ color:var(--cyan); }
.footer-social{ display:flex; justify-content:center; gap:16px; margin-bottom:32px; }
.footer-social a{ display:flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:50%; color:var(--cyan); text-decoration:none; transition:color .2s,transform .2s; }
.footer-social a:hover{ color:#5dd4fc; transform:scale(1.08); }
.footer-social svg{ width:32px; height:32px; }
.footer-alabama{ font-size:14px; font-style:italic; color:rgba(255,255,255,.35); margin-bottom:32px; }
.footer-yellow-bar{ height:3px; background:var(--yellow); margin:0 -24px; }
.footer-bottom{ background:#0e0e22; padding:20px 24px; display:flex; justify-content:center; align-items:center; gap:32px; flex-wrap:wrap; margin:0 -24px; }
.footer-bottom p{ font-size:13px; color:rgba(255,255,255,.4); margin:0; }
.footer-bottom-links{ display:flex; gap:24px; }
.footer-bottom-links a{ font-size:13px; color:rgba(255,255,255,.4); text-decoration:none; transition:color .2s; }
.footer-bottom-links a:hover{ color:rgba(255,255,255,.75); }

@media (max-width:768px){
  nav[aria-label="Primary"]{ padding:14px 20px; }
  .nav-links{ display:none; }
  .nav-actions{ margin-left:auto; gap:4px; }
  .nav-login{ font-size:14px; padding:0 8px; height:34px; }
  .nav-cta{ font-size:14px; padding:0 14px; height:34px; }
  .nav-hamburger{ display:flex; margin-left:8px; }
  .nav-logo svg{ max-width:130px; height:auto; }
  .nav-logo-tag{ display:none; }
  .founder-banner{ font-size:12.5px; padding:10px 34px 10px 16px; }
  footer{ padding:48px 20px 0; }
  .footer-yellow-bar, .footer-bottom{ margin:0 -20px; }
  .footer-nav{ gap:20px; }
}

@media (max-width:400px){
  .nav-logo svg{ max-width:110px; }
  .nav-login{ font-size:13px; padding:0 6px; }
  .nav-cta{ font-size:13px; padding:0 10px; }
}