/* =========================================================
   Conmodum Bank — Custom Design System
   Applying: impeccable v2.1.1 + taste-skill + design-motion-principles
   Fonts: Bricolage Grotesque (display) + Epilogue (body)
   DESIGN_VARIANCE: 8 | MOTION_INTENSITY: 6 | VISUAL_DENSITY: 5
   ========================================================= */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,400;12..96,500;12..96,600;12..96,700;12..96,800&family=Epilogue:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');

/* ── Design Tokens ─────────────────────────────────────── */
:root {
  /* Brand — monochrome palette */
  --c-navy:       #1c1c1c;
  --c-navy-dk:    #111111;
  --c-teal:       #4a4a4a;
  --c-teal-dk:    #333333;
  --c-teal-lt:    #ebebeb;

  /* Surface */
  --c-bg:         #e6e6e6;
  --c-surface:    #f0f0f0;
  --c-border:     #d0d0d0;

  /* Text */
  --c-text:       #1c1c1c;
  --c-muted:      #666666;
  --c-faint:      #999999;

  /* Shadows (neumorphic — neutral grey) */
  --sh-dark:  rgba(168, 168, 168, 0.72);
  --sh-light: rgba(255, 255, 255, 0.85);

  /* Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:  cubic-bezier(0.87, 0, 0.13, 1);

  /* Spacing scale (4pt) */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  48px;
  --sp-2xl: 96px;
}

/* ── Base ───────────────────────────────────────────────── */
body {
  font-family: 'Epilogue', sans-serif;
  color: var(--c-text);
  background-color: var(--c-bg);
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.display-1, .display-2, .display-3, .display-4,
.h1, .h2, .h3, .h4, .h5 {
  font-family: 'Bricolage Grotesque', sans-serif;
  letter-spacing: -0.025em;
}

p { line-height: 1.72; }

/* Text / bg helpers */
.text-primary { color: var(--c-navy) !important; }
.bg-primary   { background-color: var(--c-navy) !important; }



/* ── Typography helpers ─────────────────────────────────── */
.overline {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-teal);
  margin-bottom: 10px;
}

.section-tag {
  display: inline-block;
  background: var(--c-teal-lt);
  color: var(--c-teal);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 14px;
  border-radius: 100px;
  margin-bottom: 16px;
}

.stat-big {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  font-weight: 800;
  color: var(--c-navy);
  line-height: 1;
  letter-spacing: -0.04em;
}

.stat-label {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--c-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 6px;
}

/* ── Neumorphic surfaces ────────────────────────────────── */
.nm-card {
  background: var(--c-surface);
  border-radius: 20px;
  box-shadow: 7px 7px 18px var(--sh-dark), -7px -7px 18px var(--sh-light);
  transition: box-shadow .3s var(--ease-out), transform .3s var(--ease-out);
}

.nm-card:hover {
  box-shadow: 10px 10px 26px var(--sh-dark), -5px -5px 14px var(--sh-light);
  transform: translateY(-4px);
}

.nm-inset {
  background: var(--c-bg);
  border-radius: 14px;
  box-shadow: inset 4px 4px 10px var(--sh-dark), inset -4px -4px 10px var(--sh-light);
  padding: 14px 18px;
}

.nm-flat {
  background: var(--c-surface);
  border-radius: 16px;
  box-shadow: 5px 5px 14px var(--sh-dark), -5px -5px 14px var(--sh-light);
}

/* ── Rail pills ─────────────────────────────────────────── */
.rail-pill {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--c-navy);
  background: var(--c-surface);
  box-shadow: 2px 2px 6px var(--sh-dark), -2px -2px 6px var(--sh-light);
  margin-right: 6px;
  margin-bottom: 6px;
}
.rail-pill.instant { color: var(--c-teal); }
.rail-pill.crypto  { color: var(--c-teal); }

/* ── Service icon ───────────────────────────────────────── */
.svc-icon {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  background: var(--c-surface);
  box-shadow: 4px 4px 12px var(--sh-dark), -4px -4px 12px var(--sh-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--c-teal);
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: transform .25s var(--ease-out);
}
.nm-card:hover .svc-icon { transform: scale(1.08) rotate(-3deg); }

/* ── Feature row (Why Choose Us) ────────────────────────── */
.feature-row {
  display: flex;
  align-items: flex-start;
  gap: 18px;
  padding: 22px;
  border-radius: 18px;
  background: var(--c-surface);
  box-shadow: 5px 5px 14px var(--sh-dark), -5px -5px 14px var(--sh-light);
  margin-bottom: 16px;
  transition: transform .25s var(--ease-out);
}
.feature-row:hover { transform: translateX(6px); }
.feat-icon {
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--c-teal-lt);
  color: var(--c-teal);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ── Entity cards ───────────────────────────────────────── */
