:root {
  --PrimaryColor:     #0996C7;
  --SecondaryColor:   #0F172A;
  --color-bg:          #F5F7FA;
  --WhiteColor:     #FFFFFF;
  --BlackColor:     #000000;
  --MutedText:       #414141;

  --radius:            0.75rem;
  --shadow-sm:         0 4px 20px rgba(0, 0, 0, 0.04);
  --shadow-md:         0 8px 32px rgba(0, 0, 0, 0.10);
  --transition:        0.2s ease;

}

/* ── Reset / Base ───────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
   font-family: "Inter", sans-serif;
  font-size: 1rem;
  font-weight: 400;
  color: var(--color-text);
  /* background: var(--color-bg); */
  -webkit-font-smoothing: antialiased;
}


a  { text-decoration: none; color: inherit; }
ul { list-style: none; margin: 0; padding: 0; }


h1,h2,h3,h4,h5,h6{ font-family: "Space Grotesk", sans-serif;}



/* ── Buttons ─────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 1.5rem;
  border-radius: 50px;
  font-size: 0.9rem;
  font-weight: 400;
  cursor: pointer;
  border: none;
    transition: background 0.2s, transform 0.2s;
}

.btn:hover {
  transform: translateY(-3px);  
  /* outline: 2px solid var(--PrimaryColor);
  outline-offset: 3px; */
}

.btn-primary {
  background: var(--PrimaryColor);
  color: var(--WhiteColor);
  border: solid 1px var(--PrimaryColor);
}

.btn-primary:hover,.btn-primary:focus,.btn-primary:active {
  background: var(--WhiteColor) !important;
  color: var(--PrimaryColor) !important;
  border-color: var(--PrimaryColor) !important;

}

.btn-secondary {
  background: #E6E8EA;
  color: #191C1E;
  border: solid 1px #E6E8EA;
}

.btn-secondary:hover,.btn-secondary:focus,.btn-secondary:active {
  background: #191C1E;
  color: #E6E8EA;
  border-color: #191C1E;

}


/* ════════════════════════════════════════════════
   NAVBAR
════════════════════════════════════════════════ */
.header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--color-border);  padding: 0.9rem 0;
}
.header  .navbar-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.header  .nav {
  /* display: flex;
  align-items: center;
  gap: 1.8rem; */
  margin-inline: auto;
}
.header .sidebar-links{display: flex; align-items: center; gap: 1rem;}
.header  .nav-link {
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--MutedText);
  padding: 0.5rem;
  transition: color var(--transition);
}
.header .nav-link:hover { color: var(--PrimaryColor); }
/* .header .navbar-cta { margin-left: auto; } */

/* hamburger */
.header .nav-toggle {
  display: none;
  align-items: center; justify-content: center;
  gap: 5px;
  background: var(--PrimaryColor);
  color: var(--WhiteColor);	width: 2.25rem;
		height: 2.25rem;
		border-radius: 50%;
    border: solid 1px var(--PrimaryColor);

  cursor: pointer;
  margin-left: auto;
}


/* sidebar head — hidden on desktop */
.header .sidebar-head  { display: none; }
.header .sidebar-close { display: none; }

/* backdrop — hidden until open */
/* .sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.45);
  z-index: 199;
  opacity: 0;
  transition: opacity var(--transition);
}
.sidebar-backdrop.backdrop-open {
  display: block;
  opacity: 1;
} */

/* ════════════════════════════════════════════════
   HERO
════════════════════════════════════════════════ */
.hero {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 43%,
    rgba(255, 255, 255, 0.6) 100%
  ),
  url(../images/hero-bg.jpg) no-repeat center top / cover;
  padding:8rem 0;
  overflow: hidden;
}
.hero h1{font-size: 2.6rem; font-weight: 700; color: var(--BlackColor); line-height: 1.2; }
.hero h1 .primarytext{color: var(--PrimaryColor);}


.hero .hero-desc {
  color: #434656; font-weight: 300;font-size: 1rem; line-height: 1.6;
  max-width: 38rem;
  margin: 1rem 0 2rem;
}

.section-bottom-btn {
  display: flex; align-items: center;
  gap: 0.75rem;

}

/* hero card */
.hero-right { min-width: 0; }
.hero-card {
  background: var(--WhiteColor);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}
