/* =============================================================
   ASCEND BIOSCIENCES - SHARED STYLES
   =============================================================
   Everything in this file applies to EVERY page of the site.

   Brand colours and fonts are in the ":root" block directly
   below. Change a colour here once and it changes everywhere.

   Anything specific to a single page (the homepage hero, the
   quote form, the platform sections) is still inside that
   page's own <style> block.

   See MAINTENANCE.html for plain-English instructions.
   ============================================================= */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

html{scroll-behavior:smooth}

body{font-family:var(--sans);color:var(--navy);background:var(--white);line-height:1.6;-webkit-font-smoothing:antialiased}

/* ── NAV ─────────────────────────────────────────────── */
nav{
  position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(11,31,58,0.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}

.nav-inner{
  max-width:1160px;margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 2rem;height:68px;
}

.nav-logo{
  font-family:var(--serif);font-size:1.3rem;color:var(--white);
  text-decoration:none;letter-spacing:0.01em;
  display:flex;align-items:center;gap:0.5rem;
}

.nav-logo span{color:var(--teal-light)}

.nav-links{display:flex;align-items:center;gap:0.25rem;list-style:none}

.nav-links a{
  color:rgba(255,255,255,0.75);text-decoration:none;
  font-size:0.875rem;font-weight:400;padding:0.5rem 0.85rem;
  border-radius:6px;transition:all 0.2s;
}

.nav-links a:hover{color:var(--white);background:rgba(255,255,255,0.08)}

.nav-cta{
  background:var(--teal)!important;color:var(--white)!important;
  font-weight:500!important;padding:0.5rem 1.25rem!important;
}

.nav-cta:hover{background:var(--teal-light)!important}

.nav-hamburger{display:none;flex-direction:column;gap:5px;cursor:pointer;padding:4px}

.nav-hamburger span{width:22px;height:2px;background:white;border-radius:2px;transition:all 0.3s}

.btn-primary{
  background:var(--teal);color:var(--white);
  padding:0.85rem 2rem;border-radius:8px;
  text-decoration:none;font-weight:500;font-size:0.95rem;
  border:none;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:0.5rem;
}

.btn-primary:hover{background:var(--teal-light);transform:translateY(-1px)}

.container{max-width:1160px;margin:0 auto}

/* ── FOOTER ──────────────────────────────────────────── */
footer{background:var(--navy);border-top:1px solid rgba(255,255,255,0.06);padding:3rem 2rem 2rem}

.footer-inner{max-width:1160px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:3rem}

.footer-brand{font-family:var(--serif);font-size:1.2rem;color:var(--white);margin-bottom:0.75rem}

.footer-brand span{color:var(--teal-light)}

.footer-tagline{font-size:0.85rem;color:rgba(255,255,255,0.35);line-height:1.6}

.footer-links{list-style:none;display:flex;flex-direction:column;gap:0.5rem}

.footer-links a{font-size:0.875rem;color:rgba(255,255,255,0.5);text-decoration:none;transition:color 0.2s}

.footer-links a:hover{color:var(--teal-light)}

.footer-bottom{
  max-width:1160px;margin:2rem auto 0;padding-top:1.5rem;
  border-top:1px solid rgba(255,255,255,0.06);
  display:flex;justify-content:space-between;align-items:center;
  font-size:0.8rem;color:rgba(255,255,255,0.25);
}

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

.nav-links a:hover,.nav-links a.active{color:var(--white);background:rgba(255,255,255,0.08)}