.entity-card {
  background: var(--c-surface);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 6px 6px 16px var(--sh-dark), -6px -6px 16px var(--sh-light);
  height: 100%;
  transition: transform .3s var(--ease-out);
}
.entity-card:hover { transform: translateY(-6px); }
.entity-flag { font-size: 2.4rem; line-height: 1; margin-bottom: 12px; }

/* ── Blockchain chain list ──────────────────────────────── */
.chain-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 22px;
  background: var(--c-surface);
  border-radius: 16px;
  box-shadow: 4px 4px 12px var(--sh-dark), -4px -4px 12px var(--sh-light);
  margin-bottom: 12px;
  transition: transform .25s var(--ease-out);
}
.chain-item:hover { transform: translateX(5px); }
.chain-dot {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* ── Blog cards ─────────────────────────────────────────── */
.blog-card {
  border-radius: 20px;
  overflow: hidden;
  background: var(--c-surface);
  box-shadow: 6px 6px 16px var(--sh-dark), -6px -6px 16px var(--sh-light);
  transition: transform .3s var(--ease-out), box-shadow .3s var(--ease-out);
  height: 100%;
}
.blog-card:hover {
  transform: translateY(-6px);
  box-shadow: 10px 10px 26px var(--sh-dark), -5px -5px 14px var(--sh-light);
}
.blog-card img { width: 100%; height: 210px; object-fit: cover; display: block; }
.blog-card .bc-body { padding: 24px; }
.blog-cat {
  display: inline-block;
  background: var(--c-teal-lt);
  color: var(--c-teal);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 6px;
  margin-bottom: 10px;
}

/* ── Contact form ───────────────────────────────────────── */
.cf-input {
  width: 100%;
  background: var(--c-bg);
  border: none;
  border-radius: 12px;
  box-shadow: inset 4px 4px 10px var(--sh-dark), inset -4px -4px 10px var(--sh-light);
  padding: 14px 18px;
  color: var(--c-text);
  font-family: 'Epilogue', sans-serif;
  font-size: 0.95rem;
  transition: box-shadow .2s ease;
  outline: none;
}
.cf-input:focus {
  box-shadow: inset 4px 4px 10px var(--sh-dark), inset -4px -4px 10px var(--sh-light), 0 0 0 3px rgba(0,0,0,.10);
}
.cf-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--c-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 6px;
  display: block;
}

/* ── CTA section ────────────────────────────────────────── */
.cta-block {
  background: var(--c-navy);
  border-radius: 24px;
  padding: 64px 56px;
  color: white;
}
.cta-block h2 { color: white; }

/* ── Revenue/investment card ────────────────────────────── */
.rev-card {
  background: var(--c-surface);
  border-radius: 20px;
  padding: 28px;
  box-shadow: 6px 6px 16px var(--sh-dark), -6px -6px 16px var(--sh-light);
  height: 100%;
  transition: transform .3s var(--ease-out);
}
.rev-card:hover { transform: translateY(-5px); }
.rev-num {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--c-navy);
  letter-spacing: -0.04em;
  line-height: 1;
}

