/* ==========================================================================
   Layout: page shell, ambient wash, header, section rhythm, grids, footer
   ========================================================================== */

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}

section{padding:var(--section-y) 0;position:relative}

/* Ambient wash. Fixed, so it stays put while the page scrolls and every
   glass surface has depth behind it to refract. Without this the glass
   sits on flat black and reads as a plain translucent box. */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(760px 540px at 10% 4%,rgba(0,53,84,.60),transparent 68%),
    radial-gradient(700px 520px at 92% 30%,rgba(0,100,148,.26),transparent 66%),
    radial-gradient(900px 620px at 46% 104%,rgba(5,130,202,.18),transparent 68%);
}

.sec-head{margin-bottom:56px;max-width:64ch}
.sec-head .eyebrow{margin-bottom:18px}
.sec-head p{color:var(--ink-2);margin-top:18px;max-width:60ch}

/* ---------- Grids ---------- */
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
@media(max-width:900px){.grid-3{grid-template-columns:1fr}}

/* ---------- Header ----------
   A floating glass bar. It thickens rather than moves once the page has
   scrolled, so the layout underneath never shifts. */
.hdr{
  position:fixed;top:16px;left:50%;transform:translateX(-50%);
  z-index:100;width:calc(100% - 28px);max-width:var(--maxw);
  display:flex;align-items:center;gap:10px;
  padding:9px 9px 9px 22px;border-radius:var(--radius-pill);
  background-color:rgba(0,53,84,.22);
  background-image:var(--glass-fill);
  backdrop-filter:blur(20px) saturate(170%);
  -webkit-backdrop-filter:blur(20px) saturate(170%);
  border:1px solid var(--glass-edge);
  box-shadow:var(--glass-specular);
  transition:box-shadow var(--speed-slow) var(--ease),
             border-color var(--speed-slow) var(--ease),
             background-color var(--speed-slow) var(--ease);
}
.hdr.stuck{
  background-color:rgba(0,53,84,.42);
  border-color:var(--glass-edge-hi);
  box-shadow:var(--glass-specular),0 16px 44px rgba(2,10,16,.5);
}

.brand{
  font-family:var(--font-display);
  font-weight:400;text-transform:uppercase;
  font-size:1.15rem;letter-spacing:.02em;
  text-decoration:none;white-space:nowrap;
  transition:opacity var(--speed) var(--ease);
}
.brand span{color:var(--accent-ink)}
.brand:hover{opacity:.82}

/* ---------- Nav ----------
   Each link carries its own hover pill. .is-current is set by nav.js as
   the matching section passes through the viewport. */
.nav{display:flex;gap:2px;margin-left:auto}
.nav a{
  position:relative;
  font-size:.85rem;font-weight:var(--weight-medium);
  color:var(--ink-2);text-decoration:none;
  padding:9px 15px;border-radius:var(--radius-pill);
  transition:color var(--speed) var(--ease);
}
.nav a::before{
  content:'';position:absolute;inset:0;border-radius:inherit;z-index:-1;
  background:rgba(255,255,255,.07);
  border:1px solid transparent;
  opacity:0;transform:scale(.86);
  transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease-soft),border-color var(--speed) var(--ease);
}
.nav a:hover{color:var(--ink)}
.nav a:hover::before{opacity:1;transform:scale(1)}
.nav a.is-current{color:var(--ink)}
.nav a.is-current::before{
  opacity:1;transform:scale(1);
  background:rgba(0,166,251,.14);border-color:var(--line-accent);
}

.hdr-cta{
  position:relative;overflow:hidden;isolation:isolate;
  font-size:.85rem;font-weight:var(--weight-strong);text-decoration:none;color:#fff;
  padding:11px 21px;border-radius:var(--radius-pill);background:var(--grad-accent);
  white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 6px 18px rgba(0,166,251,.22);
  transition:transform var(--speed) var(--ease),box-shadow var(--speed) var(--ease);
}
.hdr-cta:hover{transform:translateY(-2px);box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 12px 28px rgba(0,166,251,.36)}

/* Icon button, used for the mobile menu trigger. */
.tgl{
  width:38px;height:38px;flex:none;border-radius:var(--radius-pill);cursor:pointer;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink-2);
  display:grid;place-items:center;
  transition:color var(--speed) var(--ease),border-color var(--speed) var(--ease),background var(--speed) var(--ease);
}
.tgl:hover{color:var(--ink);border-color:var(--line-strong);background:rgba(255,255,255,.09)}
.tgl svg{width:17px;height:17px}

.menu-btn{display:none}

@media(max-width:900px){
  .nav{
    position:absolute;top:calc(100% + 10px);left:0;right:0;
    flex-direction:column;gap:2px;padding:10px;
    border:1px solid var(--glass-edge);border-radius:22px;
    background-color:rgba(4,20,29,.86);
    background-image:var(--glass-fill);
    backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);
    box-shadow:var(--glass-specular),var(--glass-shadow);
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity var(--speed) var(--ease),transform var(--speed) var(--ease-soft),visibility var(--speed);
  }
  .nav.open{opacity:1;visibility:visible;transform:translateY(0)}
  .nav a{padding:13px 16px}
  .menu-btn{display:grid;margin-left:auto}
  .hdr-cta{display:none}
}

/* ---------- Footer ---------- */
footer{border-top:1px solid var(--line);padding:48px 0;position:relative}
footer::before{
  content:'';position:absolute;top:-1px;left:0;width:min(240px,40%);height:1px;
  background:linear-gradient(90deg,var(--fresh-sky),transparent);
}
.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;align-items:center}
.foot p{font-size:.84rem;color:var(--ink-3)}
.foot a{color:var(--ink-2);text-decoration:none;font-size:.84rem;transition:color var(--speed) var(--ease)}
.foot a:hover{color:var(--accent-ink)}

@media(max-width:760px){
  :root{--section-y:88px}
}