/* ===================================================================
   LAYOUT — header / nav, footer, shared grids
   =================================================================== */

/* ---------- Floating glass nav ----------
   A floating capsule rather than a full-width bar — closer to how
   visionOS windows sit detached from the edges of the screen. */

.site-header {
  position: fixed;
  top: var(--sp-2);
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 2rem), 1100px);
  z-index: 100;
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64px;
  padding: 0 var(--sp-3);
  border-radius: var(--radius-pill);
}

.nav-logo{

    position:relative;
    overflow:hidden;

    padding:10px 18px;

    border-radius:999px;

    background:
    linear-gradient(
        135deg,
        rgba(125,211,252,.18),
        rgba(59,130,246,.08)
    );

    border:1px solid rgba(255,255,255,.18);

    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);

    transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.nav-logo::before{

    content:"";

    position:absolute;
    inset:0;

    border-radius:inherit;

    background:
    radial-gradient(
        180px circle at var(--mx,50%) var(--my,50%),
        rgba(255,255,255,.22),
        transparent 60%
    );

    opacity:0;

    transition:opacity .25s ease;
}

.nav-logo:hover{

    transform:translateY(-2px);

    box-shadow:
        0 12px 30px rgba(59,130,246,.15),
        inset 0 1px 1px rgba(255,255,255,.35);
}

.nav-logo:hover::before{
    opacity:1;
}



.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  font-size: var(--fs-small);
  font-weight: 500;
  color: var(--text-secondary);
}

.nav-links a {
  transition: color var(--dur-fast) var(--ease-glass);
}
.nav-links-wrap{

    position:relative;

    display:flex;

    align-items:center;
}

.liquid-pill{

    position:absolute;

    left:0;

    top:50%;

    height:42px;

    border-radius:999px;

    transform:translateY(-50%);

    z-index:0;

    opacity:0;

    pointer-events:none;

    backdrop-filter:
    blur(25px)
    saturate(220%);

    -webkit-backdrop-filter:
    blur(25px)
    saturate(220%);

    background:
    linear-gradient(
        180deg,
        rgba(255,255,255,.22),
        rgba(255,255,255,.08)
    );

    border:
    1px solid rgba(255,255,255,.18);

    box-shadow:
        0 10px 25px rgba(0,0,0,.18),
        inset 0 1px 1px rgba(255,255,255,.35);

    transition:
        left .55s cubic-bezier(.22,1,.36,1),
        width .55s cubic-bezier(.22,1,.36,1);

}

.liquid-pill.morphing{

    animation:
    liquidMorph .55s ease;
}

@keyframes liquidMorph{

    0%{

        transform:
        translateY(-50%)
        scaleX(1)
        scaleY(1);
    }

    25%{

        transform:
        translateY(-50%)
        scaleX(1.22)
        scaleY(.78);
    }

    55%{

        transform:
        translateY(-50%)
        scaleX(.92)
        scaleY(1.12);
    }

    100%{

        transform:
        translateY(-50%)
        scaleX(1)
        scaleY(1);
    }
}

.nav-links li{

    position:relative;

    z-index:2;
}

.nav-links a{

    display:block;

    padding:10px 18px;

    border-radius:999px;

    position:relative;

    z-index:2;
}


.nav-links a:hover,
.nav-links a.is-active {
  color: var(--text-primary);
}

.nav-actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.nav-toggle {
  display: none;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: var(--glass-fill-strong);
  border: 1px solid var(--glass-border);
}

.nav-toggle span {
  position: relative;
  width: 16px;
  height: 1px;
  background: var(--text-primary);
}
.nav-toggle span::before,
.nav-toggle span::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 1px;
  background: var(--text-primary);
  left: 0;
  transition: transform var(--dur-fast) var(--ease-glass);
}
.nav-toggle span::before { top: -5px; }
.nav-toggle span::after { top: 5px; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
}

/* ---------- Mobile drawer ---------- */

.mobile-drawer {
  position: fixed;
  inset: calc(var(--nav-h) + 1rem) var(--sp-2) auto var(--sp-2);
  z-index: 99;
  padding: var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  font-size: 1.05rem;
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-fast) var(--ease-glass), transform var(--dur-fast) var(--ease-glass);
}

.mobile-drawer.is-open {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ---------- Page hero spacing (accounts for fixed nav) ---------- */

.page-hero {
  padding-top: calc(var(--nav-h) + var(--sp-6));
  padding-bottom: var(--sp-6);
  min-height: 78vh;
  display: flex;
  align-items: center;
}

/* ---------- Footer ---------- */

.site-footer {
  position: relative;
  padding: var(--sp-6) 0 var(--sp-4);
  border-top: 1px solid var(--glass-border-soft);
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--sp-4);
  padding-bottom: var(--sp-5);
}

.footer-col h4 {
  font-size: var(--fs-small);
  font-family: var(--font-data);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: var(--sp-2);
  font-weight: 500;
}

.footer-col a,
.footer-col p {
  display: block;
  font-size: var(--fs-small);
  color: var(--text-secondary);
  margin-bottom: 0.55rem;
}

.footer-col a:hover {
  color: var(--text-primary);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--glass-border-soft);
  font-size: var(--fs-tiny);
  color: var(--text-muted);
  flex-wrap: wrap;
  gap: var(--sp-2);
}

@media (max-width: 760px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* ---------- Shared grids ---------- */

.grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-5);
  align-items: center;
}

.grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
}

@media (max-width: 900px) {
  .grid-2, .grid-3 {
    grid-template-columns: 1fr;
  }
}

.section-head {
  max-width: 620px;
  margin-bottom: var(--sp-5);
}

.section-head h2 {
  margin-top: var(--sp-1);
  font-size: var(--fs-display-l);
}

.section-head p {
  margin-top: var(--sp-2);
  font-size: var(--fs-body-l);
}