/* ==========================================================================
   Daanbi shared chrome — nav, footer, brand tokens, buttons, type scale.
   Loaded on every page AFTER the Tailwind CDN so it wins on the chrome.
   Page bodies stay Tailwind; the fonts come through the tailwind.config
   fontFamily swap, not from here.
   ========================================================================== */

:root{
  --navy:#00113a; --navy-2:#002366; --ink:#131b2e; --bg:#faf8ff;
  --cyan:#4cd6ff; --blue:#b3c5ff; --brand-blue:#2f7bf6; --violet:#8a7bff;
  --electric:#1f3cff;
  --muted:#5b6479; --card:#ffffff; --line:rgba(19,27,46,.08);

  /* brand palette */
  --brand:#157ced;
  --p-blue:#1a6fe9; --p-navy:#091b32; --p-mist:#cbd9e5; --p-grey:#89929b;
  --p-bright:#1a8fec; --p-deep:#082c62; --p-mid:#6097cf; --p-steel:#2b6ec3;
}

/* Headings inside page bodies still carry Tailwind size/weight utilities —
   we only take over the family and the optical letter-spacing. */
h1,h2,h3,.display{font-family:'Clash Display','Manrope',sans-serif;letter-spacing:-.02em}

/* ---------- nav ----------
   Sticky by default so content pages need no top padding. The home hero
   adds .nav--overlay to get the transparent fixed treatment instead. */