.hero-card-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--color-border);
  background: #fafbfc;
}
.hero-card-dots {
  display: flex;
  gap: 5px;
}
.hero-card-dots span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-border);
}
.hero-card-dots span:first-child  { background: #f87171; }
.hero-card-dots span:nth-child(2) { background: #fbbf24; }
.hero-card-dots span:last-child   { background: #34d399; }
.hero-card-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--MutedText);
  letter-spacing: 0.04em;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: auto;
  flex-shrink: 0;
}
.status-live {
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2); }
  50%       { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0.08); }
}
.hero-img {
  width: 100%;
  height: 14rem;
  object-fit: cover;
  object-position: top;
}
.hero-card-footer {
  display: flex;
  gap: 1.5rem;
  padding: 0.9rem 1rem;
  border-top: 1px solid var(--color-border);
}
.metric {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.metric-label {
  font-size: 0.65rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--MutedText);
}
.metric-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-text);
}

/* ════════════════════════════════════════════════
   SECTION SHARED
════════════════════════════════════════════════ */
.same-section {
    padding: 6rem 0;
}
.same-heading {
  margin-bottom: 2.5rem;
}

.same-heading h2 {  
   font-size: 2rem;
    font-weight: 700;
    color: var(--BlackColor);
    line-height: 1.2;
  }
.same-heading p {  
   font-size: 1rem;
    font-weight: 300;
    color: #434656;
        line-height: 1.6;
  }
/* ════════════════════════════════════════════════
   CORE INFRASTRUCTURE
════════════════════════════════════════════════ */

.infra-section .feature-box {
  background: #F6F6F6;
  padding: 1.875rem 1.25rem; 
  border-radius: 0.75rem; 
  transition: 0.3s ease;
}

.infra-section .feature-box:hover {
  transform: translateY(-0.3125rem); /* 5px */
}

.infra-section .feature-box .icon {
  width: 3.125rem; 
  height: 3.125rem; 
  background: #fff;
  border-radius: 0.625rem; 
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem; /* 15px */
  font-size: 1.25rem; /* 20px */
}

.infra-section .feature-box h4 {
  font-size: 1.125rem;
  line-height: 1.5;
  font-weight: 700; color: #191C1E;
    margin-bottom: 1rem; 
  width: 100%; max-width: 60%;
}

.infra-section .feature-box p {
  font-size: 0.9rem;
  color: #434656;
  line-height: 1.6;
}


/* ════════════════════════════════════════════════
   IMAGE BANNER
════════════════════════════════════════════════ */
.exchange-banner {
  position: relative;
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: url(../images/market-netwrok-bg.jpg)no-repeat center top/cover;
  background-attachment: fixed;
}
.exchange-banner .banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
}

.exchange-banner .banner-content {
  position: relative;
  z-index: 1;
  text-align: center;
  padding-block: 4rem;
}
.exchange-banner .banner-heading {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}


/* ════════════════════════════════════════════════
   SPLIT CTA
════════════════════════════════════════════════ */
.cta-section { background: var(--color-bg); }

.cta-section .cta-left {
  background: #ECEEF0;
  height: 100%;
  display: flex;
  flex-direction: column;   transition: all .2s ease;
  padding: 2rem;
  gap: 1rem; border-radius: 24px;
}
.cta-section .cta-left:hover { transform: translateY(-3px); }


.cta-section .cta-left .same-heading{width: 100%; max-width: 60%; margin-bottom: 1rem;}
.cta-section .cta-stats {
  display: flex;
  gap: 2.5rem;
}
.cta-section .cta-stats .stat {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.cta-section .cta-stats .stat-value {
  font-size: 1.7rem;
  line-height: normal;
font-family: "Space Grotesk", sans-serif;
  font-weight: 700;
  color: var(--PrimaryColor);
}
.cta-section .cta-stats .stat-label {
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #191c1e78;
}


/* right teal card */
.cta-section  .cta-right {
  background: var(--PrimaryColor);
  border-color: transparent;
  height: 100%;
  transition: all .2s ease;
  display: flex;  gap: 1rem;
  flex-direction: column; 
  padding: 2rem;
 border-radius: 24px;
}
.cta-section  .cta-right:hover { transform: translateY(-3px); }

.cta-section  .cta-right h3 {
  font-size: 1.6rem;
  font-weight: 700;
  color: #fff;
}
.cta-section  .cta-right p{
  font-size: 1rem;
  font-weight: 300;
  color: rgba(255, 255, 255, 0.82);
  line-height: 1.6;
  width: 100%; max-width: 80%;
}
.cta-section  .cta-right .arrow-btn{font-size: 1rem; transition: all .2s ease; color: var(--WhiteColor);font-weight: 700;}

/* ════════════════════════════════════════════════
   FOOTER
════════════════════════════════════════════════ */
.footer {
  background: var(--BlackColor);
 
}
.footer .footer-top{ padding: 3rem 0 1.5rem;}

.footer .footer-logo{display: inline-block; margin-bottom: 0.5rem;}
.footer  .footer-desc {
 font-size: 0.9em;
 font-weight: 300;
  color: #A9A9A9;
  margin-top: 0.9rem;
  max-width: 25rem;
}



.footer .footer-links {
  display: flex;
align-items: center;
  gap:3rem;
  text-align: right;
}
.footer  .footer-link {
  font-size: 0.85rem;
  color: #fff;
  transition: color var(--transition);
}
.footer   .footer-link:hover { color: var(--PrimaryColor); }


.footer   .footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.4);
  padding: 1rem 0;
}
.footer   .footer-bottom  .footer-copy {
color: #fff;
font-size: 0.7rem; font-weight: 500; text-transform: uppercase;
margin-bottom: 0;
}







