/*
 * CLAWOLF Public Identity 2026
 * Bright blue / white / near-black system. Purple/violet is intentionally removed.
 */

:root {
  --d1r2-surface-0: #f7fbff;
  --d1r2-surface-1: #eef6ff;
  --d1r2-surface-2: #e4effc;
  --d1r2-surface-paper: #fbfdff;
  --d1r2-surface-cinema: #020713;
  --d1r2-surface-cinema-mid: #07162f;
  --d1r2-ink: #061328;
  --d1r2-ink-soft: #10223d;
  --d1r2-ink-muted: #3d516d;
  --d1r2-ink-faint: #5e7088;
  --d1r2-cyan: #27b8ff;
  --d1r2-cobalt: #155ee8;
  --d1r2-violet: #0b3b91;
  --d1r2-accent-eyebrow: #0d56cf;

  --art-v3-pearl: #f7fbff;
  --art-v3-pearl-deep: #edf5ff;
  --art-v3-glass: rgba(255, 255, 255, 0.84);
  --art-v3-cyan: #27b8ff;
  --art-v3-cobalt: #155ee8;
  --art-v3-violet: #0b3b91;
  --art-v3-ink: #061328;
  --art-v3-muted: #465b76;
  --art-v3-spectrum: linear-gradient(118deg, #27b8ff 0%, #155ee8 52%, #071b42 100%);
  --art-v3-spectrum-soft: linear-gradient(118deg, rgba(39, 184, 255, 0.56), rgba(21, 94, 232, 0.42) 54%, rgba(7, 27, 66, 0.34));
  --art-v3-spectrum-gold: linear-gradient(118deg, rgba(39, 184, 255, 0.72), rgba(21, 94, 232, 0.7) 52%, rgba(7, 27, 66, 0.68));
  --art-v3-frame-fill: rgba(248, 252, 255, 0.82);
  --art-v3-frame-fill-strong: rgba(239, 247, 255, 0.92);
  --art-v3-frame-shadow: 0 28px 76px rgba(11, 54, 124, 0.12), 0 10px 28px rgba(39, 184, 255, 0.08);
}

/* Light public surfaces: textured, bright, technical, never purple. */
body.d1r2-site:not(.cnda-premium),
body.art-v3-legal-page,
body.strategy-page:not(.cnda-premium) {
  background-color: #f7fbff !important;
  background-image:
    radial-gradient(52rem 34rem at 8% 4%, rgba(39, 184, 255, 0.14), transparent 66%),
    radial-gradient(58rem 36rem at 94% 8%, rgba(21, 94, 232, 0.11), transparent 68%),
    radial-gradient(circle at 1px 1px, rgba(10, 66, 155, 0.09) 1px, transparent 1.15px),
    linear-gradient(145deg, #fcfeff 0%, #f3f8ff 52%, #eaf3ff 100%) !important;
  background-size: auto, auto, 28px 28px, auto !important;
  color: #061328;
}

body.d1r2-site:not(.cnda-premium) main,
body.strategy-page:not(.cnda-premium) main,
body.art-v3-legal-page main {
  background: transparent !important;
}

/* Header: larger brand, confident typography, bright blue edge. */
.d1r2-header {
  top: 0 !important;
  padding: 0.72rem clamp(0.65rem, 2vw, 1.5rem) !important;
  min-height: 5.5rem !important;
  background: rgba(247, 251, 255, 0.76) !important;
  backdrop-filter: blur(24px) saturate(165%) !important;
}

.d1r2-header__bar {
  min-height: 5rem !important;
  padding: 0.6rem clamp(1rem, 2vw, 1.5rem) !important;
  border: 1px solid transparent !important;
  border-radius: 1.3rem !important;
  background:
    linear-gradient(rgba(255, 255, 255, 0.93), rgba(239, 247, 255, 0.9)) padding-box,
    linear-gradient(112deg, rgba(39, 184, 255, 0.72), rgba(21, 94, 232, 0.42) 58%, rgba(7, 27, 66, 0.26)) border-box !important;
  box-shadow: 0 18px 54px rgba(7, 37, 86, 0.12), 0 0 34px rgba(39, 184, 255, 0.08) !important;
}

.d1r2-header .d1r2-brand,
.d1r2-header .d1r2-brand picture {
  height: 3rem !important;
  max-height: 3rem !important;
}

.d1r2-header .d1r2-brand img[data-d1r2-logo="header"] {
  width: auto !important;
  height: 3rem !important;
  max-width: min(16.5rem, 34vw) !important;
  max-height: 3rem !important;
  object-fit: contain !important;
}

.d1r2-nav {
  gap: clamp(0.82rem, 1.35vw, 1.35rem) !important;
  font-family: var(--d1r2-font-ui), Inter, system-ui, sans-serif !important;
}

.d1r2-nav a:not(.d1r2-nav-cta) {
  position: relative;
  min-height: 3rem !important;
  padding: 0.35rem 0.06rem !important;
  color: #10223d !important;
  font-family: var(--d1r2-font-ui), Inter, system-ui, sans-serif !important;
  font-size: clamp(0.96rem, 0.82vw, 1.05rem) !important;
  font-weight: 740 !important;
  letter-spacing: -0.015em;
  text-decoration: none !important;
}

.d1r2-nav a:not(.d1r2-nav-cta)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0.35rem;
  height: 2px;
  border-radius: 999px;
  background: #155ee8;
  transition: right 0.2s ease;
}

.d1r2-nav a:not(.d1r2-nav-cta):hover,
.d1r2-nav a:not(.d1r2-nav-cta):focus-visible,
.d1r2-nav a:not(.d1r2-nav-cta)[aria-current="page"] {
  color: #0b54ca !important;
}

.d1r2-nav a:not(.d1r2-nav-cta):hover::after,
.d1r2-nav a:not(.d1r2-nav-cta):focus-visible::after,
.d1r2-nav a:not(.d1r2-nav-cta)[aria-current="page"]::after {
  right: 0;
}

.d1r2-nav .d1r2-nav-cta {
  min-height: 3.15rem !important;
  padding: 0.65rem 1.05rem !important;
  border: 1px solid rgba(255, 255, 255, 0.28) !important;
  border-radius: 0.75rem !important;
  background: linear-gradient(135deg, #0b3c96, #155ee8 58%, #2d8cff) !important;
  box-shadow: 0 12px 30px rgba(21, 94, 232, 0.24) !important;
  color: #ffffff !important;
  font-family: var(--d1r2-font-ui), Inter, system-ui, sans-serif !important;
  font-size: clamp(0.96rem, 0.82vw, 1.04rem) !important;
  font-weight: 760 !important;
  letter-spacing: -0.01em;
}

.d1r2-nav a[href="/cnda"] img,
.cnda-nav-mark {
  height: 2.55rem !important;
  max-width: 8.4rem !important;
  width: auto !important;
  object-fit: contain !important;
  mix-blend-mode: multiply;
}

.d1r2-menu-btn {
  width: 3rem !important;
  height: 3rem !important;
  border: 1px solid rgba(21, 94, 232, 0.22) !important;
  border-radius: 0.8rem !important;
  background: #ffffff !important;
  box-shadow: 0 8px 22px rgba(7, 37, 86, 0.08);
}

.d1r2-drawer {
  background:
    radial-gradient(circle at 1px 1px, rgba(21, 94, 232, 0.08) 1px, transparent 1.1px) 0 0 / 26px 26px,
    linear-gradient(160deg, #ffffff, #eef6ff) !important;
  border-left-color: rgba(21, 94, 232, 0.18) !important;
}

.d1r2-drawer a {
  color: #10223d !important;
  background: transparent !important;
  border-bottom-color: rgba(21, 94, 232, 0.1) !important;
  font-family: var(--d1r2-font-ui), Inter, system-ui, sans-serif !important;
  font-weight: 680 !important;
}

/* Light-section texture and hierarchy. */
body:not(.cnda-premium) .d1r2-scene,
body:not(.cnda-premium) .d1r2-chapter,
body.strategy-page:not(.cnda-premium) .strategy-section {
  background:
    radial-gradient(circle at 1px 1px, rgba(21, 94, 232, 0.055) 1px, transparent 1.1px) 0 0 / 30px 30px,
    rgba(251, 253, 255, 0.5) !important;
  border-color: rgba(21, 94, 232, 0.1) !important;
}

body:not(.cnda-premium) .d1r2-scene--paper,
body:not(.cnda-premium) .d1r2-chapter--architecture,
body:not(.cnda-premium) .d1r2-chapter--runtime,
body:not(.cnda-premium) .d1r2-chapter--decision,
body.strategy-page:not(.cnda-premium) .strategy-section--soft {
  background:
    radial-gradient(34rem 22rem at 84% 12%, rgba(39, 184, 255, 0.09), transparent 70%),
    radial-gradient(circle at 1px 1px, rgba(7, 61, 148, 0.06) 1px, transparent 1.1px) 0 0 / 30px 30px,
    rgba(237, 246, 255, 0.7) !important;
}

body:not(.cnda-premium) .d1r2-hero__prism {
  background: radial-gradient(circle, rgba(39, 184, 255, 0.19) 0%, rgba(21, 94, 232, 0.12) 52%, transparent 74%) !important;
}

body:not(.cnda-premium) .d1r2-badge {
  background: #e4f1ff !important;
  color: #0b54ca !important;
  border: 1px solid rgba(21, 94, 232, 0.14);
}

body:not(.cnda-premium) .d1r2-evidence-chain__rail {
  background: linear-gradient(90deg, #27b8ff, #155ee8 58%, #071b42) !important;
}

/* Refractive elements become blue-spectrum, with cleaner white panels. */
body:not(.cnda-premium) .art-v3-frame,
body:not(.cnda-premium) .art-v3-title-frame,
body:not(.cnda-premium) .art-v3-copy-frame,
body:not(.cnda-premium) .art-v3-visual-frame,
body:not(.cnda-premium) .art-v3-spectrum-rail,
body:not(.cnda-premium) .d1r2-semantic-card,
body:not(.cnda-premium) .d1r2-route-card,
body:not(.cnda-premium) .d1r2-investor-panel,
body:not(.cnda-premium) .d1r2-explore-card,
body:not(.cnda-premium) .d1r2-fact,
body:not(.cnda-premium) .d1r2-marketplace-item,
body:not(.cnda-premium) .d1r2-growth-lab .card,
body:not(.cnda-premium) .d1r2-route-note,
body:not(.cnda-premium) .art-v3-legal-panel,
body:not(.cnda-premium) .art-v3-legal-toc,
body:not(.cnda-premium) .strategy-chain__step,
body:not(.cnda-premium) .strategy-product,
body:not(.cnda-premium) .strategy-better,
body:not(.cnda-premium) .strategy-lane,
body:not(.cnda-premium) .strategy-validation {
  background:
    linear-gradient(rgba(255, 255, 255, 0.96), rgba(239, 247, 255, 0.9)) padding-box,
    var(--art-v3-spectrum-soft) border-box !important;
  border-color: transparent !important;
  box-shadow: 0 18px 46px rgba(7, 46, 111, 0.09), 0 0 26px rgba(39, 184, 255, 0.055) !important;
}

body:not(.cnda-premium) .art-v3-frame::before,
body:not(.cnda-premium) .art-v3-title-frame::before,
body:not(.cnda-premium) .art-v3-visual-frame::before {
  background:
    radial-gradient(circle at 18% 22%, rgba(39, 184, 255, 0.18), transparent 42%),
    radial-gradient(circle at 82% 76%, rgba(21, 94, 232, 0.13), transparent 44%) !important;
}

body:not(.cnda-premium) .art-v3-frame--cyan,
body:not(.cnda-premium) .art-v3-frame--cobalt,
body:not(.cnda-premium) .art-v3-frame--violet,
body:not(.cnda-premium) .art-v3-frame--gold {
  background:
    linear-gradient(rgba(255, 255, 255, 0.94), rgba(238, 247, 255, 0.88)) padding-box,
    linear-gradient(125deg, #27b8ff, #155ee8 58%, #071b42) border-box !important;
}

body:not(.cnda-premium) .art-v3-spectrum-rail::before {
  background: linear-gradient(90deg, #27b8ff, #155ee8 58%, #071b42) !important;
  box-shadow: 0 0 20px rgba(39, 184, 255, 0.34), 0 0 38px rgba(21, 94, 232, 0.22) !important;
}

/* Roadmap stays light, but adopts CNDA's approved blue logic. */
body.strategy-page:not(.cnda-premium) {
  --strategy-cyan: #27b8ff;
  --strategy-cobalt: #155ee8;
  --strategy-violet: #0b3b91;
  --strategy-line: rgba(21, 94, 232, 0.14);
  --strategy-glass: rgba(255, 255, 255, 0.88);
}

body.strategy-page:not(.cnda-premium) .strategy-tabs {
  border-color: rgba(21, 94, 232, 0.16) !important;
  background: rgba(255, 255, 255, 0.88) !important;
  box-shadow: 0 12px 32px rgba(7, 46, 111, 0.08) !important;
}

body.strategy-page:not(.cnda-premium) .strategy-tabs a[aria-current="page"],
body.strategy-page:not(.cnda-premium) .strategy-btn--primary {
  background: linear-gradient(118deg, #27b8ff, #155ee8 58%, #0b3b91) !important;
}

/* Canonical footer: four columns + social links, with no purple spectrum. */
.d1r2-footer {
  position: relative;
  margin: clamp(3rem, 7vw, 6rem) var(--d1r2-gutter) 1rem !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

body:not(.cnda-premium) .d1r2-footer::before {
  content: "";
  position: absolute;
  inset: -1.2rem 3% 0;
  z-index: -1;
  background: radial-gradient(circle at 16% 52%, rgba(39, 184, 255, 0.14), transparent 34%), radial-gradient(circle at 82% 34%, rgba(21, 94, 232, 0.11), transparent 38%) !important;
  filter: blur(20px);
}

body:not(.cnda-premium) .d1r2-footer__grid {
  width: min(100%, 88rem);
  max-width: 88rem;
  grid-template-columns: minmax(16rem, 1.35fr) repeat(4, minmax(9rem, 1fr)) !important;
  gap: clamp(1.5rem, 3vw, 2.65rem) !important;
  padding: clamp(2rem, 4.5vw, 3.75rem) !important;
  border: 1px solid transparent !important;
  border-radius: 1.6rem !important;
  background:
    radial-gradient(circle at 1px 1px, rgba(21, 94, 232, 0.07) 1px, transparent 1.1px) 0 0 / 28px 28px padding-box,
    linear-gradient(155deg, rgba(255, 255, 255, 0.97), rgba(232, 244, 255, 0.94)) padding-box,
    linear-gradient(118deg, rgba(39, 184, 255, 0.7), rgba(21, 94, 232, 0.34) 58%, rgba(7, 27, 66, 0.2)) border-box !important;
  box-shadow: 0 28px 78px rgba(7, 46, 111, 0.11), 0 0 34px rgba(39, 184, 255, 0.06) !important;
}

.d1r2-footer__brand img[data-d1r2-logo="footer"] {
  width: min(14.5rem, 100%) !important;
  max-height: 5.5rem !important;
}

.d1r2-footer__socials {
  display: flex !important;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.55rem;
  margin-top: 1rem;
}

.d1r2-footer__socials .d1r2-footer__social {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.45rem;
  height: 2.45rem;
  min-height: 2.45rem !important;
  padding: 0 !important;
  border: 1px solid rgba(21, 94, 232, 0.16) !important;
  border-radius: 0.68rem !important;
  background: rgba(255, 255, 255, 0.82) !important;
  color: #0d56cf !important;
  box-shadow: 0 8px 20px rgba(7, 46, 111, 0.06);
}

.d1r2-footer__socials .d1r2-footer__social:hover,
.d1r2-footer__socials .d1r2-footer__social:focus-visible {
  color: #ffffff !important;
  background: #155ee8 !important;
  border-color: #155ee8 !important;
  text-decoration: none !important;
}

.d1r2-footer__col h2 {
  color: #0d56cf !important;
  font-family: var(--d1r2-font-ui), Inter, system-ui, sans-serif !important;
  font-size: 0.78rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.11em !important;
}

body:not(.cnda-premium) .d1r2-footer__col a {
  color: #213955 !important;
}

body:not(.cnda-premium) .d1r2-footer__col a:hover,
body:not(.cnda-premium) .d1r2-footer__col a:focus-visible {
  color: #0d56cf !important;
}

body:not(.cnda-premium) .d1r2-footer__legal {
  color: #5c7089 !important;
  border-top-color: rgba(21, 94, 232, 0.12) !important;
}

/* CNDA keeps its near-black body, but shares the same blue brand language in chrome/footer. */
body.cnda-premium .d1r2-footer::before {
  content: "";
  position: absolute;
  inset: -1.2rem 3% 0;
  z-index: -1;
  background: radial-gradient(circle at 18% 50%, rgba(39, 184, 255, 0.18), transparent 34%), radial-gradient(circle at 82% 34%, rgba(21, 94, 232, 0.2), transparent 38%);
  filter: blur(22px);
}

body.cnda-premium .d1r2-footer__grid {
  width: min(100%, 88rem);
  max-width: 88rem;
  grid-template-columns: minmax(16rem, 1.35fr) repeat(4, minmax(9rem, 1fr)) !important;
  gap: clamp(1.5rem, 3vw, 2.65rem) !important;
  padding: clamp(2rem, 4.5vw, 3.75rem) !important;
  border: 1px solid rgba(61, 135, 255, 0.28) !important;
  border-radius: 1.6rem !important;
  background: radial-gradient(circle at 1px 1px, rgba(92, 156, 255, 0.09) 1px, transparent 1.1px) 0 0 / 28px 28px, linear-gradient(145deg, #07162f, #020713 72%) !important;
  box-shadow: 0 34px 90px rgba(0, 0, 0, 0.38), 0 0 42px rgba(21, 94, 232, 0.12) !important;
}

body.cnda-premium .d1r2-footer__col h2 { color: #6aa7ff !important; }
body.cnda-premium .d1r2-footer__col a { color: #d7e5f7 !important; }
body.cnda-premium .d1r2-footer__col a:hover,
body.cnda-premium .d1r2-footer__col a:focus-visible { color: #72aaff !important; }
body.cnda-premium .d1r2-footer__legal { color: #90a5c1 !important; border-top-color: rgba(92, 156, 255, 0.16) !important; }
body.cnda-premium .d1r2-footer__socials .d1r2-footer__social {
  background: rgba(8, 23, 50, 0.9) !important;
  color: #72aaff !important;
  border-color: rgba(92, 156, 255, 0.24) !important;
}

@media (max-width: 1180px) {
  .d1r2-nav { gap: 0.68rem !important; }
  .d1r2-nav a:not(.d1r2-nav-cta) { font-size: 0.92rem !important; }
  .d1r2-nav a[href="/cnda"] img,
  .cnda-nav-mark { height: 2.2rem !important; max-width: 7.2rem !important; }
}

@media (max-width: 1100px) {
  body:not(.cnda-premium) .d1r2-footer__grid,
  body.cnda-premium .d1r2-footer__grid {
    grid-template-columns: minmax(15rem, 1.2fr) repeat(2, minmax(10rem, 1fr)) !important;
  }
}

@media (max-width: 900px) {
  .d1r2-header { min-height: 4.5rem !important; padding: 0.48rem 0.6rem !important; }
  .d1r2-header__bar { min-height: 4rem !important; padding: 0.45rem 0.72rem !important; }
  .d1r2-header .d1r2-brand,
  .d1r2-header .d1r2-brand picture,
  .d1r2-header .d1r2-brand img[data-d1r2-logo="header"] {
    height: 2.35rem !important;
    max-height: 2.35rem !important;
  }
  .d1r2-header .d1r2-brand img[data-d1r2-logo="header"] { max-width: min(13rem, 58vw) !important; }
}

@media (max-width: 700px) {
  .d1r2-footer { margin-inline: 0.55rem !important; }
  body:not(.cnda-premium) .d1r2-footer__grid,
  body.cnda-premium .d1r2-footer__grid {
    grid-template-columns: 1fr !important;
    padding: 1.5rem !important;
    border-radius: 1.25rem !important;
  }
}