.db-nav{position:sticky;top:0;left:0;width:100%;z-index:100;padding:16px 0;
  background:rgba(250,248,255,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  box-shadow:0 1px 0 var(--line);transition:padding .3s,background .3s,box-shadow .3s}
.db-nav.nav--overlay{position:fixed;background:transparent;box-shadow:none;backdrop-filter:none}
.db-nav.nav--overlay.scrolled{padding:8px 0;background:rgba(250,248,255,.85);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.db-nav .wrap{width:min(1180px,92vw);margin:0 auto;
  display:flex;align-items:center;justify-content:space-between;gap:32px}

.db-nav .logo-chip{display:flex;align-items:center;flex:none}
/* Logo-trimmed.png is the lockup with its dead padding cropped off (3.01:1),
   so plain height + w:auto sizes the mark itself — no object-fit crop needed */
.db-nav .logo-chip img{height:64px;width:auto;display:block;transition:height .3s}
.db-nav.scrolled .logo-chip img{height:52px}

.db-nav .navlinks{display:flex;gap:32px;align-items:center}
.db-nav .navlinks a{font-family:'Inter',system-ui,sans-serif;font-size:10px;letter-spacing:.05em;
  text-transform:uppercase;color:#475569;transition:color .3s;white-space:nowrap;text-decoration:none}
.db-nav .navlinks a:hover{color:#1e3a8a}
/* current page */
.db-nav .navlinks a[aria-current="page"]{color:#1e3a8a;font-weight:700;
  border-bottom:2px solid #1e3a8a;padding-bottom:2px}

.db-nav .nav-right{display:flex;align-items:center;gap:16px;flex:none}
.db-nav .nav-cta{background:#002d39;color:#4cd6ff;padding:10px 24px;border-radius:6px;text-decoration:none;
  font-family:'Inter',system-ui,sans-serif;font-size:10px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;transition:opacity .15s,transform .15s}
.db-nav .nav-cta:hover{opacity:.9}
.db-nav .nav-cta:active{transform:scale(.95)}

.db-nav .burger{display:none;background:none;border:0;padding:8px;border-radius:6px;color:#475569;cursor:pointer}
.db-nav #mobile-menu{display:none;border-top:1px solid #e2e8f0;background:rgba(255,255,255,.95);
  padding:16px 4vw;flex-direction:column;gap:16px}
.db-nav #mobile-menu.open{display:flex}
.db-nav #mobile-menu a{color:#334155;font-weight:500;font-size:14px;text-decoration:none}
.db-nav #mobile-menu .mm-cta{background:#002d39;color:#4cd6ff;padding:8px 16px;border-radius:6px;
  font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;width:max-content}

/* nav sitting on a dark hero — the logo art is dark navy, so knock it out to white */
body.ui-dark .db-nav .logo-chip img{filter:brightness(0) invert(1)}
body.ui-dark .db-nav .navlinks a{color:var(--p-mist)}
body.ui-dark .db-nav .navlinks a:hover{color:#fff}
body.ui-dark .db-nav .burger{color:var(--p-mist)}
body.ui-dark .db-nav.scrolled{background:rgba(9,27,50,.85);box-shadow:0 1px 0 rgba(255,255,255,.10)}
body.ui-dark .db-nav .nav-cta{background:var(--brand);color:#fff}
.db-nav .logo-chip img,.db-nav .navlinks a,.db-nav .burger,.db-nav .nav-cta{
  transition:filter .45s ease,color .45s ease,background .45s ease,height .3s}

@media(max-width:1024px){
  .db-nav .navlinks{display:none}
  .db-nav .burger{display:block}
  .db-nav .logo-chip img{height:56px}
}
@media(max-width:600px){.db-nav .logo-chip img{height:46px}}

/* ---------- shared accents ---------- */
.db-tag{color:var(--violet);font-weight:700;font-size:13px;letter-spacing:.14em;text-transform:uppercase}
.db-ilink{color:var(--brand);font-weight:600;text-decoration:none;
  box-shadow:inset 0 -1px 0 rgba(21,124,237,.35);transition:box-shadow .25s,color .25s}
.db-ilink:hover{box-shadow:inset 0 -2px 0 var(--brand)}
.db-btn{display:inline-block;background:linear-gradient(135deg,var(--cyan),#7fe3ff);color:var(--navy);
  font-weight:800;padding:15px 30px;border-radius:999px;text-decoration:none;transition:box-shadow .3s}
.db-btn:hover{box-shadow:0 18px 40px rgba(76,214,255,.4)}

/* ---------- footer ---------- */
.db-foot{padding:52px 0 44px;color:var(--muted);font-size:13px;background:var(--bg)}
.db-foot .wrap{width:min(1180px,92vw);margin:0 auto}
.db-foot a{text-decoration:none;color:inherit}
.db-foot .foot-grid{display:grid;grid-template-columns:1.5fr repeat(4,1fr);gap:32px}
.db-foot .foot-brand .logo-chip img{height:64px;width:auto;display:block}
.db-foot .foot-brand .tagline{font-family:'Clash Display','Manrope',sans-serif;font-weight:700;
  color:var(--navy);font-size:16px;margin:14px 0 8px}
.db-foot .foot-brand p{line-height:1.7}
.db-foot .foot-col{display:flex;flex-direction:column;gap:10px}
.db-foot .foot-col h5{font-family:'Inter',sans-serif;font-size:11px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);margin-bottom:4px}
.db-foot .foot-col a{transition:color .25s}
.db-foot .foot-col a:hover{color:var(--brand)}
.db-foot .foot-base{margin-top:40px;padding-top:22px;border-top:1px solid var(--line);
  font-size:11px;line-height:1.7}
.db-foot .foot-col button{background:none;border:0;padding:0;font:inherit;color:inherit;
  text-align:left;cursor:pointer;transition:color .25s}
.db-foot .foot-col button:hover{color:var(--brand)}
@media(max-width:1024px){.db-foot .foot-grid{grid-template-columns:1fr 1fr 1fr;gap:28px}
  .db-foot .foot-brand{grid-column:1/-1}}
@media(max-width:700px){.db-foot .foot-grid{grid-template-columns:1fr 1fr;gap:28px}}

/* ---------- scroll reveal (opt-in, Tier 2 pages) ---------- */
.js .db-reveal{opacity:0}
@media(prefers-reduced-motion:reduce){
  .js .db-reveal{opacity:1!important;transform:none!important}
  .db-nav *{transition:none!important}
}