/* ════════════════════════════════════════════════
   IDENTITY PAGE
════════════════════════════════════════════════ */
.identity-page {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 43%,
    rgba(255, 255, 255, 0.6) 100%
  ),
  url(../images/identity-bg.jpg) no-repeat center top / cover;
  min-height: 100dvh;
}


/* main wrapper */
.identity-page .identity-main {
  padding: 3rem 0;
}

/* left card */
.identity-page .identity-left {
  background: var(--WhiteColor);
  border-radius: 1.25rem 0 0 1.25rem;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.identity-page .identity-heading {
  font-size: 3rem;
  font-weight: 400;
  line-height: 1.1;
  color: var(--PrimaryColor); margin-bottom: 1rem;
}
.identity-page .identity-desc {
  font-size: 0.95rem;
  font-weight: 400;
  color: #434656;
  line-height: 1.6;
  max-width: 26rem;
}

/* feature rows */
.identity-page .identity-features {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1rem 0 2rem;
}
.identity-page .identity-feature-row {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  background: #F2F4F6; 
  border-radius: 15px;
  padding: 1rem;
}
.identity-page .identity-feature-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  background: var(--WhiteColor);
  color: var(--PrimaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.identity-page .identity-feature-icon svg { width: 1rem; height: 1rem; }
.identity-page .identity-feature-body h4 {
  font-size: 0.95rem;
  font-weight: 500;
  color: #191C1E; 
  margin-bottom: 0.2rem;    font-family: "Inter", sans-serif;
}
.identity-page .identity-feature-body p {
  font-size: 0.85rem;
  font-weight: 400;
  color: #737688;
  line-height: 1.55;
  margin: 0;
  width: 100%; max-width: 80%;
}


.identity-page .identity-footnote {
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #737688;
  text-align: center;
  width: 100%; max-width: 65%;
  margin: 1.2rem auto 0;
}

/* right card */
.identity-page .identity-right {
  background: #ECEEF0;
   border-radius: 0 1.25rem 1.25rem 0;
    padding: 2rem;
    height: 100%;

}



/* Parent Wrapper */
.protocol-wrapper {
  max-width: 22rem;
  margin: auto;

}

/* BADGE */
.protocol-wrapper .protocol-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--PrimaryColor);
  background:#0996c73b;
  border-radius: 50px;
  padding: 0.3rem 0.75rem;
  width: fit-content;
   margin-bottom: 2.5rem;
}
.identity-page .identity-protocol-badge svg{
 width: 1rem;
}

/* CARD */
.protocol-wrapper .identity-card {
  border-radius: 0.8rem;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 1rem 2rem rgba(0,0,0,0.15);
  margin-bottom: 3rem;
}

.protocol-wrapper .card-image img {
  width: 100%;
  display: block;
}

.protocol-wrapper .card-content {
  background: #fff;
  padding: 1rem;
}

.protocol-wrapper .card-content p {
  font-size: 0.9rem;
  color: #434656;
  line-height: 1.5;
}

/* STATS */
.protocol-wrapper .protocol-stats {
  text-align: left;
}

.protocol-wrapper .stat {
  display: flex;
  justify-content: space-between;
  border-bottom: 0.0625rem solid #e0e0e0;
  padding: 0.8rem 0;
}

.protocol-wrapper .stat span {
  font-size: 0.75rem;
  color: #737688;text-transform: uppercase;
}

.protocol-wrapper .stat strong {
  font-size: 0.8rem;
  color: var(--PrimaryColor);
font-family: "Space Grotesk", sans-serif;
}

/* NOTE */
.protocol-wrapper .note {
  font-size: 0.7rem;
  color: #C3C5D9;
  margin-top: 0.8rem;
}


/* ════════════════════════════════════════════════
   REQUEST ACCESS PAGE
════════════════════════════════════════════════ */
.request-access-page {
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.9) 43%,
    rgba(255, 255, 255, 0.6) 100%
  ),
  url(../images/identity-bg.jpg) no-repeat center top / cover;
  min-height: 100dvh;
}

