/* ============================================================
   CODEXXA — Web3 & Blockchain Service Page
   Page-specific styles (all prefixed with cdx-)
   ============================================================ */

/* ── Hero Section Enhancements ───────────────────────────── */
.cdx-section-hero .cdx-hero-content {
  position: relative;
  z-index: 2;
}

.cdx-section-hero .cdx-hero-lead {
  max-width: 540px;
}

/* Animated gradient border behind hero form */
.cdx-section-hero .cdx-hero-cta-form {
  position: relative;
  overflow: hidden;
}

.cdx-section-hero .cdx-hero-cta-form::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(135deg, var(--cdx-orange), var(--cdx-navy), var(--cdx-orange-400), var(--cdx-navy-600));
  background-size: 300% 300%;
  border-radius: inherit;
  z-index: -1;
  animation: cdx-hero-form-glow 6s ease infinite;
  opacity: 0.5;
}

@keyframes cdx-hero-form-glow {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Hero platform pills with icons */
.cdx-hero-platforms span i {
  font-size: 13px;
  opacity: 0.7;
  transition: opacity 0.2s, color 0.2s;
}

.cdx-hero-platforms span:hover i {
  opacity: 1;
  color: var(--cdx-orange);
}


/* ── Stats Bar Page-Specific ─────────────────────────────── */
.cdx-section-stats {
  background: linear-gradient(135deg, var(--cdx-navy-900) 0%, var(--cdx-navy) 50%, var(--cdx-navy-800) 100%);
  position: relative;
  overflow: hidden;
}

.cdx-section-stats::before {
  content: "";
  position: absolute;
  top: -80px;
  right: -80px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(240,128,48,0.12) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cdx-section-stats::after {
  content: "";
  position: absolute;
  bottom: -80px;
  left: -80px;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(240,128,48,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

.cdx-stats-row .cdx-stat {
  position: relative;
  z-index: 2;
}

.cdx-stats-row .cdx-stat:not(:last-child)::after {
  content: "";
  position: absolute;
  right: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 48px;
  background: rgba(255,255,255,0.12);
}

@media (max-width: 1023px) {
  .cdx-stats-row .cdx-stat:not(:last-child)::after {
    display: none;
  }
}


/* ── Feature Cards Page-Specific ─────────────────────────── */
.cdx-section-base--gradient .cdx-component-svc {
  position: relative;
}

.cdx-section-base--gradient .cdx-component-svc::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--cdx-orange), var(--cdx-orange-400));
  transform: scaleX(0);
  transition: transform 0.28s var(--cdx-ease-out);
  transform-origin: left;
  border-radius: 0 0 20px 20px;
}

.cdx-section-base--gradient .cdx-component-svc:hover::after {
  transform: scaleX(1);
}


/* ── Business Edge Section ───────────────────────────────── */
.cdx-edge-image-card img {
  transition: transform 0.6s var(--cdx-ease-out);
}

.cdx-edge-image-card:hover img {
  transform: scale(1.05);
}

.cdx-edge-info-card .cdx-info-icon .material-icons-outlined {
  font-size: 22px;
}

.cdx-edge-cta-card .cdx-component-btn--primary {
  margin-top: 4px;
}

/* Edge grid responsive: stack on mobile */
@media (max-width: 1023px) {
  .cdx-edge-grid {
    grid-template-columns: 1fr;
  }

  .cdx-edge-image-card {
    grid-area: auto;
    min-height: 350px;
  }
}


/* ── Solutions Section Page-Specific ─────────────────────── */
.cdx-component-sol {
  position: relative;
  overflow: hidden;
}

.cdx-component-sol::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, rgba(240,128,48,0.03) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.22s var(--cdx-ease-out);
}

.cdx-component-sol:hover::before {
  opacity: 1;
}


/* ── Process Section — Circle Icons ──────────────────────── */
.cdx-process-step .cdx-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--cdx-grad-soft);
  color: var(--cdx-orange);
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  position: relative;
  z-index: 2;
  transition: all 0.35s var(--cdx-ease-out);
}

.cdx-process-step .cdx-step-icon .material-icons-outlined {
  font-size: 26px;
}

.cdx-process-step:hover .cdx-step-icon {
  background: var(--cdx-grad-orange);
  color: var(--cdx-white);
  box-shadow: 0 8px 24px rgba(240,128,48,0.35);
  transform: scale(1.12);
}

/* Process step number badge */
.cdx-process-step .cdx-step-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--cdx-navy);
  color: var(--cdx-white);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  z-index: 3;
  transition: background 0.3s;
}

.cdx-process-step:hover .cdx-step-badge {
  background: var(--cdx-orange);
}

/* Override common CSS to hide the default step-num if present */
.cdx-process-step .cdx-step-num {
  display: none;
}

/* Connected timeline between steps */
.cdx-process-grid {
  position: relative;
}

.cdx-process-grid::before {
  content: "";
  position: absolute;
  top: 28px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background: linear-gradient(90deg, var(--cdx-orange-200), var(--cdx-orange), var(--cdx-orange-200));
  z-index: 0;
}


