/* Shared OneChain navigation and footer styles. */
  .sc-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; height: 64px;
    background: rgba(255, 255, 255, 0.88) !important;
    -webkit-backdrop-filter: saturate(1.6) blur(18px);
    backdrop-filter: saturate(1.6) blur(18px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.45);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.7),
      0 8px 28px rgba(10, 22, 40, 0.06);
    font-family: 'Inter', -apple-system, sans-serif;
    transition: background .25s ease, border-color .25s ease, box-shadow .25s ease; }
  .sc-nav.scrolled {
    background: rgba(255, 255, 255, 0.95) !important;
    border-bottom-color: rgba(10, 22, 40, 0.08);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.8),
      0 10px 30px rgba(10, 22, 40, 0.08);
  }
  .sc-nav-inner { max-width: 1280px; height: 100%; margin: 0 auto; padding: 0 24px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .sc-logo img { height: 36px; width: auto; display: block; }
  .sc-menu { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
  .sc-menu > li { position: relative; }
  .sc-menu-btn { display: inline-flex; align-items: center; gap: 6px; border: none; background: none;
    cursor: pointer; font: 500 14px/1 'Inter', sans-serif; color: var(--oc-blue, #14a4bc);
    padding: 10px 14px; border-radius: 8px; transition: color .15s, background .15s; }
  .sc-menu-btn:hover, .sc-menu > li.sc-open > .sc-menu-btn { color: var(--oc-blue-deep, #0d7d91); background: rgba(10,22,40,0.04); }
  .sc-menu-btn .sc-caret { transition: transform .2s; }
  .sc-menu > li.sc-open .sc-caret { transform: rotate(180deg); }
  .sc-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px);
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: saturate(1.5) blur(16px);
    backdrop-filter: saturate(1.5) blur(16px);
    border: 1px solid rgba(255,255,255,0.55); border-radius: 14px;
    box-shadow: 0 24px 64px rgba(10,22,40,0.14), 0 4px 16px rgba(10,22,40,0.06);
    padding: 20px; display: flex; gap: 28px;
    opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
  .sc-menu > li.sc-open > .sc-panel { opacity: 1; visibility: visible; pointer-events: auto;
    transform: translateX(-50%) translateY(0); }
  .sc-col { min-width: 230px; }
  .sc-col-title { font: 600 11px/1 'Inter', sans-serif; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--sc-cyan); margin: 4px 8px 12px; white-space: nowrap; }
  .sc-item { display: flex; gap: 0; align-items: flex-start; padding: 10px 8px; border-radius: 10px;
    text-decoration: none; color: inherit; transition: background .15s; }
  .sc-item:hover { background: rgba(10,22,40,0.045); }
  .sc-item-icon { display: none !important; }
  .sc-item-name { font: 600 14px/1.3 'Inter', sans-serif; color: var(--sc-ink); }
  .sc-item-desc { font: 400 12.5px/1.45 'Inter', sans-serif; color: var(--sc-muted); margin-top: 2px; }
  .sc-actions { display: flex; align-items: center; gap: 10px; }
  .sc-btn-ghost { font: 600 14px/1 'Inter', sans-serif; color: var(--sc-muted); text-decoration: none;
    padding: 8px 16px; min-height: 36px; display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid rgba(10,22,40,0.12);
    border-radius: 8px; transition: color .15s, background .15s, border-color .15s; }
  .sc-btn-ghost:hover { color: var(--sc-ink); background: rgba(10,22,40,0.04); border-color: rgba(10,22,40,0.18); }
  .sc-btn-contact {
    color: var(--oc-blue, #14a4bc);
    border-color: rgba(20, 164, 188, 0.35);
    background: #fff;
  }
  .sc-btn-contact:hover {
    color: var(--oc-blue-deep, #0d7d91);
    background: rgba(20, 164, 188, 0.06);
    border-color: rgba(20, 164, 188, 0.5);
  }
  .sc-btn-primary { font: 600 14px/1 'Inter', sans-serif; color: var(--oc-surface, #fff); background: var(--oc-btn-bg);
    text-decoration: none; padding: 8px 16px; min-height: 36px; display: inline-flex; align-items: center; gap: 8px;
    border: none;
    border-radius: 8px; transition: background .2s, transform .2s; box-shadow: 0 8px 24px rgba(20,164,188,.28); }
  .sc-btn-primary:hover { background: var(--oc-btn-bg-hover); transform: translateY(-1px); }
  .sc-burger { display: none; border: none; background: none; cursor: pointer; font-size: 22px;
    color: var(--sc-ink); padding: 8px; }
  /* mobile */
  @media (max-width: 1023px) {
    .sc-menu, .sc-actions .sc-btn-ghost, .sc-actions .sc-btn-primary { display: none; }
    .sc-burger { display: block; }
    .sc-mobile { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; z-index: 999; overflow-y: auto;
      background: rgba(255, 255, 255, 0.86);
      -webkit-backdrop-filter: saturate(1.5) blur(20px);
      backdrop-filter: saturate(1.5) blur(20px);
      padding: 16px 24px 48px; display: none; font-family: 'Inter', sans-serif; }
    .sc-mobile.sc-open { display: block; }
    .sc-mgroup { border-bottom: 1px solid var(--sc-border); padding: 14px 0; }
    .sc-mgroup > div:first-child { font: 700 11px/1 'Inter', sans-serif; letter-spacing: 1.6px;
      text-transform: uppercase; color: var(--sc-cyan); }
    .sc-mgroup a { display: block; padding: 12px 0 0 12px; font: 600 14px/1.4 'Inter', sans-serif;
      color: var(--sc-ink); text-decoration: none; }
  }
  @media (min-width: 1024px) { .sc-mobile { display: none !important; } }
  body > nav:not(.sc-nav) { display: none !important; }
  /* footer — gray (var(--oc-text)), reverse-white logo */
  .sc-footer {
    background: var(--oc-footer-bg);
    color: var(--oc-footer-text);
    border-top: none;
    font-family: 'Inter', -apple-system, sans-serif;
  }
  .sc-footer-inner { max-width: 1280px; margin: 0 auto; padding: 64px 24px 32px; }
  .sc-footer-grid { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 40px; margin-bottom: 56px; align-items: start; }
  .sc-footer-brand > img:not(.sc-footer-iso) {
    display: block;
    height: 52px; width: auto;
    /* Logo PNG has ~25% transparent top pad — pull up so artwork aligns with menu titles */
    margin-top: -13px;
    /* Teal icon stays; CHAIN is reverse-white via images/brand/onchain-logo-white.png */
    filter: none;
  }
  .sc-footer-brand p {
    font-size: 14px;
    color: var(--oc-footer-text);
    margin: 14px 0 0; line-height: 1.6; max-width: 300px;
  }
  .sc-footer-brand .sc-footer-iso {
    margin-top: 20px;
    height: 80px;
    width: 80px;
    display: block;
    opacity: 1;
    object-fit: contain;
    filter: none;
    image-rendering: auto;
  }
  .sc-footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
  }
  .sc-footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.72);
    transition: color 0.2s ease;
  }
  .sc-footer-social a:hover {
    color: var(--oc-surface);
  }
  .sc-footer-bottom-left {
    display: flex;
    align-items: center;
    gap: 20px;
  }
  .sc-footer-iso {
    width: 80px;
    height: 80px;
    display: block;
    opacity: 1;
    object-fit: contain;
    image-rendering: auto;
  }
  .sc-fcol h5 {
    font: 600 11px/1 'Inter', sans-serif; letter-spacing: 1.6px; text-transform: uppercase;
    color: var(--oc-blue-light, #3cbdd2); margin: 0 0 18px;
  }
  .sc-fcol ul { list-style: none; margin: 0; padding: 0; }
  .sc-fcol li { margin-bottom: 12px; }
  .sc-fcol a {
    font-size: 14px;
    color: var(--oc-footer-text);
    text-decoration: none; transition: color .15s;
  }
  .sc-fcol a:hover { color: var(--oc-footer-text-strong); }
  .sc-fcol--contact { min-width: 0; }
  .sc-fcontact-address {
    display: block;
    font-size: 14px;
    line-height: 1.55;
    color: var(--oc-footer-text);
  }
  .sc-footer-bottom {
    border-top: 1px solid var(--oc-footer-border, rgba(255,255,255,0.12));
    padding-top: 24px; display: flex;
    justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
  }
  .sc-footer-bottom p {
    font-size: 13px;
    color: var(--oc-footer-muted, rgba(255,255,255,0.48));
    margin: 0;
  }
  .sc-footer-tagline {
    font: 500 14px/1 'Inter', sans-serif;
    color: var(--oc-footer-accent);
  }
  @media (max-width: 1023px) { .sc-footer-grid { grid-template-columns: 1fr 1fr; } }
  body > footer:not(.sc-footer) { display: none !important; }
  /* ===== FX: spotlight hover on cards ===== */
  .sc-spot { position: relative; }
  .sc-spot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
    transition: opacity .35s ease; pointer-events: none; z-index: 1;
    background: radial-gradient(260px circle at var(--sc-mx, 50%) var(--sc-my, 50%),
      var(--sc-spot-color, rgba(1,137,181,0.13)), transparent 62%); }
  .sc-spot:hover::after { opacity: 1; }
  .sc-spot-dark { --sc-spot-color: rgba(20,164,188,0.16); }
  /* FX: gradient shimmer sweep on primary headings when revealed */
  @keyframes sc-underline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  /* FX: scroll progress bar */
  .sc-progress { position: fixed; top: 0; left: 0; height: 2.5px; width: 100%; z-index: 2000;
    transform-origin: 0 50%; transform: scaleX(0); pointer-events: none;
    background: linear-gradient(90deg, var(--oc-blue-deep), var(--oc-blue), var(--oc-blue-light)); }
  @media (prefers-reduced-motion: reduce) {
    .sc-spot::after { display: none; }
    .sc-progress { display: none; }
  }

/* Shared brand typography — Brand Guideline: Inter Bold headlines, Inter body */
h1, h2, h3, h4 {
  font-family: var(--font-brand, 'Inter', sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
}
body { font-family: var(--font-body, 'Inter', 'Noto Sans TC', sans-serif); }