:root {
  --ink:#000; --paper:#fff; --mute:#737373; --grid:#e5e5e5;
  --brand-purple:#a855f7; --brand-teal:#0f766e;
  --accent:#0f766e; --gold:#fbbf24; --error:#dc2626;
  --gutter:24px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Inter",Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400}
h1,h2,h3{margin:0;font-weight:900;letter-spacing:-0.04em;line-height:0.95}
p{margin:0}
a{color:var(--ink);text-decoration:none}

.grid12{display:grid;grid-template-columns:repeat(12,1fr);gap:var(--gutter);max-width:1440px;margin:0 auto;padding:0 var(--gutter)}

.topbar{border-bottom:1px solid var(--ink);padding:20px 0;position:sticky;top:0;background:var(--paper);z-index:10}
.topbar .grid12{align-items:center}
.brand{grid-column:1 / span 4;font-weight:900;font-size:18px;letter-spacing:-0.03em}
.brand .dot{
  background:linear-gradient(90deg,var(--brand-purple),var(--brand-teal),var(--brand-purple));
  background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;
  animation:brandShift 6s linear infinite;
}
@keyframes brandShift{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@media(prefers-reduced-motion:reduce){
  .brand .dot{animation:none;color:var(--brand-purple);background:none;-webkit-text-fill-color:var(--brand-purple)}
}
.topnav{grid-column:5 / span 4;display:flex;gap:32px;font-size:13px;font-weight:600}
.topnav a{padding:6px 0;border-bottom:2px solid transparent;transition:color 200ms,border-color 200ms}
.topnav a:hover{color:var(--accent);border-bottom-color:var(--accent)}
.topnav a.active{border-bottom-color:var(--ink)}
.acct-menu{grid-column:9 / span 4;display:flex;align-items:center;justify-content:flex-end;gap:24px;font-size:13px;font-weight:600}
.acct-menu .login{display:inline-block;padding:8px 16px;border:1px solid var(--ink);transition:background 200ms,color 200ms}
.acct-menu .login:hover{background:var(--ink);color:var(--paper)}

.anchor-section{scroll-margin-top:80px}

.footer{padding:32px 0;font-size:11px;text-transform:uppercase;letter-spacing:0.18em;color:var(--mute);border-top:1px solid var(--ink)}
.footer .l{grid-column:1 / span 4}
.footer .c{grid-column:5 / span 4;text-align:center}
.footer .r{grid-column:9 / span 4;text-align:right}

.hamburger{display:none;grid-column:12;justify-self:end;background:none;border:none;cursor:pointer;padding:8px}
.hamburger svg{width:24px;height:24px;stroke:var(--ink);stroke-width:2;fill:none}
.mobile-drawer{display:none;position:fixed;inset:0;z-index:100;background:var(--paper)}
.mobile-drawer.open{display:flex;flex-direction:column}
.mobile-drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px 24px;border-bottom:1px solid var(--ink)}
.mobile-drawer nav{display:flex;flex-direction:column;padding:24px;gap:0}
.mobile-drawer nav a{font-size:18px;font-weight:700;letter-spacing:-0.02em;padding:16px 0;border-bottom:1px solid var(--grid,#e5e5e5)}
.mobile-drawer .drawer-cta{padding:24px;margin-top:auto}
.mobile-drawer .drawer-cta a{display:block;text-align:center;padding:14px;background:var(--ink);color:var(--paper);font-weight:700;font-size:14px;text-transform:uppercase;letter-spacing:0.1em}
.close-btn{background:none;border:none;cursor:pointer;padding:8px}
.close-btn svg{width:24px;height:24px;stroke:var(--ink);stroke-width:2;fill:none}

@media(max-width:880px){
  .topnav,.acct-menu{display:none}
  .hamburger{display:block}
  .brand{grid-column:1/span 12}
}