* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

body {
  background: #000000;
  font-family: "Segoe UI", Arial, sans-serif;
}

/* Section Divider */
.sections>div {
  border-bottom: 2px solid;
  border-image: linear-gradient(90deg, #7c3aed, #a855f7, #7c3aed) 1;
  padding-bottom: 10;
}

.sections>div:last-child {
  border: none;
}

/* ---------- Navbar ---------- */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 65px;
  padding: 0 60px;
  background: #060c1c29;
  border-bottom: 1px solid rgba(115, 60, 245, 0.15);
  backdrop-filter: blur(8px);
}

.navlogo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.navlogo .img img {
  height: 42px;
  width: auto;
  display: block;
}

#nav-text {
  display: flex;
  gap: 10px;
  font-size: 15px;
}

.vyronix2 {
  color: #ffffff;
  font-family: "Orbitron";
  font-weight: 700;
  letter-spacing: 2px;
}

.labs2 {
  background: linear-gradient(90deg, rgba(96, 165, 250, 1) 0%, rgba(168, 85, 247, 1) 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-family: "Orbitron", sans-serif;
  font-weight: 600;
  letter-spacing: 5px;
}

/* ---------- Whitepaper badge ---------- */

.white-paper-name {
  border: 1px solid #22d3ee;
  border-radius: 6px;
  padding: 10px 18px;
  color: #22d3ee;
  font-family: "Space Grotesk", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}

.hamburger {
  display: none;
}

/* ---------- Layout wrapper (sidebar back in normal flow) ---------- */
/* ---------- Whitepaper Sidebar (normal, not fixed) and overall layout---------- */

.wp-layout {
  width: 100%;
  margin-top: 65px;
  display: grid;
  grid-template-columns: 260px auto;
  height: calc(100vh - 65px);
}

.wp-content {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

.wp-sidebar {
  display: flex;
  flex-direction: column;
  background: black;
  border-right: 1px solid rgba(115, 60, 245, 0.15);
  padding: 24px 20px;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}

/* Webkit (Chrome, Edge, Safari) */
.wp-content::-webkit-scrollbar,
.wp-sidebar::-webkit-scrollbar {
  width: 6px;
}

.wp-content::-webkit-scrollbar-track,
.wp-sidebar::-webkit-scrollbar-track {
  background: transparent;
}

.wp-content::-webkit-scrollbar-thumb,
.wp-sidebar::-webkit-scrollbar-thumb {
  background: rgba(139, 92, 246, 0.4);
  border-radius: 999px;
}

.wp-content::-webkit-scrollbar-thumb:hover,
.wp-sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(139, 92, 246, 0.65);
}

/* Firefox */
.wp-content,
.wp-sidebar {
  scrollbar-width: thin;
  scrollbar-color: rgba(139, 92, 246, 0.4) transparent;
}


/* Nav */
.wp-nav-wrap {
  flex: 1;
}

.wp-nav-label {
  color: #6b7280;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding: 0 12px;
}

.wp-nav {
  list-style: none;
}

.wp-nav li {
  margin-bottom: 2px;
}

.wp-nav a {
  display: block;
  color: #9aa3b8;
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 8px;
  transition: background 0.2s ease, color 0.2s ease;
}

.wp-nav a:hover {
  color: #ffffff;
  background: rgba(255, 255, 255, 0.04);
}

.wp-nav li.active a {
  color: #ffffff;
  font-weight: 700;
  background: rgba(124, 58, 237, 0.18);
  border: 1px solid rgba(168, 85, 247, 0.4);
}

/* Download PDF card */

.wp-download-card {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
}

.wp-download-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(168, 85, 247, 0.12);
  flex-shrink: 0;
}

.wp-download-icon img {
  width: 18px;
  height: 18px;
}

.wp-download-text h4 {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 2px;
}

.wp-download-text p {
  color: #9aa3b8;
  font-size: 11px;
}


/* sidebar overlay */

.wp-sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 150;
}

.wp-sidebar-overlay.active {
  display: block;
}

/* ---------- Cover section ---------- */
.cover {
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 60px;
  background-image: url("icones/whitepaper/coverLogo.webp");
  background-repeat: no-repeat;
  background-position: center right;
  background-size: contain;
}

.shadow {
  position: absolute;
  top: 0%;
  right: 0%;
  width: 100%;
  height: 100%;
  background-image: url("icones/whitepaper/neon-clouds.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.9;
  pointer-events: none;
}


/* Badge */
.cover-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgba(34, 211, 238, 0.4);
  border-radius: 6px;
  padding: 8px 14px;
  color: #0891b2;
  font-family: "Space Grotesk", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.badge-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #22d3ee;
}

/* Heading */

.cover-heading h1 {
  font-family: "Unbounded", sans-serif;
  font-size: 104px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 1px;
}

.cover-white {
  color: #ffffff;
}

.cover-accent {
  background: linear-gradient(90deg, #22d3ee 0%, #3b82f6 50%, #a855f7 100%);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.cover-grey {
  color: #cbd5e1;
  font-size: 50px !important;
  letter-spacing: 4px;
  margin-top: 6px;
}

.cover-underline {
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: linear-gradient(90deg, #3b82f6, #a855f7);
  margin: 24px 0 20px;
}

.cover-subtitle {
  color: #94a3b8;
  font-size: 20px;
  line-height: 1.6;
  margin-bottom: 28px;
  max-width: 420px;
}

.cover-tags {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.cover-tag {
  background: rgba(59, 130, 246, 0.08);
  border: 1px solid rgba(59, 130, 246, 0.4);
  border-radius: 20px;
  padding: 8px 16px;
  color: #60a5fa;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.5px;
}


/* ---------- EXECUTIVE SUMMARY (unique prefix .execsum-*) ---------- */
.execsum-section {
  padding: 40px 40px 0px 40px;
  color: #fff;
  font-family: 'Outfit', 'Inter', sans-serif;
  background-image: url('icones/whitepaper/background.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* hero */
.execsum-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  justify-content: space-between;
  align-items: center;
}

.execsum-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.execsum-badge {
  color: #a855f7;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.execsum-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 64px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
}

.execsum-title-white {
  color: #fff;
}

.execsum-title-grad {
  background: linear-gradient(90deg, #00ceff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.execsum-title-rule {
  width: 60px;
  height: 2px;
  background: #a855f7;
  border-radius: 1px;
  margin: 8px 0 20px 0;
}

.execsum-lead {
  font-size: 20px;
  line-height: 26px;
  color: #fff;
  margin-bottom: 16px;
}

.execsum-highlight {
  font-size: 18px;
  line-height: 26px;
  color: #94a3b8;
}

.execsum-highlight-cyan {
  color: #00ceff;
  font-weight: 600;
}

.execsum-visual img {
  height: 100%;
  width: 100%;
}

/* ---------- GRID ---------- */
.execsum-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px 0;
  align-items: center;
}

/* vision card */
.execsum-vision-card {
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
}

.execsum-vision-card img {
  height: 100%;
  width: 100%;
}

.execsum-vision-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #00ceff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 700;
}

.execsum-vision-header img {
  width: 20px;
  height: 20px;
}

.execsum-vision-body p {
  font-size: 15px;
  line-height: 22px;
  color: #fff;
  margin: 12px 0 0 0;
}

.execsum-vision-body .execsum-highlight-cyan {
  color: #00ceff;
  font-weight: 600;
}

.execsum-vision-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
}

.execsum-vision-indicator .execsum-dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #00ceff;
}

.execsum-vision-indicator .execsum-line {
  width: 80px;
  height: 2px;
  background: #00ceff;
  opacity: 0.3;
  border-radius: 1px;
}

.execsum-vision-glow {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(180deg, #00ceff 0%, transparent 100%);
  opacity: 0.5;
}

/* build card */
.execsum-build-card {
  background: rgba(3, 13, 32, 0.6);
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
  min-height: 280px;
}

.execsum-build-header h4 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
}

.execsum-build-header p {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 16px 0;
}

.execsum-build-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
}

.execsum-build-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  /* margin-bottom: 5px; */
  /* padding: ; */
}

.execsum-build-item img {
  width: 16px;
  height: 16px;
  margin-top: 2px;
  flex-shrink: 0;
  /* align-items: center; */
  margin-top: 8px;
}

.execsum-build-item strong {
  display: block;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.execsum-build-item span {
  font-size: 11px;
  color: #94a3b8;
  /* margin-bottom: 5px; */
}

/* highlights card */
.execsum-highlights-card {
  background: rgba(3, 13, 32, 0.6);
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
  min-height: 280px;
}

.execsum-highlights-card h4 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px 0;
}

