.site-header { position: fixed; inset: 0 0 auto; height: 82px; padding: 0 clamp(24px, 4vw, 68px); z-index: 40; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-bottom: 1px solid transparent; transition: height .35s ease, background .35s ease, border-color .35s ease, backdrop-filter .35s ease, box-shadow .35s ease; }
.site-header.scrolled { height: 68px; background: rgba(246,247,248,.9); border-color: var(--line); backdrop-filter: blur(14px); box-shadow: 0 10px 28px rgba(20,32,44,.08); }
.brand { width: 210px; height: 44px; overflow: hidden; display: flex; align-items: center; }
.brand img { width: 206px; height: auto; object-fit: contain; object-position: left center; }
.desktop-nav { display: flex; align-items: center; gap: 24px; }
.desktop-nav a { position: relative; isolation: isolate; font-size: 14px; font-weight: 740; letter-spacing: .01em; color: #0e1116; text-shadow: 0 1px 0 rgba(255,255,255,.55), 0 0 10px rgba(17,21,26,.08); text-transform: capitalize; padding: 8px 10px; border-radius: 999px; overflow: hidden; transition: color .25s ease, transform .25s ease; }
.desktop-nav a::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, rgba(47,128,237,.16), rgba(0,168,184,.14)); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; z-index: -1; }
.desktop-nav a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 4px; height: 2px; border-radius: 2px; background: linear-gradient(96deg, var(--blue), var(--cyan)); transform: scaleX(0); transform-origin: left; transition: transform .28s ease; }
.desktop-nav a:hover, .desktop-nav a:focus-visible { color: #090b10; transform: translateY(-1px); }
.desktop-nav a:hover::before, .desktop-nav a:focus-visible::before, .desktop-nav a:hover::after, .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.nav-cta { justify-self: end; display: inline-flex; align-items: center; gap: 8px; font-family: var(--font); font-size: 13px; font-weight: 740; letter-spacing: .01em; color: #0e1116; text-shadow: 0 1px 0 rgba(255,255,255,.5); border: 1px solid rgba(20,32,44,.22); border-radius: 999px; padding: 10px 18px; background: rgba(255,255,255,.68); transition: border-color .25s ease, background .25s ease, box-shadow .25s ease, transform .25s ease; }
.nav-cta:hover, .nav-cta:focus-visible { border-color: rgba(20,32,44,.38); background: linear-gradient(120deg, rgba(47,128,237,.15), rgba(0,168,184,.13)); box-shadow: 0 10px 24px rgba(20,32,44,.12); transform: translateY(-1px); }
.nav-cta span { color: var(--blue-deep); }
.menu-toggle, .mobile-menu { display: none; }

.section-pad { padding: clamp(90px, 11vw, 180px) clamp(24px, 7vw, 128px); }
.section-index { margin-bottom: clamp(70px, 8vw, 120px); display: flex; align-items: baseline; gap: 14px; color: var(--muted); }
.section-index b { font-family: var(--display); font-size: 17px; font-weight: 600; color: var(--blue); letter-spacing: -.02em; }
.section-index span { align-self: center; width: 40px; height: 1px; background: var(--line); }
.section-index em { font-style: normal; font-family: var(--font); font-size: 15px; font-weight: 500; letter-spacing: .01em; color: var(--muted); }
.section-index.light { color: rgba(7,10,12,.6); }
.section-index.light b { color: var(--blue-deep); }
.section-index.light span { background: var(--line-dark); }
.section-index.light em { color: rgba(7,10,12,.6); }

.site-footer { padding: 90px clamp(24px, 7vw, 128px) 26px; background: #f3f5f7; border-top: 1px solid var(--line); }
.footer-brand { display: flex; flex-direction: column; gap: 8px; }
.footer-brand img { width: 230px; height: auto; object-fit: contain; }
.footer-brand p { color: var(--muted); font-size: 13px; }
.footer-links { margin: -58px 0 90px auto; width: min(560px, 50%); display: grid; grid-template-columns: 1fr 1fr; }
.footer-links div { display: grid; gap: 13px; }
.footer-links small { margin-bottom: 8px; color: #69747e; font: 400 10px var(--mono); text-transform: uppercase; letter-spacing: .1em; }
.footer-links a { font-size: 14px; color: #2f3a43; transition: color .2s; }
.footer-links a:hover { color: #0f151c; }
.footer-bottom { padding-top: 22px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; color: #5f6b75; font: 400 10px var(--mono); text-transform: uppercase; letter-spacing: .08em; }