/* ── Mega Dropdown ───────────────────────────────────────── */
.mega-dropdown { position: static !important; }
.mega-dropdown-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 760px;
  padding: 24px;
  border-radius: 20px;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  box-shadow: 8px 8px 16px var(--sh-dark), -8px -8px 16px var(--sh-light);
  display: none;
  z-index: 9999;
}
.mega-dropdown-menu.show { display: flex; gap: 16px; align-items: stretch; }
.mega-dd-group { display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mega-dd-group-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-faint);
  padding: 0 4px 4px;
}
.mega-dd-divider {
  width: 1px;
  background: var(--c-border);
  border-radius: 1px;
  flex-shrink: 0;
}
.mega-dd-card-sm { padding: 14px 16px; }
.mega-dd-card-sm .mega-dd-icon { width: 36px; height: 36px; font-size: .9rem; margin-bottom: 10px; }
.mega-dd-card {
  flex: 1;
  background: var(--c-surface);
  border-radius: 16px;
  padding: 20px 18px;
  text-decoration: none !important;
  color: var(--c-text) !important;
  box-shadow: 4px 4px 8px var(--sh-dark), -4px -4px 8px var(--sh-light);
  transition: box-shadow .2s ease, transform .2s ease;
  display: block;
}
.mega-dd-card:hover {
  box-shadow: 2px 2px 4px var(--sh-dark), -2px -2px 4px var(--sh-light);
  transform: translateY(-2px);
  color: var(--c-navy) !important;
  text-decoration: none !important;
}
.mega-dd-icon {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: var(--c-bg);
  box-shadow: 3px 3px 6px var(--sh-dark), -3px -3px 6px var(--sh-light);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
  font-size: 1.1rem;
  color: var(--c-teal);
}
.mega-dd-card h6 {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;
  font-size: .95rem;
  color: var(--c-navy);
  margin-bottom: 6px;
}
.mega-dd-card p {
  font-size: .78rem;
  color: var(--c-muted);
  margin-bottom: 12px;
  line-height: 1.55;
}
.mega-dd-card .dd-features { list-style: none; padding: 0; margin: 0; }
.mega-dd-card .dd-features li {
  font-size: .75rem;
  color: var(--c-muted);
  padding: 3px 0;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mega-dd-card .dd-features li i { color: var(--c-teal); font-size: .65rem; }
.mega-dd-arrow { font-size: .65rem; color: var(--c-faint); }

/* ── Footer ─────────────────────────────────────────────── */
.site-footer {
  background: var(--c-bg) !important;
  color: var(--c-muted) !important;
  padding: 64px 0 0;
}
.site-footer h6 {
  font-family: 'Bricolage Grotesque', sans-serif;
  color: var(--c-navy);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.site-footer a {
  color: var(--c-muted);
  text-decoration: none;
  font-size: 0.87rem;
  display: block;
  margin-bottom: 9px;
  transition: color .2s ease;
}
.site-footer a:hover { color: var(--c-teal); }
.footer-bottom {
  border-top: 1px solid var(--c-border);
  margin-top: 48px;
  padding: 24px 0;
}

/* ── Animations ─────────────────────────────────────────── */
@keyframes fadeInUp   { from { opacity:0; transform:translateY(28px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeInLeft { from { opacity:0; transform:translateX(-28px); } to { opacity:1; transform:translateX(0); } }
@keyframes float      { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-10px); } }
@keyframes floatSlow  { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }

.anim-up { animation: fadeInUp .65s var(--ease-out) both; }
.d1 { animation-delay: .08s; }
.d2 { animation-delay: .16s; }
.d3 { animation-delay: .24s; }
.d4 { animation-delay: .32s; }
.d5 { animation-delay: .40s; }
.d6 { animation-delay: .48s; }

.float-anim      { animation: float 4.2s ease-in-out infinite; }
.float-anim-b    { animation: floatSlow 5.5s ease-in-out infinite; animation-delay: .9s; }
.float-anim-c    { animation: floatSlow 6.2s ease-in-out infinite; animation-delay: 1.8s; }

/* ── Hero (home) ────────────────────────────────────────── */
.hero-wrap {
  background: var(--c-bg);
  padding: 130px 0 80px;
  min-height: 90vh;
  display: flex;
  align-items: center;
}

/* ── Page hero (subpages) ───────────────────────────────── */
.page-hero {
  background: var(--c-bg);
  padding: 144px 0 60px;
  position: relative;
}
.page-hero::after {
  content: '';
  position: absolute; bottom:0; left:0; right:0; height:1px;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
}

/* ── Divider ────────────────────────────────────────────── */
.section-divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--c-border), transparent);
  margin: 0;
}

/* ── Subject button (contact) ───────────────────────────── */
.subj-btn {
  background: var(--c-surface);
  box-shadow: 3px 3px 8px var(--sh-dark), -3px -3px 8px var(--sh-light);
  border: none;
  border-radius: 10px;
  padding: 8px 16px;
  font-family: 'Epilogue', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-muted);
  cursor: pointer;
  transition: all .2s ease;
}
.subj-btn:hover, .subj-btn.active {
  background: var(--c-navy);
  color: #fff;
  box-shadow: none;
}

/* ── Pill navigation ────────────────────────────────────── */
.nav-pills-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.nav-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 18px;
  border-radius: 100px;
  font-family: 'Epilogue', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--c-muted);
  text-decoration: none !important;
  letter-spacing: 0.01em;
  transition: background .2s var(--ease-out), box-shadow .2s var(--ease-out), color .2s ease, transform .2s var(--ease-out);
  background: transparent;
  white-space: nowrap;
}

.nav-pill i {
  font-size: 0.78rem;
  flex-shrink: 0;
}

.nav-pill:hover {
  background: var(--c-surface);
  box-shadow: 3px 3px 8px var(--sh-dark), -3px -3px 8px var(--sh-light);
  color: var(--c-text);
  transform: translateY(-1px);
}

.nav-pill.active {
  background: var(--c-navy);
  color: #fff;
  box-shadow: 4px 4px 10px var(--sh-dark);
}

.nav-pill.active:hover {
  background: var(--c-teal-dk);
  color: #fff;
  transform: translateY(-1px);
}

/* Mobile: pills stack vertically in collapsed menu */
@media (max-width: 991px) {
  .nav-pills-wrap {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 0;
  }
  .nav-pill {
    padding: 10px 20px;
    width: 100%;
  }
}

/* ── Reduced motion ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}