/* ── Technology Stack Page-Specific ───────────────────────── */
.cdx-tech-card .cdx-tech-logo {
  transition: all 0.22s var(--cdx-ease-out);
}

.cdx-tech-card:hover .cdx-tech-logo {
  background: linear-gradient(135deg, var(--cdx-orange-50), var(--cdx-orange-100));
  color: var(--cdx-orange-700);
  transform: scale(1.05);
}

.cdx-tech-card .cdx-tech-logo i {
  font-size: 18px;
}

/* Tab icon sizing */
.cdx-tech-tab .cdx-tab-icon {
  font-size: 18px;
  opacity: 0.6;
  transition: all 0.2s;
}

.cdx-tech-tab:hover .cdx-tab-icon,
.cdx-tech-tab.cdx-tech-tab--active .cdx-tab-icon {
  opacity: 1;
  color: var(--cdx-orange);
}

/* Tech panel description */
.cdx-tech-panel .cdx-tech-desc {
  font-size: 14px;
  color: var(--cdx-slate-600);
  margin-bottom: 20px;
  line-height: 1.6;
}


/* ── Industries — Icon + Title Only ────────────────────────── */
.cdx-component-ind {
  padding: 28px 20px;
  border-radius: 16px;
  border: 1px solid var(--cdx-line);
  background: var(--cdx-white);
  text-align: center;
  transition: all 0.28s var(--cdx-ease-out);
  position: relative;
  overflow: hidden;
}

/* Top accent bar on hover */
.cdx-component-ind::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--cdx-grad-orange);
  transform: scaleX(0);
  transition: transform 0.28s var(--cdx-ease-out);
  transform-origin: center;
}

.cdx-component-ind:hover::before {
  transform: scaleX(1);
}

.cdx-component-ind:hover {
  border-color: var(--cdx-orange-200);
  transform: translateY(-4px);
  box-shadow: var(--cdx-shadow-md);
}

.cdx-component-ind .cdx-ind-icon {
  font-size: 36px;
  margin-bottom: 12px;
  color: var(--cdx-navy);
  transition: color 0.22s, transform 0.22s;
  display: block;
}

.cdx-component-ind:hover .cdx-ind-icon {
  color: var(--cdx-orange);
  transform: scale(1.1);
}

.cdx-component-ind h4 {
  font-family: var(--cdx-font-display);
  font-weight: 700;
  font-size: 15px;
  color: var(--cdx-ink);
  margin: 0;
  line-height: 1.3;
}


/* ── Why Choose Section Page-Specific ─────────────────────── */
.cdx-why-card .cdx-why-icon {
  position: relative;
}

.cdx-why-card .cdx-why-icon::after {
  content: "";
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 40px;
  background: rgba(240,128,48,0.15);
  border-radius: 50%;
  filter: blur(8px);
  z-index: -1;
}

.cdx-section-base--dark .cdx-why-card:nth-child(2n) .cdx-why-icon {
  background: linear-gradient(135deg, var(--cdx-navy-400), var(--cdx-navy-600));
  box-shadow: rgba(32,32,96,0.4) 0 12px 24px;
}

.cdx-section-base--dark .cdx-why-card:nth-child(2n) .cdx-why-icon::after {
  background: rgba(32,32,96,0.3);
}


/* ── FAQ Page-Specific ────────────────────────────────────── */
.cdx-faq-item--active .cdx-faq-question {
  color: var(--cdx-orange);
}

.cdx-faq-answer-inner {
  border-top: 1px solid var(--cdx-slate-100);
  padding-top: 14px;
}


/* ── CTA Section Page-Specific ────────────────────────────── */
.cdx-section-cta {
  background: linear-gradient(135deg, var(--cdx-navy-900) 0%, var(--cdx-navy) 40%, var(--cdx-navy-700) 100%);
}

.cdx-section-cta::after {
  content: "";
  position: absolute;
  bottom: -60%;
  left: -5%;
  width: 400px;
  height: 400px;
  background: radial-gradient(circle, rgba(240,128,48,0.08) 0%, transparent 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* Animated blockchain nodes decoration in CTA */
.cdx-cta-nodes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.06;
}

.cdx-cta-nodes .cdx-cta-node {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--cdx-white);
  border-radius: 50%;
}

.cdx-cta-nodes .cdx-cta-node:nth-child(1) { top: 20%; left: 10%; animation: cdx-node-pulse 3s ease-in-out infinite; }
.cdx-cta-nodes .cdx-cta-node:nth-child(2) { top: 60%; left: 25%; animation: cdx-node-pulse 3s ease-in-out infinite 0.5s; }
.cdx-cta-nodes .cdx-cta-node:nth-child(3) { top: 30%; right: 15%; animation: cdx-node-pulse 3s ease-in-out infinite 1s; }
.cdx-cta-nodes .cdx-cta-node:nth-child(4) { top: 70%; right: 30%; animation: cdx-node-pulse 3s ease-in-out infinite 1.5s; }
.cdx-cta-nodes .cdx-cta-node:nth-child(5) { top: 45%; left: 50%; animation: cdx-node-pulse 3s ease-in-out infinite 2s; }

