@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

/* ═══════════════════════════════════════════════════════════════════════════
   ASN Intelligence — shared brand layer
   ───────────────────────────────────────────────────────────────────────────
   One visual identity across every surface a person can land on:
   asnintelligencellc.com · asncheck.com · portal.asnintelligencellc.com · ASN Connect.

   Canonical source is the main site (asnintelligencellc.com). Tokens, the type
   stack, the logo mark and the button language are copied from it verbatim so
   the surfaces cannot drift apart again.

   Everything here is namespaced `asn-` on purpose. These pages each carry their
   own inline <style> with their own :root tokens, and some of them use the same
   token NAME for the opposite role (grader.html sets --ink to white as its page
   background). Overriding those tokens globally would invert pages at random,
   so this file never touches them — it only adds chrome of its own.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  /* canonical palette — read by the chrome below, and available to pages that want it */
  --asn-ink:#05070E;
  --asn-text:#0A0E14;
  --asn-text2:#333D4D;
  --asn-muted:#5F6B7E;
  --asn-faint:#9AA4B5;
  --asn-bg:#FFFFFF;
  --asn-bg2:#F5F7FB;
  --asn-bg3:#EDF1F7;
  --asn-blue:#2563EB;
  --asn-blue2:#1D4ED8;
  --asn-blue3:#1E40AF;
  --asn-navy:#15315C;
  --asn-border:rgba(10,14,20,0.09);
  --asn-border-lt:rgba(255,255,255,0.14);
  --asn-font:'DM Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* the main site sets Aeonik first and falls back to DM Sans; only DM Sans is
   actually loaded, so this matches what a visitor really sees there */
body{ font-family:var(--asn-font); }
.asn-bar, .asn-foot, .asn-btn{ font-family:var(--asn-font); }

/* ── top bar ────────────────────────────────────────────────────────────── */
.asn-bar{
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  padding:15px clamp(18px,4vw,44px);
  background:var(--asn-ink); color:#fff;
  position:relative; z-index:40; box-sizing:border-box; width:100%;
}
.asn-bar-logo{ display:flex; align-items:center; gap:11px; text-decoration:none; }
.asn-bar-logo svg{ width:28px; height:28px; flex-shrink:0; }
.asn-wordmark{
  font-size:15px; font-weight:700; letter-spacing:.055em; text-transform:uppercase;
  color:#fff; white-space:nowrap;
}
.asn-wordmark em{ font-style:normal; color:#6E9BFF; font-weight:600; }

.asn-bar-links{ display:flex; align-items:center; gap:clamp(14px,2.4vw,30px); margin-left:auto; }
.asn-bar-links a{
  color:rgba(255,255,255,.74); text-decoration:none; font-size:14px; font-weight:500;
  letter-spacing:.005em; transition:color .22s ease; white-space:nowrap;
}
.asn-bar-links a:hover{ color:#fff; }
@media(max-width:820px){ .asn-bar-links a.asn-hide-sm{ display:none; } }
@media(max-width:560px){ .asn-bar-links{ gap:12px; } .asn-wordmark{ font-size:13px; } }

/* the white pill with the faint conic halo — the main site's primary CTA */
.asn-btn{
  position:relative; isolation:isolate;
  display:inline-flex; align-items:center; gap:9px;
  background:#FFFFFF; color:#0E1A3A;
  padding:11px 22px; border-radius:100px; border:none; cursor:pointer;
  font-size:14px; font-weight:600; letter-spacing:.1px; text-decoration:none;
  box-shadow:0 2px 12px rgba(255,255,255,.28), 0 4px 20px rgba(200,210,255,.14);
  transition:transform .2s ease, box-shadow .25s ease;
}
.asn-btn::before{
  content:""; position:absolute; inset:-2px; border-radius:inherit; z-index:-1;
  background:conic-gradient(#cfe0ff,#d6f1ff,#e8dcff,#ffdcee,#dbf6ec,#fff5d4,#ffe2d4,#cfe0ff);
  filter:blur(8px); opacity:.22; transition:opacity .25s ease;
}
.asn-btn:hover{ transform:translateY(-1px);
  box-shadow:0 3px 16px rgba(255,255,255,.38), 0 5px 24px rgba(200,210,255,.22); }
.asn-btn:hover::before{ opacity:.34; }
.asn-btn:focus-visible{ outline:2px solid #6E9BFF; outline-offset:3px; }
.asn-bar-links a.asn-btn,
.asn-bar-links a.asn-btn:hover{ color:#0E1A3A; }

/* ── footer ─────────────────────────────────────────────────────────────── */
.asn-foot{
  background:var(--asn-ink); color:rgba(255,255,255,.62);
  padding:44px clamp(18px,4vw,44px) 26px; margin-top:72px;
  font-size:14px; line-height:1.65; box-sizing:border-box; width:100%;
}
.asn-foot-cols{
  max-width:1180px; margin:0 auto;
  display:grid; grid-template-columns:1.7fr 1fr 1fr 1fr; gap:38px;
}
@media(max-width:960px){ .asn-foot-cols{ grid-template-columns:1fr 1fr; gap:30px; } }
@media(max-width:620px){ .asn-foot-cols{ grid-template-columns:1fr; gap:26px; } }
.asn-foot-brand{ display:flex; align-items:center; gap:11px; margin-bottom:13px; }
.asn-foot-brand svg{ width:26px; height:26px; }
.asn-foot p{ margin:0; max-width:34ch; color:rgba(255,255,255,.55); font-size:13.5px; }
.asn-foot h5{
  font-size:11px; font-weight:700; letter-spacing:.15em; text-transform:uppercase;
  color:rgba(255,255,255,.42); margin:0 0 13px;
}
.asn-foot-col a{
  display:block; color:rgba(255,255,255,.72); text-decoration:none;
  font-size:14px; margin-bottom:9px; transition:color .22s ease;
}
.asn-foot-col a:hover{ color:#fff; }
.asn-foot-bar{
  max-width:1180px; margin:32px auto 0; padding-top:18px;
  border-top:1px solid var(--asn-border-lt);
  display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap;
  font-size:12.5px; color:rgba(255,255,255,.42);
}
.asn-foot-bar a{ color:rgba(255,255,255,.6); text-decoration:none; }
.asn-foot-bar a:hover{ color:#fff; }
.asn-foot-fine{
  max-width:1180px; margin:14px auto 0; font-size:11.5px; line-height:1.6;
  color:rgba(255,255,255,.30);
}

@media (prefers-reduced-motion: reduce){
  .asn-btn, .asn-btn::before, .asn-bar-links a, .asn-foot-col a{ transition:none; }
  .asn-btn:hover{ transform:none; }
}