/* header */
.gateway-header {
  padding: 1.1rem 0;

}
.gateway-header .ra-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gateway-header .ra-gateway {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #737688;
}
.gateway-header .ra-gateway svg { width: 1rem; height: 1rem; }



/* main */
.request-access-page .ra-main {
  padding: 3rem 0 4rem;
}

/* ── LEFT CARD ── */
.request-access-page .ra-left {
  background: #ECEEF0;
  border-radius: 1.25rem 0 0 1.25rem;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* intro */
.request-access-page .ra-intro-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--BlackColor);
  margin-bottom: 0.6rem;
  font-family: "Space Grotesk", sans-serif;
}
.request-access-page .ra-brand-accent {
  color: var(--PrimaryColor);
}
.request-access-page .ra-intro-desc {
  font-size: 0.9rem;
  font-weight: 300;
  color: #434656;
  line-height: 1.65;
  margin: 0;
}

/* eligibility */
.request-access-page .ra-eligibility-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--BlackColor);
  margin-bottom: 0.85rem;
  font-family: "Space Grotesk", sans-serif;
}
.request-access-page .ra-eligibility {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.request-access-page .ra-eligibility-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #F0F1F3;
}
.request-access-page .ra-eligibility-row:last-child {
  border-bottom: none;
}
.request-access-page .ra-eligibility-icon {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 0.5rem;
  background: #fff;
  color: var(--PrimaryColor);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.request-access-page .ra-eligibility-icon svg { width: 1rem; height: 1rem; }
.request-access-page .ra-eligibility-body h4 {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--BlackColor);
  margin-bottom: 0.2rem;
  font-family: "Inter", sans-serif;
}
.request-access-page .ra-eligibility-body p {
  font-size: 0.82rem;
  font-weight: 400;
  color: #434656;
  line-height: 1.5;
  margin: 0;
}

/* chart */
.request-access-page .ra-chart-wrap {
  border-radius: 0.75rem;
  overflow: hidden;
  margin-top: auto;
}
.request-access-page .ra-chart-img {
  width: 100%;
  height: 9rem;
  object-fit: cover;
  object-position: center;
  filter: grayscale(1) opacity(0.55);
}

/* ── RIGHT CARD ── */
.request-access-page .ra-right {
  background: var(--WhiteColor);
  border-radius: 0  1.25rem  1.25rem 0;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.request-access-page .ra-form-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--BlackColor);
  font-family: "Space Grotesk", sans-serif;
  margin: 0;
}

/* form elements */
.request-access-page .ra-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #C3C5D9;
  margin-bottom: 0.4rem;
}
.request-access-page .ra-optional {
  font-weight: 400;
  color: #b0b3c5;
}
.request-access-page .ra-input,
.request-access-page .ra-select,
.request-access-page .ra-textarea {
  width: 100%;
  background: #F6F7F9;
  border: 1px solid #ECEEF0;
  border-radius: 0.6rem;
  padding: 0.7rem 0.9rem;
  font-size: 0.88rem;
  font-weight: 400;
  color: var(--BlackColor);
  font-family: "Inter", sans-serif;
  outline: none;
  transition: border-color 0.2s;
  appearance: none;
  -webkit-appearance: none;
}
.request-access-page .ra-input::placeholder,
.request-access-page .ra-textarea::placeholder {
  color: #b0b3c5;
}
.request-access-page .ra-input:focus,
.request-access-page .ra-select:focus,
.request-access-page .ra-textarea:focus {
  border-color: var(--PrimaryColor);
  background: #fff;
}
.request-access-page .ra-select-wrap {
  position: relative;
}
.request-access-page .ra-select-icon {
  position: absolute;
  right: 0.9rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1rem;
  height: 1rem;
  color: #737688;
  pointer-events: none;
}
.request-access-page .ra-textarea {
  resize: none;
  height: 7rem;
}

/* submit button */
.request-access-page .ra-submit-btn {
  width: 100%;
  justify-content: center;
  border-radius: 50px;
  padding: 0.85rem 1.5rem;
  font-size: 0.95rem;
  font-weight: 500;
}

/* compliance note */
.request-access-page .ra-compliance {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: #f2f4f694;padding: 1rem;
}
.request-access-page .ra-compliance-icon {
  flex-shrink: 0;
  color: #952200;
  margin-top: 0.05rem;
}
.request-access-page .ra-compliance-icon svg { width: 1rem; height: 1rem; }
.request-access-page .ra-compliance-text {
  font-size: 0.68rem;
  font-weight: 600;
  color: #737688;
  line-height: 1.55;
  letter-spacing: 0.02em;
  margin: 0;
}