@keyframes cdx-node-pulse {
  0%, 100% { transform: scale(1); opacity: 0.5; }
  50%      { transform: scale(2); opacity: 1; }
}


/* ── Floating Blockchain Particles (Hero) ────────────────── */
.cdx-hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.cdx-hero-particle {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  opacity: 0;
  animation: cdx-particle-float 8s ease-in-out infinite;
}

.cdx-hero-particle:nth-child(1)  { left: 5%;  top: 20%; background: var(--cdx-orange);       animation-delay: 0s;   animation-duration: 7s; }
.cdx-hero-particle:nth-child(2)  { left: 15%; top: 70%; background: var(--cdx-navy);         animation-delay: 1s;   animation-duration: 9s; }
.cdx-hero-particle:nth-child(3)  { left: 30%; top: 10%; background: var(--cdx-orange-400);   animation-delay: 2s;   animation-duration: 6s; }
.cdx-hero-particle:nth-child(4)  { left: 55%; top: 80%; background: var(--cdx-navy-400);     animation-delay: 0.5s; animation-duration: 8s; }
.cdx-hero-particle:nth-child(5)  { left: 70%; top: 15%; background: var(--cdx-orange-300);   animation-delay: 3s;   animation-duration: 10s; }
.cdx-hero-particle:nth-child(6)  { left: 85%; top: 60%; background: var(--cdx-navy-300);     animation-delay: 1.5s; animation-duration: 7.5s; }
.cdx-hero-particle:nth-child(7)  { left: 40%; top: 45%; background: var(--cdx-orange-200);   animation-delay: 2.5s; animation-duration: 8.5s; }
.cdx-hero-particle:nth-child(8)  { left: 92%; top: 30%; background: var(--cdx-navy-200);     animation-delay: 4s;   animation-duration: 6.5s; }

@keyframes cdx-particle-float {
  0%   { opacity: 0; transform: translateY(0) scale(0.5); }
  20%  { opacity: 0.6; }
  50%  { opacity: 0.4; transform: translateY(-40px) scale(1); }
  80%  { opacity: 0.6; }
  100% { opacity: 0; transform: translateY(-80px) scale(0.5); }
}


/* ── Form Enhancement ────────────────────────────────────── */
.cdx-hero-cta-form select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235a5a6e' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
}

.cdx-hero-cta-form textarea {
  resize: vertical;
  min-height: 70px;
}

.cdx-hero-cta-form .cdx-form-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* Form group focused state */
.cdx-form-group--focused label {
  color: var(--cdx-orange) !important;
}


/* ── Section Divider Accent ──────────────────────────────── */
.cdx-section-base--gradient {
  position: relative;
}

.cdx-section-base--gradient::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--cdx-slate-200), transparent);
}


/* ── Blockchain Grid Decoration (Hero) ──────────────────── */
.cdx-hero-grid-decor {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  opacity: 0.04;
  background-image:
    linear-gradient(var(--cdx-navy) 1px, transparent 1px),
    linear-gradient(90deg, var(--cdx-navy) 1px, transparent 1px);
  background-size: 60px 60px;
}


/* ── Responsive Page-Specific Adjustments ─────────────────── */

/* Laptop (1024px - 1199px) */
@media (max-width: 1199px) {
  .cdx-edge-image-card {
    min-height: 500px;
  }
}

/* Tablet (768px - 1023px) */
@media (max-width: 1023px) {
  .cdx-section-stats {
    padding: 32px 0;
  }

  .cdx-hero-cta-form::before {
    display: none;
  }

  .cdx-process-grid::before {
    display: none;
  }

  .cdx-edge-image-card {
    min-height: 350px;
  }
}

/* Mobile (320px - 767px) */
@media (max-width: 767px) {
  .cdx-section-stats {
    padding: 28px 0;
  }

  .cdx-hero-cta-form h3 {
    font-size: 18px;
  }

  .cdx-hero-cta-form {
    padding: 20px 16px;
  }

  .cdx-why-card {
    padding: 20px;
  }

  .cdx-component-ind {
    padding: 20px 16px;
  }

  .cdx-component-ind .cdx-ind-icon {
    font-size: 30px;
  }

  /* Hide decorative particles on mobile for performance */
  .cdx-hero-particles,
  .cdx-cta-nodes {
    display: none;
  }
}

/* Small Mobile (320px - 479px) */
@media (max-width: 479px) {
  .cdx-hero-platforms span {
    font-size: 10px;
    padding: 3px 8px;
  }

  .cdx-hero-platforms span i {
    font-size: 11px;
  }

  .cdx-process-step {
    padding: 20px 16px;
  }

  .cdx-cta-content p {
    font-size: 15px;
  }

  .cdx-component-ind h4 {
    font-size: 13px;
  }
}