.execsum-highlight-item {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.execsum-highlight-item:last-child {
  margin-bottom: 0;
}

.execsum-highlight-item img {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

.execsum-highlight-item strong {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
}

.execsum-highlight-item span {
  font-size: 12px;
  line-height: 18px;
  color: #94a3b8;
}

/* ---------- STATS ---------- */
.execsum-stats {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 32px 0 24px 0;
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.execsum-stat-block {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
}

.execsum-stat-block img {
  width: 48px;
  height: 48px;
  padding: 10px;
  background: rgba(0, 212, 255, 0.06);
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.08);
  object-fit: contain;
  flex-shrink: 0;
}

.execsum-stat-block div:last-child {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.execsum-stat-block strong {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-weight: 700;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  color: #00d4ff;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.execsum-stat-block strong.execsum-purple {
  color: #a855f7;
}

.execsum-stat-block span {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(0.65rem, 0.9vw, 0.8rem);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  line-height: 1.3;
}

/* ---------- OPPORTUNITY SECTION (unique prefix .opp-*) ---------- */
.opp-section {
  margin: 0 auto;
  padding: 40px 60px;
  display: flex;
  flex-direction: column;
  gap: 40px;
  color: #fff;
  font-family: 'Outfit', 'Inter', sans-serif;
}

.opp-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.opp-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 64px);
  line-height: 1.05;
  font-weight: 900;
  margin: 0;
}

.opp-title-light {
  color: #ffffff;
}

.opp-title-grad {
  background: linear-gradient(90deg, #00ceff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* intro */
.opp-intro {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 80px;
  align-items: flex-start;
}

.opp-text {
  flex: 1 1 300px;
  color: #ffffff;
  font-size: 20px;
  line-height: 30px;
  font-weight: 400;
  margin: 0;
}

.opp-shift {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.opp-shift-label {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.opp-shift-desc {
  color: #94a3b8;
  font-size: 14px;
  line-height: 22px;
  margin: 0;
}

/* metrics */
.opp-metrics {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

.opp-metric-card {
  background: #12182b;
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  box-shadow: 0 4px 20px rgba(0, 212, 255, 0.08);
  transition: transform 0.2s;
}

.opp-metric-card:hover {
  transform: translateY(-2px);
}

.opp-metric-card.opp-purple {
  border-color: rgba(123, 47, 190, 0.25);
  box-shadow: 0 4px 20px rgba(123, 47, 190, 0.08);
}

.opp-metric-head {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.opp-metric-label {
  color: #64748b;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.opp-metric-value {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 30px;
  font-weight: 700;
}

.opp-metric-value.opp-purple {
  color: #7b2fbe;
}

.opp-metric-sub {
  color: #94a3b8;
  font-size: 14px;
}

.opp-metric-graph {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}

.opp-metric-graph svg {
  width: 100%;
  height: 36px;
  display: block;
}

.opp-graph-labels {
  display: flex;
  justify-content: space-between;
  color: #6b85a1;
  font-family: 'Inter', sans-serif;
  font-size: 7px;
  padding: 0 2px;
}

.opp-metric-icon {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 32px;
  height: 32px;
}

/* drivers */
.opp-drivers {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.opp-drivers-head {
  color: #ffffff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0;
}

.opp-drivers-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.opp-driver-card {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  transition: border-color 0.2s;
}

.opp-driver-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
}

.opp-driver-icon {
  width: 40px;
  height: 40px;
  background: rgba(0, 212, 255, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(0, 212, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
}

.opp-driver-icon img {
  width: 20px;
  height: 20px;
}

.opp-driver-card h4 {
  color: #ffffff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin: 0;
}

.opp-driver-card p {
  color: #94a3b8;
  font-size: 15px;
  line-height: 20px;
  margin: 0;
}

/* ---------- PROBLEM SECTION (unique prefix .problem-*) ---------- */
.problem-section {
  padding: 0px;
  color: #fff;
  font-family: 'Outfit', 'Inter', sans-serif;
  display: grid;
  gap: 10px;
}

.problem-section>div {
  padding: 20px 40px;
}

/* layout: header + cards */
.problem-layout {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
}

.problem-headline {
  flex: 1 1 400px;
  max-width: 520px;
}

.problem-badge {
  display: block;
  color: #00ceff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.problem-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 64px);
  line-height: 1.05;
  font-weight: 900;
  margin: 0 0 8px 0;
}

.problem-title-white {
  color: #ffffff;
}

.problem-title-cyan {
  background: linear-gradient(90deg, #00ceff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.problem-title-underline {
  width: 60px;
  height: 2px;
  background: #00ceff;
  border-radius: 1px;
  margin: 8px 0 20px 0;
}

.problem-desc {
  font-size: 20px;
  line-height: 28px;
  color: #ffffff;
  margin-bottom: 16px;
}

.problem-highlight {
  font-size: 18px;
  line-height: 28px;
  color: #94a3b8;
}

.problem-highlight-cyan {
  color: #00ceff;
  font-weight: 600;
}

/* right column cards */
.problem-cards {
  flex: 1 1 400px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.problem-issue-card {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  padding: 16px;
  display: flex;
  gap: 16px;
  align-items: center;
  transition: border-color 0.2s;
}

.problem-issue-card:hover {
  border-color: rgba(139, 92, 246, 0.35);
}

.problem-issue-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: rgba(0, 206, 255, 0.1);
  border-radius: 6px;
  border: 1px solid rgba(0, 206, 255, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem-issue-icon img {
  /* align-self: center; */
  width: 16px;
  height: 16px;
}

.problem-issue-content {
  flex: 1;
}

.problem-issue-content h4 {
  color: #ffffff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.04em;
  margin: 0 0 4px 0;
}

.problem-issue-content p {
  color: #94a3b8;
  font-size: 15px;
  line-height: 18px;
  margin: 0;
}

/* ---------- IMPACT SECTION ---------- */
.problem-impact-wrapper {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.problem-impact-heading {
  color: #00ceff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin: 0;
}

.problem-impact-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.problem-impact-item {
  background: rgba(3, 13, 32, 0.6);
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: border-color 0.2s;
}

.problem-impact-item:hover {
  border-color: rgba(139, 92, 246, 0.35);
}

.problem-impact-icon {
  width: 32px;
  height: 32px;
  background: rgba(168, 85, 247, 0.1);
  border-radius: 8px;
  border: 1px solid rgba(168, 85, 247, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}

.problem-impact-icon img {
  width: 18px;
  height: 18px;
}

.problem-impact-text h4 {
  color: #ffffff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 4px 0;
}

.problem-impact-text p {
  color: #94a3b8;
  font-size: 13px;
  line-height: 16px;
  margin: 0;
}

/* ---------- STATS + CALLOUT ---------- */
.problem-stats-callout {
  border-top: 1px solid #00ceff;
  background-color: rgba(3, 13, 32, 0.6);
  width: 100%;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
  justify-content: space-between;
}

.problem-stats-row {
  display: flex;
  flex-wrap: wrap;
  gap: 32px 40px;
  flex: 2 1 600px;
}

.problem-stat-block {
  flex: 1 1 140px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.problem-stat-number {
  color: #00ceff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
}

.problem-stat-label {
  color: #94a3b8;
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

.problem-callout-box {
  flex: 1 1 240px;
  background: rgba(0, 206, 255, 0.05);
  border-radius: 8px;
  border: 1px solid #00ceff;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 206, 255, 0.15);
}

.problem-callout-box p {
  color: #ffffff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 11px;
  line-height: 18px;
  font-weight: 700;
  margin: 0;
  text-align: left;
}

/* ---------- SOLUTION SECTION (unique prefix .sol-*) ---------- */
.sol-section {
  color: #fff;
  font-family: 'Outfit', 'Inter', sans-serif;
  background-image: url('icones/whitepaper/background.webp');
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.sol-section>div {
  padding: 50px 40px 0px 40px;
}

/* hero row */
.sol-hero {
  display: flex;
  gap: 40px;
  justify-content: space-between;
  padding: 4px 0 12px 0;
}

.sol-left {
  flex: 1 1 400px;
  max-width: 520px;
}

.sol-badge {
  display: block;
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.sol-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 64px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
}

.sol-title-light {
  color: #ffffff;
}

.sol-title-grad {
  background: linear-gradient(90deg, #00ceff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.sol-title-rule {
  width: 60px;
  height: 2px;
  background: #00d4ff;
  border-radius: 1px;
  margin: 8px 0 20px 0;
}

.sol-lead {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 16px;
}

.sol-desc {
  font-size: 16px;
  line-height: 26px;
  color: #94a3b8;
}

.sol-right {
  flex: 1 1 360px;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.sol-approach-label {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sol-approach-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.sol-tag {
  background: #070f1f;
  border-radius: 100px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.sol-tag strong {
  color: #fff;
  font-weight: 700;
}

.sol-tag span {
  color: #94a3b8;
}

.sol-dot-cyan {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #00d4ff;
  flex-shrink: 0;
}

.sol-dot-purple {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #a855f7;
  flex-shrink: 0;
}

/* node visual */
.sol-node-visual {
  position: relative;
  height: 220px;
  margin-top: 8px;
  width: 100%;
  overflow: visible;
  background-image: url('icones/whitepaper/solution-globe.webp');
  background-position: center center;
  background-repeat: no-repeat;
}

.sol-glow-sphere {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: rgba(0, 212, 255, 0.08);
  border-radius: 50%;
  filter: blur(20px);
}

.sol-node-icon {
  position: absolute;
}

.sol-hex {
  width: 32px;
  height: 32px;
  left: 30px;
  top: 20px;
}

.sol-circ {
  width: 24px;
  height: 24px;
  left: 380px;
  top: 40px;
}

.sol-tri {
  width: 28px;
  height: 28px;
  left: 80px;
  top: 160px;
}

.sol-hex2 {
  width: 36px;
  height: 36px;
  left: 340px;
  top: 170px;
}

.sol-dash-line {
  position: absolute;
  height: 0;
  border-top: 1px dashed;
  opacity: 0.2;
}

.sol-dash1 {
  width: 120px;
  border-color: #00d4ff;
  left: 62px;
  top: 40px;
  transform: rotate(22deg);
}

.sol-dash2 {
  width: 140px;
  border-color: #a855f7;
  left: 350px;
  top: 175px;
  transform: rotate(-135deg);
}

/* ---------- PILLARS ---------- */
.sol-pillars-wrap {
  padding: 8px 0 8px 0;
}

.sol-pillars-head {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}

.sol-pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.sol-pillar-card {
  border-radius: 16px;
  padding: 24px 20px;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: rgba(3, 13, 32, 0.6);
  border: 1px solid rgba(0, 212, 255, 0.15);
  transition: border-color 0.2s;
}

.sol-pillar-card:hover {
  border-color: rgba(0, 212, 255, 0.4);
}

.sol-pillar-purple {
  border-color: rgba(168, 85, 247, 0.2);
}

.sol-pillar-purple:hover {
  border-color: rgba(168, 85, 247, 0.4);
}

.sol-pillar-top img {
  width: 24px;
  height: 24px;
}

.sol-pillar-card h4 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  line-height: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.sol-pillar-card p {
  font-size: 14px;
  line-height: 22px;
  color: #94a3b8;
  margin: 0;
}

/* ---------- ENABLES ---------- */
.sol-enables-wrap {
  padding: 8px 0 0 0;
}

.sol-enables-head {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}

.sol-enables-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 12px;
}

.sol-enable-item {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.15);
  padding: 12px 12px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  transition: border-color 0.2s;
}

.sol-enable-item:hover {
  border-color: rgba(139, 92, 246, 0.35);
}

.sol-enable-item img {
  width: 20px;
  height: 20px;
}

.sol-enable-item span {
  font-size: 15px;
  line-height: 18px;
  font-weight: 600;
  color: #fff;
}

/* ---------- FOOTER ---------- */
.sol-footer {
  margin-top: 20px;
  display: flex;
  flex-direction: row;
  gap: 0px;
}

.sol-section>.sol-footer {
  padding: 30px 20px;
}

.sol-footer-row {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  margin-right: 20px;
}

.sol-footer-brand {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.sol-footer-domain {
  color: #fff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.sol-footer-banner {
  display: flex;
  align-items: center;
  padding: 12px 0;
  margin-left: auto;
}

.sol-footer-banner p {
  border-top: 2px solid #00d4ff;
  padding-top: 10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.sol-footer-highlight {
  background: rgba(0, 212, 255, 0.05);
  border-radius: 12px;
  border: 1px solid #00d4ff;
  padding: 12px 20px;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.12);
  width: 20%;
}

.sol-footer-highlight p {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 11px;
  line-height: 20px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.sol-footer-divider {
  border-top: 1px solid rgba(139, 92, 246, 0.15);
  padding: 8px 0 0 0;
  height: 8px;
}

/* ---------- ARCHITECTURE SECTION (unique prefix .arch-*) ---------- */
.arch-section {
  padding: 0px;
  color: #fff;
  font-family: 'Outfit', 'Inter', sans-serif;
}

.arch-section>div {
  padding: 30px;
}

/* hero */
.arch-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  justify-content: space-between;
  padding-bottom: 8px;
}

.arch-left {
  flex: 1 1 420px;
  max-width: 520px;
}

.arch-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.arch-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.4rem, 5vw, 42px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
}

.arch-title-white {
  color: #fff;
}

.arch-title-grad {
  background: linear-gradient(90deg, #00ceff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.arch-title-rule {
  width: 60px;
  height: 2px;
  background: #00d4ff;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.arch-lead {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
  color: #fff;
}

.arch-desc {
  font-size: 15px;
  line-height: 1.5;
  color: #94a3b8;
  margin-top: 8px;
}

.arch-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.arch-tag-cyan,
.arch-tag-purple,
.arch-tag-teal {
  background: #070f1f;
  border-radius: 100px;
  padding: 8px 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: 15px;
  border: 1px solid rgba(0, 212, 255, 0.25);
}

.arch-tag-purple {
  border-color: rgba(168, 85, 247, 0.25);
}

.arch-tag-teal {
  border-color: rgba(0, 229, 204, 0.25);
}

.arch-tag-cyan .arch-dot {
  background: #00d4ff;
}

.arch-tag-purple .arch-dot {
  background: #a855f7;
}

.arch-tag-teal .arch-dot {
  background: #00e5cc;
}

.arch-tag-cyan .arch-dot,
.arch-tag-purple .arch-dot,
.arch-tag-teal .arch-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}

.arch-right {
  flex: 1 1 360px;
  max-width: 440px;
}

.arch-benefits-head {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.arch-benefits-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.arch-benefit-item {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.arch-benefit-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: #00d4ff;
  background: rgba(0, 212, 255, 0.08);
  border: 1px solid rgba(0, 212, 255, 0.2);
}

.arch-benefit-item strong {
  color: #fff;
  font-size: 15px;
  font-weight: 700;
}

.arch-benefit-item span {
  color: #94a3b8;
  font-size: 13px;
  line-height: 1.4;
}

/* diagram */
.arch-diagram {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 0;
}

.arch-layers-col {
  flex: 2 1 600px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arch-layer-card {
  border-radius: 16px;
  padding: 12px 16px;
  background: rgba(3, 13, 32, 0.6);
  border: 1px solid rgba(0, 212, 255, 0.25);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.06);
}

.arch-layer-ai {
  border-color: rgba(0, 212, 255, 0.3);
}

.arch-layer-web3 {
  border-color: rgba(168, 85, 247, 0.3);
}

.arch-layer-depin {
  border-color: rgba(0, 229, 204, 0.3);
}

.arch-layer-card h5 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}

.arch-layer-ai h5 {
  color: #00d4ff;
}

.arch-layer-web3 h5 {
  color: #a855f7;
}

.arch-layer-depin h5 {
  color: #00e5cc;
}

.arch-layer-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.arch-layer-item {
  background: #070f1f;
  border-radius: 10px;
  border: 1px solid rgba(84, 21, 231, 0.12);
  padding: 8px 10px;
  flex: 1 0 90px;
  max-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
}

.arch-layer-item img {
  width: 24px;
  height: 24px;
}

.arch-layer-item span {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.arch-layer-item small {
  font-size: 12px;
  color: #64748b;
}

.arch-outputs-col {
  flex: 1 1 200px;
  min-width: 180px;
  max-width: 280px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.arch-outputs-col h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.arch-output-item {
  background: rgba(3, 13, 32, 0.6);
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.arch-output-quote {
  background: rgba(0, 212, 255, 0.05);
  border-radius: 12px;
  border: 1px solid #00d4ff;
  padding: 14px;
}

.arch-output-quote p {
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

.arch-output-quote span {
  font-size: 13px;
  color: #00d4ff;
}

/* bottom flow */
.arch-bottom {
  padding: 8px 0 0 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.arch-flow-head {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.arch-flow-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 20px;
  align-items: center;
  justify-content: space-between;
}

.arch-flow-steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 8px;
}

.arch-step {
  background: #070f1f;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 6px 14px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}

.arch-arrow {
  color: #64748b;
  font-size: 15px;
}

.arch-value-loop-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(168, 85, 247, 0.08);
  border-radius: 100px;
  padding: 6px 16px;
  border: 1px solid rgba(168, 85, 247, 0.2);
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #a855f7;
}

.arch-loop-icon {
  font-size: 18px;
}

.arch-glance-bar {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 0 0 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

.arch-glance-items {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.arch-glance {
  background: #070f1f;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 6px 14px;
  display: flex;
  flex-direction: column;
}

.arch-glance strong {
  font-size: 18px;
  font-weight: 700;
  color: #00d4ff;
}

.arch-glance span {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  color: #94a3b8;
}

.arch-glance-brand {
  display: flex;
  gap: 24px;
  align-items: center;
  width: 100%;
  justify-content: space-between;
}

.arch-glance-brand span:first-child {
  color: #64748b;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.arch-glance-brand span:last-child {
  color: #fff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
}

/* ================= VYRONIX AI (prefix .wpai-) ================= */
.wpai-section {
  padding: 0 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
}

.wpai-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 20px 0 12px 0;
}

.wpai-hero-left {
  flex: 1 1 420px;
  max-width: 648px;
}

.wpai-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.wpai-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
}

.wpai-title-white {
  color: #fff;
}

.wpai-title-grad {
  background: linear-gradient(90deg, #00ceff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wpai-title-rule {
  width: 60px;
  height: 2px;
  background: #00d4ff;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.wpai-hero-sub {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
}

.wpai-hero-desc {
  font-size: 18px;
  line-height: 26px;
  color: #94a3b8;
  margin-top: 8px;
}

.wpai-hero-right {
  flex: 1 1 300px;
  min-width: 240px;
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.wpai-capabilities h5,
.wpai-metrics h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.wpai-cap-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.wpai-cap-item {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(0, 212, 255, 0.12);
  padding: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.wpai-cap-item img {
  width: 36px;
  height: 36px;
}

.wpai-cap-item strong {
  font-size: 15px;
  color: #fff;
}

.wpai-cap-item span {
  font-size: 13px;
  color: #64748b;
}

.wpai-metrics-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.wpai-metric {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 14px 16px;
}

.wpai-metric span {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 26px;
  font-weight: 700;
  color: #00d4ff;
}

.wpai-metric small {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.wpai-how-works {
  padding: 16px 0 8px 0;
}

.wpai-how-works h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.wpai-steps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.wpai-step {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 16px;
  min-width: 120px;
  flex: 1 0 auto;
  text-align: center;
}

.wpai-step span {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #00d4ff;
}

.wpai-step strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.wpai-step small {
  font-size: 13px;
  color: #64748b;
}

.wpai-arrow {
  color: #64748b;
  font-size: 18px;
  flex-shrink: 0;
}

.wpai-features {
  padding: 12px 0 8px 0;
}

.wpai-features h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.wpai-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.wpai-feature-card {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.wpai-feature-card img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.wpai-feature-card h6 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 4px 0;
}

.wpai-feature-card p {
  font-size: 13px;
  line-height: 18px;
  color: #94a3b8;
  margin: 0;
}

.wpai-bottom {
  padding: 16px 0 0 0;
}

.wpai-bottom-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}

.wpai-quote-box {
  flex: 2 1 300px;
  background: #05070f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
}

.wpai-quote-box p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
  margin: 0;
}

.wpai-cta-box {
  flex: 1 1 200px;
  background: rgba(0, 212, 255, 0.05);
  border-radius: 8px;
  border: 1px solid #00d4ff;
  padding: 20px;
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.12);
}

.wpai-cta-box p {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0;
}

.wpai-footer-bar {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wpai-footer-bar span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.wpai-footer-bar span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ================= VYRONIX WEB3 (prefix .wpweb3-) ================= */
.wpweb3-section {
  padding: 0 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
}

.wpweb3-hero {
  padding: 12px 0 8px 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpweb3-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.wpweb3-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 4px 0 4px 0;
}

.wpweb3-title-white {
  color: #fff;
}

.wpweb3-title-grad {
  background: linear-gradient(90deg, #00ceff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wpweb3-title-rule {
  width: 60px;
  height: 2px;
  background: #00d4ff;
  border-radius: 1px;
  margin: 4px 0 12px 0;
}

.wpweb3-sub {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
}

.wpweb3-desc {
  font-size: 18px;
  line-height: 26px;
  color: #94a3b8;
  margin: 4px 0 12px 0;
}

.wpweb3-features h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.wpweb3-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.wpweb3-feature-card {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpweb3-feature-card .wpweb3-icon-wrap {
  width: 44px;
  height: 44px;
  background: rgba(123, 47, 190, 0.08);
  border-radius: 12px;
  border: 1px solid rgba(123, 47, 190, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpweb3-feature-card .wpweb3-icon-wrap img {
  width: 22px;
  height: 22px;
}

.wpweb3-feature-card strong {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.wpweb3-feature-card span {
  font-size: 13px;
  line-height: 18px;
  color: #94a3b8;
}

.wpweb3-stats {
  background: #05070f;
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  border-bottom: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 20px;
  margin: 12px 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.wpweb3-stat {
  display: flex;
  flex-direction: column;
}

.wpweb3-stat span {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #7b2fbe;
}

.wpweb3-stat small {
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
}

.wpweb3-governance {
  padding: 4px 0 12px 0;
}

.wpweb3-governance h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.wpweb3-steps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.wpweb3-step {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 16px;
  min-width: 120px;
  flex: 1 0 auto;
  text-align: center;
}

.wpweb3-step span {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #7b2fbe;
}

.wpweb3-step strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.wpweb3-step small {
  font-size: 12px;
  color: #64748b;
}

.wpweb3-arrow {
  color: #64748b;
  font-size: 18px;
  flex-shrink: 0;
}

.wpweb3-trust {
  padding: 8px 0 12px 0;
}

.wpweb3-trust h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.wpweb3-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.wpweb3-trust-card {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpweb3-trust-card .wpweb3-icon-wrap {
  width: 36px;
  height: 36px;
  background: rgba(123, 47, 190, 0.08);
  border-radius: 8px;
  border: 1px solid rgba(123, 47, 190, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.wpweb3-trust-card .wpweb3-icon-wrap img {
  width: 18px;
  height: 18px;
}

.wpweb3-trust-card h6 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin: 0;
}

.wpweb3-trust-card p {
  font-size: 13px;
  line-height: 18px;
  color: #94a3b8;
  margin: 0;
}

.wpweb3-bottom {
  padding: 8px 0 0 0;
}

.wpweb3-quote-banner {
  background: #05070f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
  position: relative;
}

.wpweb3-accent-line {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: #7b2fbe;
  border-radius: 12px 0 0 12px;
}

.wpweb3-quote-banner p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
  margin: 0;
  text-align: center;
}

.wpweb3-footer-bar {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wpweb3-footer-bar span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.wpweb3-footer-bar span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ================= VYRONIX DePIN (prefix .wpdepin-) ================= */
.wpdepin-section {
  padding: 28px 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.wpdepin-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.wpdepin-left {
  flex: 1 1 420px;
  max-width: 648px;
}

.wpdepin-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.wpdepin-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
}

.wpdepin-title-white {
  color: #fff;
}

.wpdepin-title-grad {
  background: linear-gradient(90deg, #00ceff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wpdepin-title-rule {
  width: 60px;
  height: 2px;
  background: #00e5cc;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.wpdepin-sub {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
  color: #fff;
}

.wpdepin-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 8px 0 12px 0;
}

.wpdepin-live-stats {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 204, 0.15);
  padding: 12px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
}

.wpdepin-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.wpdepin-stat-item span {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #00e5cc;
}

.wpdepin-stat-item small {
  font-size: 13px;
  color: #64748b;
}

.wpdepin-stat-divider {
  width: 1px;
  height: 16px;
  background: rgba(0, 229, 204, 0.2);
}

.wpdepin-right {
  flex: 1 1 280px;
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 204, 0.15);
  padding: 16px;
}

.wpdepin-right h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.wpdepin-node-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpdepin-node-row {
  background: #020b1a;
  border-radius: 10px;
  border: 1px solid rgba(0, 229, 204, 0.12);
  padding: 10px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wpdepin-node-row span:first-child {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

.wpdepin-node-row span:first-child img {
  width: 28px;
  height: 28px;
}

.wpdepin-node-row .wpdepin-count {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #00e5cc;
}

.wpdepin-components h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.wpdepin-components-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.wpdepin-comp-card {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wpdepin-comp-card img {
  width: 36px;
  height: 36px;
}

.wpdepin-comp-card strong {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.wpdepin-comp-card span {
  font-size: 13px;
  line-height: 18px;
  color: #94a3b8;
}

.wpdepin-journey h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.wpdepin-steps-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.wpdepin-step {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 16px;
  min-width: 120px;
  flex: 1 0 auto;
  text-align: center;
}

.wpdepin-step span {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  color: #00e5cc;
}

.wpdepin-step strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.wpdepin-step small {
  font-size: 13px;
  color: #64748b;
}

.wpdepin-arrow {
  color: #64748b;
  font-size: 18px;
  flex-shrink: 0;
}

.wpdepin-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.wpdepin-quote-box {
  flex: 2 1 300px;
  background: #05070f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
  position: relative;
}

.wpdepin-accent-bar {
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 4px;
  background: #00e5cc;
  border-radius: 2px;
}

.wpdepin-quote-box p {
  font-size: 17px;
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
  margin: 0;
  padding-left: 16px;
}

.wpdepin-impact-box {
  flex: 1 1 240px;
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(0, 229, 204, 0.15);
  padding: 20px;
}

.wpdepin-impact-box h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.wpdepin-impact-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 15px;
  line-height: 1.5;
  color: #94a3b8;
  margin-bottom: 10px;
}

.wpdepin-impact-item:last-child {
  margin-bottom: 0;
}

.wpdepin-impact-item .wpdepin-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  border-radius: 3px;
  background: #00e5cc;
  margin-top: 6px;
}

.wpdepin-footer {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wpdepin-footer span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.wpdepin-footer span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ---------- ECOSYSTEM SECTION (unique prefix .eco-*) ---------- */
.eco-section {
  padding: 0 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
}

/* hero */
.eco-hero {
  padding: 16px 0 8px 0;
}

.eco-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.eco-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
  color: #fff;
}

.eco-title-rule {
  width: 60px;
  height: 2px;
  background: #00e5cc;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.eco-sub {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
  color: #fff;
}

.eco-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 8px 0 0 0;
}

/* products */
.eco-products h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.eco-products-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.eco-product-card {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.eco-product-card img {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.eco-product-card strong {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
}

.eco-product-card span {
  font-size: 13px;
  line-height: 18px;
  color: #94a3b8;
}

/* integrations */
.eco-integrations {
  padding: 12px 0 8px 0;
}

.eco-integrations h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.eco-integration-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.eco-chip {
  background: #070f1f;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #fff;
}

.eco-chip img {
  width: 16px;
  height: 16px;
}

/* participate */
.eco-participate {
  padding: 8px 0 12px 0;
}

.eco-participate h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.eco-steps-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.eco-step {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.eco-step span {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #00d4ff;
  flex-shrink: 0;
}

.eco-step strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.eco-step small {
  font-size: 13px;
  color: #64748b;
}

/* bottom */
.eco-bottom {
  padding: 12px 0 0 0;
}

.eco-quote-card {
  background: #05070f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.2);
}

.eco-gradient-bar {
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #00d4ff 0%, #a855f7 100%);
  border-radius: 2px;
}

.eco-quote-card p {
  font-size: 18px;
  line-height: 28px;
  font-weight: 500;
  color: #fff;
  text-align: center;
  margin: 0;
}

.eco-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.eco-badge-pill {
  background: #070f1f;
  border-radius: 999px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}

.eco-badge-pill img {
  width: 16px;
  height: 16px;
}

.eco-footer-bar {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.eco-footer-bar span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.eco-footer-bar span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ---------- TOKENOMICS SECTION (unique prefix .toko-*) ---------- */
.toko-section {
  padding: 0 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
}

/* hero */
.toko-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 16px 0 8px 0;
}

.toko-left {
  flex: 2 1 400px;
}

.toko-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.toko-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
  color: #f59e0b;
}

.toko-title-rule {
  width: 60px;
  height: 2px;
  background: #00d4ff;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.toko-sub {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
  color: #fff;
}

.toko-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 8px 0 0 0;
}

.toko-details {
  flex: 1 1 280px;
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 24px;
}

.toko-details h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.detail-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid rgba(139, 92, 246, 0.08);
}

.detail-row:last-child {
  border-bottom: none;
}

.detail-row span {
  font-size: 15px;
  color: #94a3b8;
}

.detail-row strong {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
}

/* distribution */
.toko-distribution {
  padding: 12px 0 8px 0;
}

.toko-distribution h5 {
  color: #f59e0b;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.dist-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.dist-left {
  flex: 2 1 400px;
}

.dist-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 4px 0;
}

.dist-item span:first-child {
  width: 160px;
  font-size: 14px;
  font-weight: 500;
  color: #fff;
}

.toko-bar {
  height: 8px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
  flex-shrink: 0;
}

.toko-bar.cyan {
  background: #00d4ff;
}

.toko-bar.purple {
  background: #a855f7;
}

.toko-bar.teal {
  background: #00e5cc;
}

.toko-bar.blue {
  background: #3b82f6;
}

.toko-bar.pink {
  background: #ec4899;
}

.toko-bar.orange {
  background: #f97316;
}

.toko-bar.green {
  background: #22c55e;
}

.toko-pct {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
}

.toko-pct.cyan {
  color: #00d4ff;
}

.toko-pct.purple {
  color: #a855f7;
}

.toko-pct.teal {
  color: #00e5cc;
}

.toko-pct.blue {
  color: #3b82f6;
}

.toko-pct.pink {
  color: #ec4899;
}

.toko-pct.orange {
  color: #f97316;
}

.toko-pct.green {
  color: #22c55e;
}

.dist-right {
  flex: 1 1 240px;
  background: #05070f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dist-right div {
  display: flex;
  flex-direction: column;
}

.dist-right small {
  font-size: 13px;
  color: #94a3b8;
}

.dist-right strong {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: #94a3b8;
}

.legend .toko-dot {
  width: 4px;
  height: 4px;
  border-radius: 2px;
}

.legend .toko-dot.cyan {
  background: #00d4ff;
}

.legend .toko-dot.purple {
  background: #a855f7;
}

.legend .toko-dot.teal {
  background: #00e5cc;
}

/* utility */
.toko-utility {
  padding: 8px 0 12px 0;
}

.toko-utility h5 {
  color: #f59e0b;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.utility-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.util-card {
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 20px;
}

.util-card h6 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f59e0b;
  margin: 0 0 4px 0;
}

.util-card .toko-accent-line {
  width: 24px;
  height: 1px;
  background: #f59e0b;
  margin-bottom: 8px;
}

.util-card p {
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
  margin: 0;
}

/* vesting */
.toko-vesting {
  padding: 8px 0 12px 0;
}

.toko-vesting h5 {
  color: #f59e0b;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.vesting-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.vest-card {
  background: black;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 16px;
}

.vest-card div {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.vest-card span {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.vest-card strong {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #f59e0b;
}

.vest-card small {
  display: block;
  font-size: 13px;
  line-height: 1.4;
  color: #94a3b8;
  margin-top: 8px;
}

/* bottom stats */
.toko-stats {
  background: black;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
  margin: 8px 0;
}

.toko-stat-block {
  display: flex;
  flex-direction: column;
}

.toko-stat-block span {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #f59e0b;
}

.toko-stat-block small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

.stat-divider {
  width: 1px;
  height: 40px;
  background: rgba(139, 92, 246, 0.15);
}

/* footer */
.toko-footer {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  margin-top: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toko-footer span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.toko-footer span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ---------- ROADMAP SECTION (unique prefix .roadmap-*) ---------- */
.roadmap-section {
  padding: 40px 48px 0px 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

/* hero */
.roadmap-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
}

.roadmap-left {
  flex: 2 1 400px;
}

.roadmap-badge {
  color: #00d4ff;
  /* border: none; */
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.roadmap-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
}

.roadmap-title-white {
  color: #fff;
  margin-right: -20px;
}

.roadmap-title-grad {
  background: linear-gradient(90deg, #00ceff 0%, #a855f7 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.roadmap-title-rule {
  width: 60px;
  height: 2px;
  background: #00d4ff;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.roadmap-sub {
  font-size: 20px;
  line-height: 1.6;
  font-weight: 600;
  color: #fff;
}

.roadmap-desc {
  font-size: 18px;
  line-height: 1.6;
  color: #94a3b8;
  margin: 8px 0 0 0;
}

.roadmap-right {
  flex: 1 1 280px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stat-grid {
  display: flex;
  gap: 16px;
}

.stat-chip {
  flex: 1;
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px;
}

.stat-chip span {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #00d4ff;
}

.stat-chip small {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
}

/* phases */
.roadmap-phases h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.phases-scroll {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0;
}

.phase-card {
  flex: 1 1 140px;
  min-width: 160px;
  background: #070f1f;
  border-radius: 12px;
  padding: 16px;
  border-top: 3px solid #64748b;
  border-left: 1px solid rgba(139, 92, 246, 0.12);
  border-right: 1px solid rgba(139, 92, 246, 0.12);
  border-bottom: 1px solid rgba(139, 92, 246, 0.12);
}

.phase-card.complete {
  border-top-color: #22c55e;
}

.phase-card.active {
  border-top-color: #00d4ff;
}

.phase-card.upcoming {
  border-top-color: #f59e0b;
}

.phase-card.future {
  border-top-color: #a855f7;
}

.phase-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.phase-header span:first-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
}

.phase-card.complete .phase-header span:first-child {
  color: #22c55e;
}

.phase-card.active .phase-header span:first-child {
  color: #00d4ff;
}

.phase-card.upcoming .phase-header span:first-child {
  color: #f59e0b;
}

.phase-card.future .phase-header span:first-child {
  color: #a855f7;
}

.roadmap-badge {
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  /* border-radius: 4px; */
  /* border: 1px solid; */
}

.roadmap-badge.complete {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.08);
}

.roadmap-badge.active {
  color: #00d4ff;
  border-color: rgba(0, 212, 255, 0.2);
  background: rgba(0, 212, 255, 0.08);
}

.roadmap-badge.upcoming {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.08);
}

.roadmap-badge.future {
  color: #a855f7;
  border-color: rgba(168, 85, 247, 0.2);
  background: rgba(168, 85, 247, 0.08);
}

.phase-card h6 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 8px 0 8px 0;
}

.phase-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.phase-card ul li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: #94a3b8;
  padding: 3px 0;
}

.phase-card ul li .roadmap-dot {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  margin-top: 5px;
}

.roadmap-dot.green {
  background: #22c55e;
}

.roadmap-dot.cyan {
  background: #00d4ff;
}

.roadmap-dot.amber {
  background: #f59e0b;
}

.roadmap-dot.purple {
  background: #a855f7;
}

.roadmap-arrow {
  color: #64748b;
  font-size: 18px;
  padding: 0 4px;
  align-self: center;
  opacity: 0.4;
}

/* timeline */
.roadmap-timeline h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.timeline {
  position: relative;
}

.dash-line {
  border-top: 1px dashed rgba(0, 212, 255, 0.25);
  margin-bottom: 24px;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

.year strong {
  display: inline-block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #00d4ff;
  margin-left: 8px;
}

.dot-cyan {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00d4ff;
  border: 4px solid #020b1a;
  vertical-align: middle;
}

.year ul {
  list-style: none;
  padding: 0;
  margin: 8px 0 0 0;
}

.year ul li {
  font-size: 13px;
  line-height: 1.5;
  color: #94a3b8;
  padding: 3px 0;
  position: relative;
  padding-left: 12px;
}

.year ul li::before {
  content: "•";
  position: absolute;
  left: 0;
  color: #00d4ff;
}

/* bottom */
.roadmap-bottom {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.quote-card {
  background: #05070f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 32px;
  text-align: center;
}

.quote-card p {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 500;
  color: #fff;
  margin: 0 0 20px 0;
}

.status-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.status-badges span {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
}

.status-badges span img {
  width: 12px;
  height: 12px;
}

.badge-complete {
  background: rgba(34, 197, 94, 0.12);
  color: #22c55e;
  border: 1px solid rgba(34, 197, 94, 0.15);
}

.badge-active {
  background: rgba(0, 212, 255, 0.12);
  color: #00d4ff;
  border: 1px solid rgba(0, 212, 255, 0.15);
}

.footer-bar {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.footer-bar span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.footer-bar span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ---------- GOVERNANCE SECTION (unique prefix .gov-*) ---------- */
.gov-section {
  padding: 40px 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* hero */
.gov-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 8px 0;
}

.gov-left {
  flex: 2 1 400px;
}

.gov-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.gov-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
}

.gov-title-white {
  color: #fff;
  margin-right: -20px;
}

.gov-title-grad {
  background: linear-gradient(90deg, #fff 0%, #faf4ff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.gov-title-rule {
  width: 60px;
  height: 2px;
  background: #00d4ff;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.gov-sub {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
}

.gov-desc {
  font-size: 18px;
  line-height: 26px;
  color: #94a3b8;
  margin: 8px 0 12px 0;
}

.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.tag-row span {
  background: #070f1f;
  border-radius: 8px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 8px 14px;
  font-size: 13px;
  color: #94a3b8;
}

.gov-right {
  flex: 1 1 280px;
  max-width: 420px;
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.gov-right h5 {
  color: #7b2fbe;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.dao-diagram {
  position: relative;
  width: 220px;
  height: 220px;
}

.center-node {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid #00d4ff;
  background: #070f1f;
}

.node {
  position: absolute;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #020b1a;
  border: 1px solid rgba(139, 92, 246, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #94a3b8;
  text-align: center;
}

.node.propose {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
}

.node.vote {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
}

.node.execute {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
}

.node.discuss {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
}

.connector {
  position: absolute;
  border-top: 1px solid rgba(0, 212, 255, 0.3);
  width: 30px;
}

.connector.top {
  top: 56px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}

.connector.right {
  top: 50%;
  right: 56px;
  transform: translateY(-50%);
}

.connector.bottom {
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%) rotate(90deg);
}

.connector.left {
  top: 50%;
  left: 56px;
  transform: translateY(-50%);
}

.flow-text {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

/* how governance works */
.gov-how {
  padding: 6px 0;
}

.gov-how h5 {
  color: #7b2fbe;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.steps-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
}

.step-item {
  flex: 1 0 auto;
  min-width: 120px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.step-item span:first-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 16px;
  font-weight: 800;
  color: #7b2fbe;
}

.step-item strong {
  display: block;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.step-item small {
  display: block;
  font-size: 11px;
  line-height: 16px;
  color: #94a3b8;
}

.gov-arrow {
  color: #64748b;
  font-size: 18px;
}

/* three column */
.gov-three {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 6px 0;
}

.col {
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 20px;
}

.col h5 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.col:first-child h5 {
  color: #7b2fbe;
}

.col:nth-child(2) h5 {
  color: #00d4ff;
}

.col:nth-child(3) h5 {
  color: #f59e0b;
}

.col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.col ul li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #94a3b8;
  padding: 4px 0;
}

.dot-purple {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #7b2fbe;
  margin-top: 6px;
}

.col-desc {
  font-size: 13px;
  color: #94a3b8;
  margin: 0 0 12px 0;
}

.treasury-item {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: #94a3b8;
  padding: 4px 0;
}

.treasury-item .gov-pct {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
}

.gov-pct.cyan {
  color: #00d4ff;
}

.gov-pct.purple {
  color: #7b2fbe;
}

.gov-pct.teal {
  color: #00e5cc;
}

.gov-pct.amber {
  color: #f59e0b;
}

.gov-bar {
  width: 100%;
  height: 6px;
  background: #020b1a;
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.gov-bar .fill {
  height: 100%;
  border-radius: 3px;
}

.fill.cyan {
  background: #00d4ff;
}

.fill.purple {
  background: #7b2fbe;
}

.fill.teal {
  background: #00e5cc;
}

.fill.amber {
  background: #f59e0b;
}

.principle {
  display: flex;
  gap: 12px;
  padding: 8px 0;
}

.principle .icon-wrap {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  background: rgba(123, 47, 190, 0.08);
  border: 1px solid rgba(245, 158, 11, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}

.principle .icon-wrap img {
  width: 14px;
  height: 14px;
}

.principle strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}

.principle span {
  font-size: 11px;
  color: #94a3b8;
}

/* bottom */
.gov-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 6px 0;
}

.lifecycle {
  flex: 2 1 300px;
  background: #05070f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 24px;
}

.lifecycle h5 {
  color: #7b2fbe;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.steps {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding: 8px 0;
}

.steps span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: #fff;
}

.steps span span:first-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 800;
  color: #7b2fbe;
}


.steps span span:last-child {

  font-size: 15px;
  font-weight: 800;
  color: rgba(139, 92, 246, 0.15);
}

.gov-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  padding-top: 8px;
}

.dot-teal {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #00e5cc;
}

.quote-box {
  flex: 1 1 240px;
  background: #05070f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.quote-box p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 12px 0;
}

.quote-box .tagline {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
}

/* footer */
.gov-footer {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.gov-footer span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.gov-footer span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ---------- SECURITY SECTION (unique prefix .sec-*) ---------- */
.sec-section {
  padding: 30px 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* hero */
.sec-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 6px 0;
}

.sec-left {
  flex: 2 1 400px;
}

.sec-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.sec-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
  color: #fff;
}

.sec-title-rule {
  width: 60px;
  height: 2px;
  background: #00d4ff;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.sec-sub {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
}

.sec-desc {
  font-size: 18px;
  line-height: 26px;
  color: #94a3b8;
  margin: 8px 0 0 0;
}

.sec-right {
  flex: 1 1 280px;
  max-width: 420px;
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 24px;
}

.sec-right h5 {
  color: #3b82f6;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.layer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.layer {
  padding: 10px 16px;
  border-radius: 6px;
  background: #05070f;
  border-left: 3px solid transparent;
}

.layer.cyan {
  border-left-color: #00d4ff;
}

.layer.purple {
  border-left-color: #8b5cf6;
}

.layer.teal {
  border-left-color: #00e5cc;
}

.layer.blue {
  border-left-color: #3b82f6;
}

.layer.amber {
  border-left-color: #f59e0b;
}

.layer span {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.layer.cyan span {
  color: #00d4ff;
}

.layer.purple span {
  color: #8b5cf6;
}

.layer.teal span {
  color: #00e5cc;
}

.layer.blue span {
  color: #3b82f6;
}

.layer.amber span {
  color: #f59e0b;
}

.layer small {
  font-size: 12px;
  color: #94a3b8;
}

/* pillars */
.sec-pillars {
  padding: 6px 0;
}

.sec-pillars h5 {
  color: #3b82f6;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.pillar {
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 20px;
}

.pillar .sec-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: #3b82f6;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.pillar .sec-icon img {
  width: 18px;
  height: 18px;
}

.pillar h6 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

.pillar p {
  font-size: 13px;
  line-height: 18px;
  color: #94a3b8;
  margin: 0;
}

/* features + audits */
.sec-features-audits {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  padding: 6px 0;
}

.sec-features {
  flex: 2 1 400px;
}

.sec-features h5 {
  color: #3b82f6;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}

.feature-item {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px;
}

.feature-item .check {
  display: inline-block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #22c55e;
  position: relative;
  margin-right: 8px;
}

.feature-item .check::after {
  content: "✓";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 10px;
  color: #fff;
}

.feature-item strong {
  display: inline;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}

.feature-item small {
  display: block;
  font-size: 13px;
  color: #94a3b8;
  margin-top: 4px;
}

.sec-audits {
  flex: 1 1 280px;
  max-width: 420px;
}

.sec-audits h5 {
  color: #3b82f6;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.audit-list {
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 20px;
}

.audit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid rgba(139, 92, 246, 0.08);
}

.audit-item:last-child {
  border-bottom: none;
}

.audit-item span:first-child {
  font-size: 15px;
  color: #94a3b8;
}

.sec-badge {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}

.sec-badge.green {
  color: #22c55e;
  border-color: rgba(34, 197, 94, 0.2);
  background: rgba(34, 197, 94, 0.08);
}

.sec-badge.cyan {
  color: #00d4ff;
  border-color: rgba(0, 212, 255, 0.2);
  background: rgba(0, 212, 255, 0.08);
}

.sec-badge.amber {
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.2);
  background: rgba(245, 158, 11, 0.08);
}

.compliance {
  margin-top: 16px;
}

.compliance h6 {
  color: #64748b;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 8px 0;
}

.compliance .sec-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.compliance .sec-tags span {
  background: #05070f;
  border-radius: 6px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 6px 10px;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: #64748b;
}

/* bottom */
.sec-bottom {
  padding: 8px 0;
}

.trust-card {
  background: #05070f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px 32px;
  text-align: center;
}

.trust-card h3 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #fff;
  margin: 0 0 12px 0;
}

.trust-card p {
  font-size: 15px;
  line-height: 22px;
  color: #94a3b8;
  max-width: 800px;
  margin: 0 auto;
}

/* footer */
.sec-footer {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.sec-footer span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.sec-footer span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ---------- TEAM SECTION (unique prefix .team-*) ---------- */
.team-section {
  padding: 30px 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* hero */
.team-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 8px 0;
}

.team-left {
  flex: 2 1 400px;
}

.team-badge {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.team-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
  color: #fff;
}

.team-title-rule {
  width: 60px;
  height: 2px;
  background: #00d4ff;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.team-sub {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
}

.team-desc {
  font-size: 18px;
  line-height: 26px;
  color: #94a3b8;
  margin: 8px 0 0 0;
}

.team-stats {
  flex: 1 1 240px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.team-stat-card {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 16px;
}

.team-stat-card span {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #00d4ff;
}

.team-stat-card small {
  font-size: 15px;
  font-weight: 500;
  color: #94a3b8;
}

/* core team */
.team-core {
  padding: 8px 0;
}

.team-core h5 {
  color: #00d4ff;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.team-grid {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.team-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.member-card {
  background: #0d1525;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.team-accent-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #00d4ff;
  opacity: 0.4;
}

.team-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
}

.team-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.team-avatar .team-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid transparent;
  pointer-events: none;
}

.team-ring.cyan {
  border-color: #00d4ff;
}

.team-ring.purple {
  border-color: #7b2fbe;
}

.team-ring.teal {
  border-color: #00e5cc;
}

.team-ring.amber {
  border-color: #f59e0b;
}

.team-ring.blue {
  border-color: #3b82f6;
}

.team-ring.pink {
  border-color: #ec4899;
}

.team-ring.green {
  border-color: #22c55e;
}

.team-ring.orange {
  border-color: #f97316;
}

.member-card h6 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px 0;
}

.member-card .team-role {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #00d4ff;
  margin-bottom: 6px;
}

.member-card p {
  font-size: 13px;
  line-height: 1.4;
  color: #94a3b8;
  margin: 0;
}

/* panels */
.team-panels {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding: 8px 0;
}

.panel {
  flex: 1 1 280px;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
}

.panel.why {
  background: #070f1f;
}

.panel.hiring {
  background: #070f1f;
  border-color: rgba(245, 158, 11, 0.2);
}

.panel h5 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 16px 0;
}

.panel.why h5 {
  color: #00d4ff;
}

.panel.hiring h5 {
  color: #f59e0b;
}

.why-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 6px 0;
}

.why-item .team-dot {
  flex-shrink: 0;
  width: 4px;
  height: 4px;
  border-radius: 2px;
  background: #00d4ff;
  margin-top: 6px;
}

.why-item strong {
  color: #fff;
  font-weight: 700;
}

.why-item {
  font-size: 14px;
  color: #94a3b8;
}

.panel.hiring p {
  font-size: 15px;
  color: #94a3b8;
  margin: 0 0 16px 0;
}

.team-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.team-tags span {
  background: rgba(245, 158, 11, 0.08);
  border-radius: 20px;
  border: 1px solid rgba(245, 158, 11, 0.2);
  padding: 6px 12px;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #f59e0b;
}

/* quote */
.team-quote {
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
  text-align: center;
  margin: 8px 0;
}

.team-quote p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 8px 0;
}

.team-quote span {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #00d4ff;
}

/* footer */
.team-footer {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.team-footer span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.team-footer span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ---------- ADVISORS SECTION (unique prefix .adv-*) ---------- */
.adv-section {
  padding: 30px 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* hero */
.adv-hero {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  padding: 6px 0;
}

.adv-left {
  flex: 2 1 400px;
}

.adv-badge {
  color: #f59e0b;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.adv-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
  color: #fff;
}

.adv-title-rule {
  width: 60px;
  height: 2px;
  background: #f59e0b;
  border-radius: 1px;
  margin: 8px 0 16px 0;
}

.adv-sub {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
}

.adv-desc {
  font-size: 18px;
  line-height: 26px;
  color: #94a3b8;
  margin: 8px 0 0 0;
}

.adv-stats {
  flex: 1 1 240px;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.adv-stat-card {
  background: #070f1f;
  border-radius: 12px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 12px 16px;
}

.adv-stat-card span {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 800;
  color: #f59e0b;
}

.adv-stat-card small {
  font-size: 15px;
  font-weight: 500;
  color: #94a3b8;
}

/* advisory board */
.adv-board {
  padding: 0 0 6px 0;
}

.adv-board h5 {
  color: #f59e0b;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.adv-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}

.advisor-card {
  background: #0d1525;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 20px;
  position: relative;
  overflow: hidden;
}

.advisor-card .accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: #f59e0b;
  opacity: 0.4;
}

.advisor-card .adv-avatar {
  position: relative;
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
}

.advisor-card .adv-avatar img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
}

.advisor-card .adv-avatar .adv-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2px solid #f59e0b;
  pointer-events: none;
}

.advisor-card h6 {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 2px 0;
}

.advisor-card .adv-role {
  display: block;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  color: #f59e0b;
  margin-bottom: 8px;
}

.advisor-card .affiliation {
  font-size: 13px;
  font-weight: 600;
  color: #94a3b8;
  margin: 0 0 4px 0;
}

.advisor-card .bio {
  font-size: 12px;
  line-height: 1.4;
  color: #64748b;
  margin: 0;
}

/* contributions */
.adv-contributions {
  padding: 6px 0;
}

.adv-contributions h5 {
  color: #f59e0b;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0 0 12px 0;
}

.contrib-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.contrib-card {
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 20px;
}

.contrib-card .adv-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background-color: #F59E0B;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 12px;
}

.contrib-card .adv-icon img {
  width: 18px;
  height: 18px;
}

.contrib-card h6 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 8px 0;
}

.contrib-card p {
  font-size: 13px;
  line-height: 18px;
  color: #94a3b8;
  margin: 0;
}

/* quote */
.adv-quote {
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(245, 158, 11, 0.15);
  padding: 24px;
  text-align: center;
  margin: 6px 0;
}

.adv-quote p {
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
  color: #fff;
  margin: 0 0 8px 0;
}

.adv-quote span {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: #f59e0b;
}

/* footer */
.adv-footer {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.adv-footer span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.adv-footer span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}

/* ---------- LEGAL SECTION (unique prefix .legal-*) ---------- */
.legal-section {
  padding: 30px 48px 0 48px;
  font-family: 'Outfit', 'Inter', sans-serif;
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* hero */
.legal-hero {
  padding: 6px 0;
}

.legal-badge {
  color: #64748b;
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 700;
}

.legal-title {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: clamp(2.8rem, 6vw, 60px);
  line-height: 1.05;
  font-weight: 900;
  margin: 8px 0 8px 0;
  color: #e2e8f0;
}

.legal-title-rule {
  width: 60px;
  height: 2px;
  background: #64748b;
  border-radius: 1px;
  margin: 8px 0 12px 0;
}

.legal-sub {
  font-size: 20px;
  line-height: 28px;
  font-weight: 600;
  color: #fff;
}

.legal-version {
  font-size: 15px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #64748b;
  margin: 4px 0 0 0;
}

/* legal grid */
.legal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 0 8px 0;
}

.legal-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.legal-card {
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
}

.legal-card h6 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #fff;
  margin: 0 0 12px 0;
}

.legal-card p {
  font-size: 13px;
  line-height: 20px;
  color: #94a3b8;
  margin: 0;
}

/* banner */
.legal-banner {
  padding: 0 0 8px 0;
}

.legal-banner p {
  background: #020b1a;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
  font-size: 13px;
  line-height: 22px;
  color: #94a3b8;
  text-align: center;
  margin: 0;
}

/* contact */
.legal-contact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding: 0 0 8px 0;
}

.contact-box {
  background: #070f1f;
  border-radius: 16px;
  border: 1px solid rgba(139, 92, 246, 0.12);
  padding: 24px;
}

.contact-box h6 {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 0 0 12px 0;
}

.contact-box p {
  font-size: 13px;
  color: #94a3b8;
  margin: 4px 0;
}

.contact-box p:last-child {
  margin-bottom: 0;
}

.info-row {
  display: flex;
  gap: 40px;
}

.info-row span {
  font-size: 13px;
  color: #94a3b8;
}

/* footer */
.legal-footer {
  border-top: 1px solid rgba(139, 92, 246, 0.12);
  padding: 16px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.legal-footer span:first-child {
  color: #64748b;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.legal-footer span:nth-child(2) {
  color: #64748b;
  font-size: 13px;
  font-weight: 500;
  text-align: center;
}

.legal-footer span:last-child {
  font-family: 'Unbounded', 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  color: #fff;
}


@media (max-width: 1439px) {}

@media (max-width:1220px) {
  .execsum-hero {
    gap: 0px;
  }

  .execsum-grid {
    align-items: flex-start;
    grid-template-columns: repeat(2, 1fr);
  }

  .execsum-vision-card {
    grid-row: 1;
    grid-column: 1;
  }

  .execsum-highlights-card {
    grid-row: 1;
    grid-column: 2;
  }

  .execsum-build-card {
    grid-row: 2;
    grid-column: 1/3;
    min-height: 0px;
  }

  .execsum-build-col {
    padding: 20px 20px -100px 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
  }

  .opp-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .problem-impact-grid,
  .opp-drivers-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .sol-pillars-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sol-enables-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  .sol-footer-highlight {
    width: 40%;
  }


}

@media (max-width: 1024px) {
  .cover-heading h1 {
    font-size: 70px;
  }

  .execsum-hero {
    grid-template-columns: 1fr;
  }

  .execsum-grid {
    align-items: flex-start;
    grid-template-columns: repeat(1, 1fr);
  }

  .execsum-vision-card {
    grid-row: 1;
    grid-column: 1;
  }

  .execsum-highlights-card {
    grid-row: 2;
    grid-column: 1;
  }

  .execsum-build-card {
    grid-row: 3;
    grid-column: 1;
  }

  .execsum-stats,
  .problem-impact-grid,
  .opp-drivers-grid,
  .wpweb3-trust-grid,
  .eco-products-grid,
  .eco-steps-row,
  .utility-grid,
  .vesting-grid,
  .timeline-grid,
  .pillars-grid,
  .team-row,
  .adv-grid,
  .contrib-grid,
  .wpdepin-components-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .sol-hero {
    flex-wrap: wrap;
  }

  .arch-layer-grid,
  .sol-enables-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .toko-stats {
    flex-wrap: nowrap;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }

  .stat-divider {
    display: none;
  }

  .gov-three {
    grid-template-columns: repeat(1, 1fr);
  }

}


@media (max-width: 768px) {
  .navbar {
    padding: 10px;
    height: 80px;
  }

  #nav-text {
    flex-direction: column;
    gap: 0px;
  }

  .hamburger {
    display: block;
  }

  .hamburger img {
    width: 40px;
    margin: auto 0px auto 20px;
  }

  .navlogo {
    margin-right: auto;
  }

  .wp-layout {
    grid-template-columns: 1fr;
    margin-top: 80px;
    height: calc(100vh - 80px);

  }

  .wp-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    z-index: 200;
    transform: translateX(-100%);
    transition: transform 0.3s ease;
  }

  .wp-sidebar.open {
    transform: translateX(0);
  }

  .wp-content {
    margin-left: 0;
  }

  .wpai-features-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {

  .vyronix2,
  .labs2 {
    font-size: 18px;
  }

  .white-paper-name {
     border: 1px solid #22d3ee;
  border-radius: 6px;
  margin-left: 20px;
  padding: 5px 8px;
    text-align: center;
    font-size: 10px;
  }

  .sections>div {
    padding: 25px;
  }

  .cover {
    padding: 10px;
    background-image: url('icones/whitepaper/coverLogo2.webp');
    background-position: right 75%;
    background-size: 90%;
  }

  .cover-heading,
  .cover-subtitle {
    text-align: center;
  }

  .cover-heading h1 {
    font-size: 60px;
  }

  .cover-underline {
    margin-left: auto;
    margin-right: auto;
    width: 80%;
  }

  .cover-tags {
    margin-top: 315px;
  }

  .content {
    margin: 20px auto;
  }

  .opp-title-grad {
    font-size: 40px;
  }

  .opp-metrics,
  .opp-drivers-grid,
  .problem-impact-grid,
  .sol-pillars-grid,
  .sol-enables-grid,
  .wpweb3-feature-grid,
  .wpweb3-stats,
  .wpweb3-trust-grid,
  .wpdepin-components-grid,
  .eco-products-grid,
  .legal-grid,
  .legal-contact {
    grid-template-columns: repeat(1, 1fr);
  }

  .sol-footer {
    flex-direction: column;
  }

  .sol-footer-highlight {
    width: auto;
  }

  .arch-layers-col {
    gap: 20px;
  }

  .arch-layer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .problem-section>div,
  .sol-section>div,
  .arch-section>div {
    padding: 30px 0px;
  }
}