/* ================================
   CUSTOM WEB DESIGN PAGE - EXCLUSIVE STYLES
   Dark, Mysterious, Neon Theme
   All classes prefixed with 'cwd-' to avoid conflicts
   ================================ */

/* Custom Design Page Variables */
.custom-web-design-page {
  --cwd-primary-neon: #00ffff;
  --cwd-secondary-neon: #ff00ff;
  --cwd-accent-neon: #ffff00;
  --cwd-dark-bg: #0a0a0a;
  --cwd-darker-bg: #050505;
  --cwd-card-bg: rgba(15, 15, 15, 0.9);
  --cwd-text-primary: #ffffff;
  --cwd-text-secondary: #b0b0b0;
  --cwd-gradient-primary: linear-gradient(135deg, #00ffff, #ff00ff);
}

/* Page Base */
.custom-web-design-page {
  background-color: var(--cwd-dark-bg);
  color: var(--cwd-text-primary);
  font-family: 'Exo', sans-serif;
  min-height: 100vh;
  position: relative;
}

/* Page Content Wrapper */
.cwd-page-content {
  position: relative;
  z-index: 2;
}

/* Hero Section */
.cwd-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
}

.cwd-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}

.cwd-hero-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.cwd-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 2rem;
  max-width: 1200px;
  width: 100%;
}

.cwd-hero-text-wrapper {
  background: rgba(0, 0, 0, 0.8);
  padding: 3rem;
  border-radius: 20px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cwd-hero-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(3rem, 8vw, 6rem);
  font-weight: 800;
  margin: 0 0 1.5rem 0;
  line-height: 0.9;
  position: relative;
  background: linear-gradient(
    135deg,
    #818cf8 0%,
    #ec4899 25%,
    #3b82f6 50%,
    #10b981 75%,
    #818cf8 100%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 8s ease-in-out infinite,
    float 3s ease-in-out infinite;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: none !important;
  filter: none !important;
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.cwd-hero-word {
  display: block;
  margin: 0.1em 0;
}

/* Remove the individual word classes */
.cwd-neon-glow,
.cwd-neon-glow-alt {
  /* Not used - gradient is on parent */
}

@keyframes cwd-neon-flicker {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.8;
  }
}

.cwd-hero-divider {
  width: 100px;
  height: 3px;
  background: var(--cwd-gradient-primary);
  margin: 2rem auto;
  border: none;
}

.cwd-hero-subheading {
  font-size: 1.5rem;
  color: var(--cwd-text-secondary);
  font-weight: 300;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Main Content Section */
.cwd-main-content {
  padding: 5rem 0;
  background: var(--cwd-dark-bg);
  position: relative;
}

.cwd-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Section Introduction */
.cwd-section-intro {
  margin-bottom: 4rem;
  text-align: center;
  width: 100%;
}

.cwd-intro-content {
  max-width: 900px;
  margin: 0 auto;
  width: 100%;
}

.cwd-intro-text {
  font-size: 1.25rem;
  color: var(--cwd-text-secondary);
  line-height: 1.8;
  margin-bottom: 2rem;
}

/* Content Grid */
.cwd-content-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 4rem;
  width: 100%;
}

/* Content Cards */
.cwd-content-card {
  background: var(--cwd-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
  position: relative;
}

.cwd-content-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
  border-color: var(--cwd-primary-neon);
}

.cwd-card-header {
  padding: 2rem 2rem 0;
}

.cwd-card-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: var(--cwd-text-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.cwd-card-accent {
  width: 50px;
  height: 3px;
  background: var(--cwd-gradient-primary);
  margin-bottom: 1.5rem;
}

.cwd-card-content {
  padding: 0 2rem 2rem;
}

.cwd-sub-section {
  margin-bottom: 1.5rem;
}

.cwd-sub-section:last-child {
  margin-bottom: 0;
}

.cwd-sub-section h3 {
  font-size: 1.2rem;
  color: var(--cwd-text-primary);
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.cwd-neon-accent {
  color: var(--cwd-primary-neon);
  font-weight: 700;
  margin-right: 0.5rem;
}

.cwd-sub-section p {
  color: var(--cwd-text-secondary);
  line-height: 1.6;
}

/* Video Card - Spans full width */
.cwd-video-card {
  grid-column: 1 / -1;
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cwd-video-card video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.cwd-video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  z-index: 2;
}

.cwd-video-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 2rem;
}

.cwd-video-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  color: var(--cwd-text-primary);
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(0, 255, 255, 0.8);
}

/* Neon Links */
.cwd-neon-link {
  color: var(--cwd-primary-neon);
  text-decoration: none;
  position: relative;
  transition: all 0.3s ease;
}

.cwd-neon-link:hover {
  text-shadow: 0 0 10px var(--cwd-primary-neon);
}

/* CTA Section */
.cwd-cta-section {
  text-align: center;
  padding: 4rem 0;
  width: 100%;
}

.cwd-cta-content {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.1),
    rgba(255, 0, 255, 0.1)
  );
  padding: 3rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 600px;
  margin: 0 auto;
}

.cwd-cta-text {
  font-size: 1.5rem;
  color: var(--cwd-text-primary);
  margin-bottom: 2rem;
  font-weight: 300;
}

.cwd-cta-button {
  display: inline-block;
  position: relative;
  padding: 1rem 3rem;
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--cwd-dark-bg);
  background: var(--cwd-primary-neon);
  border: none;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.cwd-cta-button:hover {
  color: var(--cwd-text-primary);
  box-shadow: 0 0 30px var(--cwd-primary-neon);
  transform: translateY(-2px);
}

/* Stats Section */
.cwd-stats-section {
  background: linear-gradient(180deg, var(--cwd-dark-bg), var(--cwd-darker-bg));
  padding: 5rem 0;
  position: relative;
  width: 100%;
}

.cwd-stats-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.cwd-stats-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  color: var(--cwd-text-primary);
  margin-bottom: 3rem;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
}

.cwd-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.cwd-stat-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.cwd-stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--cwd-primary-neon);
  box-shadow: 0 5px 20px rgba(0, 255, 255, 0.3);
}

.cwd-stat-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;
  color: var(--cwd-primary-neon);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px var(--cwd-primary-neon);
}

.cwd-stat-number::after {
  content: '%';
  font-size: 3rem;
  margin-left: 0.2rem;
}

.cwd-stat-label {
  font-size: 0.9rem;
  color: var(--cwd-text-secondary);
  line-height: 1.4;
}

/* Info Section */
.cwd-info-section {
  background: var(--cwd-darker-bg);
  padding: 5rem 0;
  width: 100%;
}

.cwd-info-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cwd-info-header {
  text-align: center;
  margin-bottom: 3rem;
}

.cwd-info-title {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2.5rem;
  color: var(--cwd-text-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
}

.cwd-info-subtitle {
  font-size: 1.2rem;
  color: var(--cwd-text-secondary);
}

.cwd-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

.cwd-info-block {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.cwd-info-block:hover {
  border-color: var(--cwd-primary-neon);
  background: rgba(0, 255, 255, 0.05);
}

.cwd-info-block-title {
  font-size: 1.5rem;
  color: var(--cwd-text-primary);
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.cwd-neon-icon {
  font-size: 1.8rem;
  color: var(--cwd-primary-neon);
}

.cwd-info-list {
  list-style: none;
  padding: 0;
}

.cwd-info-list li {
  color: var(--cwd-text-secondary);
  margin-bottom: 0.8rem;
  padding-left: 1.5rem;
  position: relative;
  line-height: 1.6;
}

.cwd-info-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.7em;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.3em 0 0.3em 0.5em;
  border-color: transparent transparent transparent var(--cwd-primary-neon);
}

.cwd-info-list strong {
  color: var(--cwd-text-primary);
}

.cwd-info-footer {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.1),
    rgba(255, 0, 255, 0.1)
  );
  padding: 2rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.cwd-info-footer h3 {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  color: var(--cwd-text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
  text-transform: uppercase;
}

.cwd-takeaway-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.cwd-takeaway-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.cwd-takeaway-icon {
  color: var(--cwd-primary-neon);
  font-size: 1.5rem;
  flex-shrink: 0;
}

.cwd-takeaway-item p {
  color: var(--cwd-text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* Fade-in Animation */
.cwd-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.cwd-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .cwd-hero-title {
    font-size: 4rem;
  }

  .cwd-hero-text-wrapper {
    padding: 2rem;
  }

  .cwd-content-grid {
    grid-template-columns: 1fr;
  }

  .cwd-video-card {
    grid-column: 1;
  }

  .cwd-stats-grid {
    grid-template-columns: 1fr;
  }

  .cwd-info-grid {
    grid-template-columns: 1fr;
  }

  .cwd-cta-content {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .cwd-hero-title {
    font-size: 3rem;
  }

  .cwd-hero-subheading {
    font-size: 1.2rem;
  }

  .cwd-stats-title {
    font-size: 2rem;
  }

  .cwd-stat-number {
    font-size: 3rem;
  }

  .cwd-container {
    padding: 0 1rem;
  }
}

/* ================================
   RESPONSIVE DESIGN PAGE - EXCLUSIVE STYLES
   Dark, Sleek, Animated Theme
   All classes prefixed with 'rd-' to avoid conflicts
   ================================ */

/* Custom Design Page Variables */
.responsive-design-page {
  --rd-primary-neon: #00ffff;
  --rd-secondary-neon: #ff00ff;
  --rd-accent-purple: #818cf8;
  --rd-accent-pink: #ec4899;
  --rd-dark-bg: #0a0a0a;
  --rd-darker-bg: #050505;
  --rd-card-bg: rgba(15, 15, 15, 0.9);
  --rd-text-primary: #ffffff;
  --rd-text-secondary: #b0b0b0;
  --rd-gradient-primary: linear-gradient(135deg, #00ffff, #818cf8);
}

/* Page Base */
.responsive-design-page {
  background-color: var(--rd-dark-bg);
  color: var(--rd-text-primary);
  font-family: 'Exo', sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Page Content Wrapper */
.rd-page-content {
  position: relative;
  z-index: 2;
}

/* Hero Section */
.rd-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
  padding-top: 93px; /* Account for navbar height */
}

@media (max-width: 768px) {
  .rd-hero-section {
    padding-top: 70px; /* Smaller navbar on mobile */
    min-height: auto; /* Allow natural height on mobile */
    padding-bottom: 2rem;
  }
}

.rd-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 30% 20%,
      rgba(0, 255, 255, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 70% 80%,
      rgba(129, 140, 248, 0.08) 0%,
      transparent 40%
    );
  z-index: 1;
}

.rd-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.rd-device-float {
  position: absolute;
  width: 150px;
  height: 300px;
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.1),
    rgba(129, 140, 248, 0.1)
  );
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 20px;
  opacity: 0.3;
}

#device-1 {
  top: 10%;
  left: 10%;
  animation: float-1 20s ease-in-out infinite;
}

#device-2 {
  top: 60%;
  right: 15%;
  animation: float-2 25s ease-in-out infinite;
  width: 250px;
  height: 180px;
}

#device-3 {
  bottom: 20%;
  left: 20%;
  animation: float-3 30s ease-in-out infinite;
  width: 120px;
  height: 200px;
}

@keyframes float-1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(5deg);
  }
  33% {
    transform: translate(50px, -30px) rotate(-5deg);
  }
  66% {
    transform: translate(-30px, 20px) rotate(10deg);
  }
}

@keyframes float-2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(-10deg);
  }
  50% {
    transform: translate(-80px, 40px) rotate(5deg);
  }
}

@keyframes float-3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(40px, -20px) rotate(-8deg);
  }
  50% {
    transform: translate(-20px, -40px) rotate(5deg);
  }
  75% {
    transform: translate(30px, 10px) rotate(-3deg);
  }
}

.rd-hero-content {
  position: relative;
  z-index: 3;
  padding: 0 2rem;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}

@media (max-width: 1425px) {
  .rd-hero-content {
    padding: 0; /* Remove padding when stacked */
  }

  /* Add padding back to text wrapper only */
  .rd-hero-text-wrapper {
    margin: 0 2rem;
  }

  /* Let device showcase use full width */
  .rd-hero-device-showcase {
    padding: 0;
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    margin-right: calc(-50vw + 50%);
    margin-top: -2rem; /* Much less aggressive on narrow desktop */
    overflow-x: hidden;
  }
}

@media (max-width: 768px) {
  .rd-hero-text-wrapper {
    margin: 0 1rem;
  }

  .rd-hero-device-showcase {
    margin-top: -3rem; /* Slightly more on tablet/mobile */
  }
}

@media (max-width: 480px) {
  .rd-hero-device-showcase {
    margin-top: -4rem; /* More aggressive on small mobile where space is tight */
  }
}

/* Hero Layout - Side by side */
.rd-hero-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

@media (max-width: 1425px) {
  .rd-hero-layout {
    grid-template-columns: 1fr;
    gap: 2rem; /* Balanced gap */
    text-align: center;
  }

  /* When stacked, let device showcase be independent */
  .rd-hero-device-showcase {
    width: 100%;
    max-width: none;
  }

  /* Keep text wrapper constrained */
  .rd-hero-text-wrapper {
    max-width: 800px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .rd-hero-layout {
    gap: 1.5rem; /* Reasonable gap on mobile */
  }
}

.rd-hero-text-wrapper {
  padding: 0 3rem 0 3rem; /* Remove top padding by default (side-by-side layout) */
  border-radius: 20px;
}

@media (max-width: 1425px) {
  .rd-hero-text-wrapper {
    text-align: center;
    padding: 2rem 2rem 0 2rem; /* Add top padding back when stacked */
  }
}

@media (max-width: 768px) {
  .rd-hero-text-wrapper {
    padding: 1rem 1rem 0 1rem;
  }
}

.rd-hero-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(2.5rem, 6vw, 6rem); /* Reduced minimum from 3rem to 2.5rem */
  font-weight: 800;
  margin: 0 0 1rem 0; /* Reduced bottom margin */
  line-height: 0.9;
  position: relative;
  background: linear-gradient(
    135deg,
    #818cf8 0%,
    #ec4899 25%,
    #3b82f6 50%,
    #10b981 75%,
    #818cf8 100%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 8s ease-in-out infinite,
    float 3s ease-in-out infinite;
  text-transform: uppercase;
  letter-spacing: 3px;
  text-shadow: none;
  filter: none;
}

@media (max-width: 768px) {
  .rd-hero-title {
    font-size: 2rem; /* Reduced from 3rem */
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .rd-hero-title {
    font-size: 1.75rem; /* Reduced from 2.5rem */
    letter-spacing: 0.5px;
  }
}

@keyframes gradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.rd-hero-word {
  display: block;
  margin: 0.1em 0;
}

.rd-hero-divider {
  width: 100px;
  height: 3px;
  background: var(--rd-gradient-primary);
  margin: 1.5rem 0; /* Reduced from 2rem */
  border: none;
}

@media (max-width: 1425px) {
  .rd-hero-divider {
    margin: 1rem auto; /* Center and reduce margin */
  }
}

@media (max-width: 768px) {
  .rd-hero-divider {
    width: 60px; /* Smaller on mobile */
    height: 2px;
    margin: 0.75rem auto;
  }
}

.rd-hero-subheading {
  font-size: 1.25rem; /* Reduced from 1.5rem */
  color: var(--rd-text-secondary);
  font-weight: 300;
  max-width: 600px;
  line-height: 1.6;
  margin-bottom: 0; /* Remove bottom margin */
}

@media (max-width: 1425px) {
  .rd-hero-subheading {
    margin: 0 auto; /* Center the subheading */
  }
}

@media (max-width: 768px) {
  .rd-hero-subheading {
    font-size: 1rem; /* Reduced from 1.2rem */
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .rd-hero-subheading {
    font-size: 0.875rem; /* Even smaller on very small screens */
  }
}

.rd-hero-demo-hint {
  color: var(--rd-primary-neon);
  font-size: 0.9rem;
  margin-top: 1.5rem;
  opacity: 0.8;
  animation: pulse 2s ease-in-out infinite;
}

@media (max-width: 1425px) {
  .rd-hero-demo-hint {
    display: none;
  }
}

@keyframes pulse {
  0%,
  100% {
    opacity: 0.8;
  }
  50% {
    opacity: 1;
  }
}

/* Hero Device Showcase */
.rd-hero-device-showcase {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 2rem;
}

@media (max-width: 768px) {
  .rd-hero-device-showcase {
    padding-bottom: 1rem;
  }
}

.rd-hero-device-showcase .rd-device-frame {
  animation: heroDeviceEntrance 1s ease-out 0.5s backwards;
}

@media (max-width: 1024px) {
  .rd-hero-device-showcase .rd-device-frame {
    transform: scale(0.7);
  }
}

@media (max-width: 768px) {
  .rd-hero-device-showcase .rd-device-frame {
    transform: scale(0.5);
  }
}

@keyframes heroDeviceEntrance {
  from {
    opacity: 0;
    transform: translateX(50px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

/* Main Content Section */
.rd-main-content {
  padding: 5rem 0;
  background: var(--rd-dark-bg);
  position: relative;
}

@media (max-width: 768px) {
  .rd-main-content {
    padding: 3rem 0;
  }
}

.rd-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 480px) {
  .rd-container {
    padding: 0 1rem;
  }
}

/* Section Introduction */
.rd-section-intro {
  margin-bottom: 5rem;
  text-align: center;
}

@media (max-width: 768px) {
  .rd-section-intro {
    margin-bottom: 3rem;
  }
}

.rd-intro-content {
  max-width: 900px;
  margin: 0 auto;
}

.rd-intro-text {
  font-size: 1.125rem; /* Reduced from 1.25rem */
  color: var(--rd-text-secondary);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .rd-intro-text {
    font-size: 1rem;
    line-height: 1.6;
  }
}

.rd-highlight {
  color: var(--rd-primary-neon);
  font-weight: 700;
}

/* Section Titles */
.rd-section-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(1.75rem, 4vw, 3rem); /* Reduced minimum from 2rem */
  font-weight: 800;
  text-align: center;
  margin-bottom: 1rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

@media (max-width: 768px) {
  .rd-section-title {
    font-size: 1.5rem; /* Reduced from 1.8rem */
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .rd-section-title {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
  }
}

.rd-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #818cf8 50%, #ec4899 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rd-section-subtitle {
  text-align: center;
  color: var(--rd-text-secondary);
  font-size: 1rem; /* Reduced from 1.1rem */
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .rd-section-subtitle {
    font-size: 0.875rem;
    margin-bottom: 2rem;
  }
}

/* Device Showcase */
.rd-device-showcase {
  margin: 5rem 0;
  padding: 3rem 0;
  position: relative;
  z-index: 100;
}

@media (max-width: 768px) {
  .rd-device-showcase {
    margin: 3rem 0;
    padding: 2rem 0;
  }
}

.rd-device-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 500px;
  position: relative;
  z-index: 101;
}

@media (max-width: 768px) {
  .rd-device-container {
    min-height: 400px;
  }
}

.rd-device-frame {
  background: rgba(255, 255, 255, 0.05);
  border: 2px solid rgba(0, 255, 255, 0.3);
  border-radius: 20px;
  padding: 2rem;
  transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 20px 50px rgba(0, 255, 255, 0.2);
  position: relative;
  z-index: 102;
}

@media (max-width: 768px) {
  .rd-device-frame {
    padding: 1rem;
  }
}

@media (max-width: 480px) {
  .rd-device-frame {
    padding: 0.5rem;
  }
}

/* Updated smaller sizes */
.rd-device-frame.mobile {
  width: 280px;
  height: 500px;
}

.rd-device-frame.tablet {
  width: 500px;
  height: 350px;
}

.rd-device-frame.desktop {
  width: 600px;
  height: 380px;
}

/* Cap desktop size on very large screens */
@media (min-width: 1400px) {
  .rd-device-frame.desktop {
    max-width: 600px;
  }
}

@media (max-width: 768px) {
  .rd-device-frame {
    max-width: 90vw;
  }

  .rd-device-frame.desktop {
    width: 85vw;
    max-width: 600px;
  }

  .rd-hero-device-showcase .rd-device-frame.desktop {
    width: 600px !important;
  }
}

.rd-device-screen {
  width: 100%;
  height: 100%;
  background: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  position: relative;
  z-index: 103;
}

.rd-demo-content {
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 104;
}

.rd-demo-header {
  background: rgba(129, 140, 248, 0.2);
  padding: 0.5rem;
  border-radius: 5px;
  text-align: center;
  margin-bottom: 1rem;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .rd-demo-header {
    font-size: 0.8rem;
    padding: 0.375rem;
  }
}

.rd-demo-nav {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.rd-device-frame.mobile .rd-demo-nav {
  flex-direction: column;
}

.rd-demo-nav span {
  height: 30px;
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
}

.rd-device-frame.mobile .rd-demo-nav span {
  flex: none;
  width: 100%;
  height: 20px;
}

.rd-demo-hero {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.2),
    rgba(129, 140, 248, 0.2)
  );
  height: 150px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  font-size: 1.2rem;
  font-weight: 700;
}

@media (max-width: 768px) {
  .rd-demo-hero {
    font-size: 1rem;
    height: 120px;
  }
}

.rd-demo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 0.5rem;
  flex: 1;
}

.rd-demo-card {
  background: rgba(255, 255, 255, 0.05);
  border-radius: 5px;
  height: 100%;
  min-height: 80px;
}

/* Impact Section */
.rd-impact-section {
  margin: 5rem 0;
  padding: 5rem 0;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(255, 0, 255, 0.05),
    transparent
  );
}

@media (max-width: 768px) {
  .rd-impact-section {
    margin: 3rem 0;
    padding: 3rem 0;
  }
}

.rd-impact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

@media (max-width: 768px) {
  .rd-impact-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
  }
}

.rd-impact-card {
  background: var(--rd-card-bg);
  border: 1px solid rgba(255, 0, 255, 0.2);
  border-radius: 15px;
  padding: 2rem;
  text-align: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease;
}

@media (max-width: 768px) {
  .rd-impact-card {
    padding: 1.5rem;
  }
}

.rd-impact-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.rd-impact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(255, 0, 255, 0.3);
  border-color: var(--rd-secondary-neon);
}

.rd-impact-number {
  font-size: 2.5rem; /* Reduced from 3rem */
  font-weight: 800;
  color: var(--rd-secondary-neon);
  margin-bottom: 1rem;
  text-shadow: 0 0 20px var(--rd-secondary-neon);
}

@media (max-width: 768px) {
  .rd-impact-number {
    font-size: 2rem; /* Reduced from 2.5rem */
  }
}

.rd-impact-card h3 {
  font-size: 1.125rem; /* Reduced from 1.3rem */
  margin-bottom: 0.5rem;
  color: var(--rd-text-primary);
}

@media (max-width: 768px) {
  .rd-impact-card h3 {
    font-size: 1rem;
  }
}

.rd-impact-card p {
  color: var(--rd-text-secondary);
  line-height: 1.6;
  font-size: 0.875rem; /* Added smaller font size */
}

/* Traffic Visualization */
.rd-traffic-section {
  margin: 5rem 0;
  text-align: center;
}

@media (max-width: 768px) {
  .rd-traffic-section {
    margin: 3rem 0;
  }
}

.rd-traffic-visualization {
  max-width: 600px;
  margin: 3rem auto;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (max-width: 768px) {
  .rd-traffic-visualization {
    gap: 1.5rem;
    margin: 2rem auto;
  }
}

.rd-traffic-bar {
  position: relative;
  background: rgba(255, 255, 255, 0.05);
  height: 60px;
  border-radius: 30px;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: 0 2rem;
}

@media (max-width: 768px) {
  .rd-traffic-bar {
    height: 50px;
    padding: 0 1.5rem;
  }
}

.rd-traffic-bar::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--percentage);
  background: linear-gradient(
    90deg,
    var(--rd-primary-neon),
    var(--rd-accent-purple)
  );
  transition: width 2s ease-out;
  border-radius: 30px;
}

.rd-traffic-bar.desktop::before {
  background: linear-gradient(
    90deg,
    var(--rd-accent-purple),
    var(--rd-accent-pink)
  );
}

.rd-traffic-label {
  position: relative;
  z-index: 2;
  font-weight: 600;
  font-size: 0.875rem; /* Added font size */
}

@media (max-width: 768px) {
  .rd-traffic-label {
    font-size: 0.75rem;
  }
}

.rd-traffic-value {
  position: absolute;
  right: 2rem;
  font-size: 1.25rem; /* Reduced from 1.5rem */
  font-weight: 800;
  z-index: 2;
}

@media (max-width: 768px) {
  .rd-traffic-value {
    right: 1.5rem;
    font-size: 1rem;
  }
}

.rd-traffic-note {
  color: var(--rd-text-secondary);
  font-style: italic;
  font-size: 0.875rem;
}

/* Benefits Grid */
.rd-benefits-section {
  margin: 5rem 0;
}

@media (max-width: 768px) {
  .rd-benefits-section {
    margin: 3rem 0;
  }
}

.rd-benefits-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

@media (max-width: 768px) {
  .rd-benefits-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
  }
}

.rd-benefit-card {
  background: rgba(17, 17, 17, 0.8);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 15px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}

@media (max-width: 768px) {
  .rd-benefit-card {
    padding: 1.5rem;
  }
}

.rd-benefit-card.visible {
  opacity: 1;
  transform: translateY(0);
}

.rd-benefit-card:hover {
  transform: translateY(-10px);
  border-color: var(--rd-accent-purple);
  box-shadow: 0 20px 40px rgba(129, 140, 248, 0.3);
  background: rgba(129, 140, 248, 0.05);
}

.rd-benefit-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  color: var(--rd-accent-purple);
}

@media (max-width: 768px) {
  .rd-benefit-icon {
    width: 50px;
    height: 50px;
    margin-bottom: 1rem;
  }
}

.rd-benefit-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
}

.rd-benefit-card h3 {
  font-size: 1.25rem; /* Reduced from 1.5rem */
  margin-bottom: 1rem;
  color: var(--rd-text-primary);
}

@media (max-width: 768px) {
  .rd-benefit-card h3 {
    font-size: 1.125rem;
    margin-bottom: 0.75rem;
  }
}

.rd-benefit-card p {
  color: var(--rd-text-secondary);
  line-height: 1.6;
  font-size: 0.875rem;
}

/* Technical Section */
.rd-technical-section {
  margin: 5rem 0;
  padding: 5rem 0;
  background: linear-gradient(
    180deg,
    transparent,
    rgba(129, 140, 248, 0.05),
    transparent
  );
}

@media (max-width: 768px) {
  .rd-technical-section {
    margin: 3rem 0;
    padding: 3rem 0;
  }
}

.rd-tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

@media (max-width: 768px) {
  .rd-tech-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-top: 2rem;
  }
}

.rd-tech-card {
  background: var(--rd-card-bg);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateX(-30px);
}

.rd-tech-card.visible {
  opacity: 1;
  transform: translateX(0);
}

.rd-tech-card:hover {
  border-color: var(--rd-primary-neon);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.3);
}

.rd-tech-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem;
  background: rgba(0, 255, 255, 0.1);
}

@media (max-width: 768px) {
  .rd-tech-header {
    padding: 1rem;
  }
}

.rd-tech-number {
  font-size: 1.75rem; /* Reduced from 2rem */
  font-weight: 800;
  color: var(--rd-primary-neon);
  opacity: 0.5;
}

@media (max-width: 768px) {
  .rd-tech-number {
    font-size: 1.5rem;
  }
}

.rd-tech-header h3 {
  font-size: 1.125rem; /* Reduced from 1.3rem */
  margin: 0;
}

@media (max-width: 768px) {
  .rd-tech-header h3 {
    font-size: 1rem;
  }
}

.rd-code-snippet {
  background: #0a0a0a;
  padding: 0.75rem;
  overflow-x: auto;
}

@media (max-width: 768px) {
  .rd-code-snippet {
    padding: 0.5rem;
  }
}

.rd-code-snippet pre {
  margin: 0;
}

.rd-code-snippet code {
  color: var(--rd-primary-neon);
  font-family: 'Fira Code', monospace;
  font-size: 0.65rem;
  line-height: 1.2;
  display: block;
}

@media (max-width: 768px) {
  .rd-code-snippet code {
    font-size: 0.6rem;
  }
}

.rd-tech-card p {
  padding: 1.5rem;
  color: var(--rd-text-secondary);
  line-height: 1.6;
  font-size: 0.875rem;
}

@media (max-width: 768px) {
  .rd-tech-card p {
    padding: 1rem;
    font-size: 0.8125rem;
  }
}

/* ROI Calculator */
.rd-roi-section {
  margin: 5rem 0;
  padding: 3rem;
  background: rgba(129, 140, 248, 0.05);
  border-radius: 20px;
  border: 1px solid rgba(129, 140, 248, 0.2);
}

@media (max-width: 768px) {
  .rd-roi-section {
    margin: 3rem 0;
    padding: 2rem 1rem;
  }
}

.rd-roi-calculator {
  max-width: 800px;
  margin: 0 auto;
}

.rd-roi-inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (max-width: 768px) {
  .rd-roi-inputs {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    margin-bottom: 2rem;
  }
}

.rd-roi-field label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--rd-text-secondary);
  font-size: 0.875rem; /* Reduced from 0.9rem */
}

.rd-roi-field input {
  width: 100%;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  color: var(--rd-text-primary);
  font-size: 1rem; /* Reduced from 1.1rem */
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .rd-roi-field input {
    padding: 0.5rem;
    font-size: 0.875rem;
  }
}

.rd-roi-field input:focus {
  outline: none;
  border-color: var(--rd-accent-purple);
  background: rgba(129, 140, 248, 0.1);
}

.rd-roi-results {
  text-align: center;
  padding: 2rem;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 15px;
}

@media (max-width: 768px) {
  .rd-roi-results {
    padding: 1.5rem;
  }
}

.rd-roi-metric {
  margin-bottom: 1.5rem;
}

.rd-roi-label {
  display: block;
  color: var(--rd-text-secondary);
  margin-bottom: 0.5rem;
  font-size: 0.875rem;
}

.rd-roi-value {
  display: block;
  font-size: 2rem; /* Reduced from 2.5rem */
  font-weight: 800;
  color: var(--rd-accent-purple);
  text-shadow: 0 0 20px var(--rd-accent-purple);
}

@media (max-width: 768px) {
  .rd-roi-value {
    font-size: 1.75rem;
  }
}

.rd-roi-note {
  color: var(--rd-text-secondary);
  font-size: 0.8125rem; /* Reduced from 0.9rem */
  font-style: italic;
  margin-top: 1rem;
}

/* CTA Section */
.rd-cta-section {
  text-align: center;
  padding: 5rem 0;
  margin-top: 5rem;
}

@media (max-width: 768px) {
  .rd-cta-section {
    padding: 3rem 0;
    margin-top: 3rem;
  }
}

.rd-cta-content {
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.1),
    rgba(129, 140, 248, 0.1)
  );
  padding: 4rem;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  max-width: 700px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .rd-cta-content {
    padding: 2rem 1.5rem;
  }
}

.rd-cta-title {
  font-size: 2rem; /* Reduced from 2.5rem */
  font-weight: 800;
  margin-bottom: 1rem;
  background: linear-gradient(135deg, #ffffff 0%, #00ffff 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  .rd-cta-title {
    font-size: 1.5rem; /* Reduced from 2rem */
  }
}

.rd-cta-text {
  font-size: 1.125rem; /* Reduced from 1.3rem */
  color: var(--rd-text-secondary);
  margin-bottom: 2rem;
  line-height: 1.6;
}

@media (max-width: 768px) {
  .rd-cta-text {
    font-size: 1rem;
    margin-bottom: 1.5rem;
  }
}

.rd-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem; /* Reduced from 1.2rem 3rem */
  font-size: 1rem; /* Reduced from 1.1rem */
  font-weight: 600;
  color: var(--rd-dark-bg);
  background: var(--rd-primary-neon);
  border: none;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
}

@media (max-width: 768px) {
  .rd-cta-button {
    padding: 0.75rem 1.5rem; /* Reduced padding */
    font-size: 0.75rem; /* Smaller from 0.875rem */
    letter-spacing: 0.5px;
  }
}

.rd-cta-button svg {
  width: 20px;
  height: 20px;
  stroke: var(--rd-dark-bg);
  transition: transform 0.3s ease;
}

.rd-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.5);
}

.rd-cta-button:hover svg {
  transform: translateX(5px);
}

/* Floating Devices */
.rd-floating-devices {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.rd-float-device {
  position: absolute;
  background: linear-gradient(
    135deg,
    rgba(129, 140, 248, 0.1),
    rgba(0, 255, 255, 0.1)
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  opacity: 0.2;
}

.rd-float-device.phone {
  width: 60px;
  height: 120px;
  top: 20%;
  right: 5%;
  animation: float-phone 25s ease-in-out infinite;
}

.rd-float-device.tablet {
  width: 100px;
  height: 75px;
  bottom: 30%;
  left: 5%;
  animation: float-tablet 30s ease-in-out infinite;
}

.rd-float-device.laptop {
  width: 120px;
  height: 80px;
  top: 70%;
  right: 10%;
  animation: float-laptop 35s ease-in-out infinite;
}

@keyframes float-phone {
  0%,
  100% {
    transform: translate(0, 0) rotate(5deg);
  }
  50% {
    transform: translate(-50px, -100px) rotate(-5deg);
  }
}

@keyframes float-tablet {
  0%,
  100% {
    transform: translate(0, 0) rotate(-5deg);
  }
  50% {
    transform: translate(100px, -50px) rotate(10deg);
  }
}

@keyframes float-laptop {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(-80px, -30px) rotate(-8deg);
  }
  66% {
    transform: translate(40px, -60px) rotate(5deg);
  }
}

/* ================================
   SEO OPTIMIZATION PAGE - EXCLUSIVE STYLES
   Dark, Mysterious, Neon Theme
   All classes prefixed with 'seo-' to avoid conflicts
   ================================ */

/* SEO Page Variables */
.seo-optimization-page {
  --seo-primary-neon: #00ffff;
  --seo-secondary-neon: #ff00ff;
  --seo-accent-purple: #818cf8;
  --seo-accent-pink: #ec4899;
  --seo-accent-green: #10b981;
  --seo-dark-bg: #0a0a0a;
  --seo-darker-bg: #050505;
  --seo-card-bg: rgba(15, 15, 15, 0.9);
  --seo-text-primary: #ffffff;
  --seo-text-secondary: #b0b0b0;
  --seo-gradient-primary: linear-gradient(135deg, #00ffff, #818cf8);
  --seo-gradient-accent: linear-gradient(135deg, #818cf8, #ec4899);
}

/* Page Base */
.seo-optimization-page {
  background-color: var(--seo-dark-bg);
  color: var(--seo-text-primary);
  font-family: 'Exo', sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Page Content Wrapper */
.seo-page-content {
  position: relative;
  z-index: 2;
}

/* Hero Section */
.seo-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
  padding-top: 93px;
}

@media (max-width: 768px) {
  .seo-hero-section {
    padding-top: 70px;
    min-height: auto;
    padding-bottom: 2rem;
  }
}

.seo-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(0, 255, 255, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(129, 140, 248, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(236, 72, 153, 0.05) 0%,
      transparent 50%
    );
  z-index: 1;
}

.seo-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 2rem;
  max-width: 1200px;
  width: 100%;
}

.seo-hero-text-wrapper {
  background: rgba(0, 0, 0, 0.8);
  padding: 4rem;
  border-radius: 30px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .seo-hero-text-wrapper {
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
  }
}

/* Hero Title - Matching RD page font sizes */
.seo-hero-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 900;
  margin: 0 0 1.5rem 0;
  line-height: 0.9;
  position: relative;
  background: linear-gradient(
    135deg,
    #00ffff 0%,
    #818cf8 25%,
    #ec4899 50%,
    #10b981 75%,
    #00ffff 100%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: seoGradientShift 8s ease-in-out infinite,
    seoFloat 3s ease-in-out infinite;
  text-transform: uppercase;
  letter-spacing: 3px;
}

@media (max-width: 768px) {
  .seo-hero-title {
    font-size: 2rem;
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .seo-hero-title {
    font-size: 1.75rem;
    letter-spacing: 0.5px;
  }
}

@keyframes seoGradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes seoFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.seo-hero-word {
  display: block;
  margin: 0.1em 0;
}

@media (max-width: 480px) {
  .seo-hero-word {
    margin: 0 0;
    line-height: 1;
  }
}

.seo-hero-divider {
  width: 100px;
  height: 3px;
  background: var(--seo-gradient-primary);
  margin: 1.5rem auto;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .seo-hero-divider {
    width: 60px;
    height: 2px;
    margin: 0.75rem auto;
  }
}

.seo-hero-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: seoDividerShine 3s ease-in-out infinite;
}

@keyframes seoDividerShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

/* Hero Subheading - Matching RD page sizes */
.seo-hero-subheading {
  font-size: 1.25rem;
  color: var(--seo-text-secondary);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  font-weight: 300;
}

@media (max-width: 768px) {
  .seo-hero-subheading {
    font-size: 1rem;
    line-height: 1.5;
  }
}

@media (max-width: 480px) {
  .seo-hero-subheading {
    font-size: 0.875rem;
  }
}

/* Animated Background */
.seo-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.seo-float-element {
  position: absolute;
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.1),
    rgba(129, 140, 248, 0.1)
  );
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 20px;
  opacity: 0.3;
}

#seo-float-1 {
  width: 200px;
  height: 200px;
  top: 10%;
  left: 5%;
  animation: seoFloat1 25s ease-in-out infinite;
}

#seo-float-2 {
  width: 150px;
  height: 300px;
  top: 60%;
  right: 10%;
  animation: seoFloat2 30s ease-in-out infinite;
}

#seo-float-3 {
  width: 250px;
  height: 150px;
  bottom: 20%;
  left: 15%;
  animation: seoFloat3 20s ease-in-out infinite;
}

@keyframes seoFloat1 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(50px, -30px) rotate(120deg);
  }
  66% {
    transform: translate(-30px, 40px) rotate(240deg);
  }
}

@keyframes seoFloat2 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(-40px, -50px) rotate(180deg);
  }
}

@keyframes seoFloat3 {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  25% {
    transform: translate(30px, -20px) rotate(90deg);
  }
  75% {
    transform: translate(-40px, 30px) rotate(270deg);
  }
}

/* Main Content Section */
.seo-main-content {
  padding: 5rem 0;
  background: var(--seo-dark-bg);
  position: relative;
}

@media (max-width: 768px) {
  .seo-main-content {
    padding: 3rem 0;
  }
}

.seo-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 480px) {
  .seo-container {
    padding: 0 1rem;
  }
}

/* Section Introduction */
.seo-section-intro {
  margin-bottom: 5rem;
  text-align: center;
}

@media (max-width: 768px) {
  .seo-section-intro {
    margin-bottom: 3rem;
  }
}

.seo-intro-content {
  max-width: 900px;
  margin: 0 auto;
}

/* Intro Text - Matching RD page */
.seo-intro-text {
  font-size: 1.125rem;
  color: var(--seo-text-secondary);
  line-height: 1.8;
}

@media (max-width: 768px) {
  .seo-intro-text {
    font-size: 1rem;
    line-height: 1.6;
  }
}

/* Performance Section */
.seo-performance-section {
  margin-bottom: 6rem;
}

/* Section Title - Matching RD page */
.seo-section-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

@media (max-width: 768px) {
  .seo-section-title {
    font-size: 1.5rem;
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .seo-section-title {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
  }
}

.seo-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #00ffff 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Stats Grid */
.seo-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

@media (max-width: 768px) {
  .seo-stats-grid {
    grid-template-columns: 1fr;
  }
}

.seo-stat-card {
  background: var(--seo-card-bg);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.seo-stat-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 255, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
}

.seo-stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(0, 255, 255, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.seo-stat-card:hover::before {
  opacity: 1;
}

.seo-stat-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  color: var(--seo-primary-neon);
}

.seo-stat-icon svg {
  width: 100%;
  height: 100%;
}

.seo-stat-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--seo-primary-neon);
  line-height: 1;
  margin-bottom: 0.5rem;
}

@media (max-width: 768px) {
  .seo-stat-number {
    font-size: 2.5rem;
  }
}

.seo-stat-label {
  font-size: 1.1rem;
  color: var(--seo-text-primary);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.seo-stat-desc {
  font-size: 0.9rem;
  color: var(--seo-text-secondary);
  line-height: 1.4;
}

/* Info Cards Container */
.seo-cards-container {
  display: grid;
  gap: 3rem;
  margin-bottom: 6rem;
}

.seo-info-card {
  background: var(--seo-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3rem;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .seo-info-card {
    padding: 2rem;
  }
}

.seo-card-glow {
  position: absolute;
  top: -100px;
  right: -100px;
  width: 300px;
  height: 300px;
  background: radial-gradient(
    circle,
    rgba(129, 140, 248, 0.2) 0%,
    transparent 70%
  );
  opacity: 0.5;
  animation: seoGlowPulse 4s ease-in-out infinite;
}

@keyframes seoGlowPulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.8;
  }
}

.seo-card-header {
  margin-bottom: 2rem;
}

.seo-card-title {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--seo-text-primary);
}

@media (max-width: 480px) {
  .seo-card-title {
    font-size: 1.5rem;
  }
}

.seo-card-accent {
  width: 60px;
  height: 3px;
  background: var(--seo-gradient-primary);
  border-radius: 2px;
}

/* Feature List */
.seo-feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.seo-feature-list li {
  display: flex;
  align-items: flex-start;
  margin-bottom: 1.5rem;
  padding-left: 0;
}

.seo-feature-icon {
  color: var(--seo-primary-neon);
  font-size: 1.5rem;
  margin-right: 1rem;
  flex-shrink: 0;
  line-height: 1.2;
}

/* Process Grid */
.seo-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

@media (max-width: 768px) {
  .seo-process-grid {
    grid-template-columns: 1fr;
  }
}

.seo-process-item {
  text-align: center;
  padding: 1.5rem;
  background: rgba(129, 140, 248, 0.05);
  border-radius: 15px;
  border: 1px solid rgba(129, 140, 248, 0.2);
  transition: all 0.3s ease;
}

.seo-process-item:hover {
  background: rgba(129, 140, 248, 0.1);
  transform: translateY(-3px);
}

.seo-process-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--seo-accent-purple);
  opacity: 0.3;
  margin-bottom: 0.5rem;
}

@media (max-width: 480px) {
  .seo-process-number {
    font-size: 2rem;
  }
}

.seo-process-item h3 {
  font-size: 1.2rem;
  color: var(--seo-text-primary);
  margin-bottom: 0.5rem;
}

.seo-process-item p {
  font-size: 0.9rem;
  color: var(--seo-text-secondary);
  line-height: 1.4;
}

/* Backlink Visual Styles - Chart Based */
.seo-backlink-visual {
  margin: 2rem 0 3rem;
  position: relative;
}

.seo-chart-container {
  position: relative;
  height: 300px;
  margin-bottom: 2rem;
  background: rgba(15, 15, 15, 0.5);
  border-radius: 15px;
  padding: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

@media (max-width: 768px) {
  .seo-chart-container {
    height: 250px;
  }
}

.seo-backlink-legend {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .seo-backlink-legend {
    gap: 1rem;
  }
}

.seo-legend-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.9rem;
  color: var(--seo-text-secondary);
}

.seo-legend-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}

.seo-legend-dot.high-quality {
  background: var(--seo-primary-neon);
  box-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.seo-legend-dot.medium-quality {
  background: var(--seo-accent-purple);
  box-shadow: 0 0 10px rgba(129, 140, 248, 0.5);
}

.seo-legend-dot.low-quality {
  background: #6b7280;
  box-shadow: 0 0 10px rgba(107, 114, 128, 0.5);
}

.seo-backlink-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

@media (max-width: 768px) {
  .seo-backlink-metrics {
    grid-template-columns: 1fr;
  }
}

.seo-metric-card {
  background: rgba(129, 140, 248, 0.05);
  border: 1px solid rgba(129, 140, 248, 0.2);
  border-radius: 15px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.seo-metric-card:hover {
  background: rgba(129, 140, 248, 0.1);
  transform: translateY(-3px);
}

.seo-metric-icon {
  font-size: 2rem;
  font-weight: 900;
  color: var(--seo-accent-purple);
  margin-bottom: 0.5rem;
}

.seo-metric-card span {
  font-size: 0.9rem;
  color: var(--seo-text-secondary);
  display: block;
}

.seo-backlink-intro {
  font-size: 1.1rem;
  color: var(--seo-text-secondary);
  margin-bottom: 2rem;
  line-height: 1.6;
}

/* Code Demo */
.seo-code-demo {
  margin-bottom: 2rem;
}

.seo-code-header {
  background: #1a1a1a;
  padding: 0.75rem 1rem;
  border-radius: 10px 10px 0 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.seo-code-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ff5f56;
}

.seo-code-dot:nth-child(2) {
  background: #ffbd2e;
}

.seo-code-dot:nth-child(3) {
  background: #27c93f;
}

.seo-code-title {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--seo-text-secondary);
}

.seo-code-snippet {
  background: #0d0d0d;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0 0 10px 10px;
  padding: 1.5rem;
  overflow-x: auto;
  margin: 0;
}

.seo-code-snippet code {
  color: var(--seo-primary-neon);
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9rem;
  line-height: 1.6;
}

.seo-code-explanation {
  font-size: 1rem;
  color: var(--seo-text-secondary);
  margin: 1.5rem 0 2rem;
  line-height: 1.6;
}

/* Speed Showcase */
.seo-speed-showcase {
  margin: 2rem 0;
  display: flex;
  justify-content: center;
}

.seo-speed-meter {
  text-align: center;
}

.seo-meter-circle {
  width: 200px;
  height: 200px;
  margin: 0 auto 2rem;
  position: relative;
}

.seo-meter-svg {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}

.seo-meter-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 15;
}

.seo-meter-progress {
  fill: none;
  stroke: url(#seo-gradient);
  stroke-width: 15;
  stroke-linecap: round;
  stroke-dasharray: 565;
  stroke-dashoffset: 565;
  animation: seoMeterFill 2s ease-out forwards;
}

@keyframes seoMeterFill {
  to {
    stroke-dashoffset: 56; /* 90% filled */
  }
}

.seo-meter-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.seo-speed-score {
  font-size: 3rem;
  font-weight: 900;
  background: var(--seo-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: seoScoreCount 2s ease-out;
}

@keyframes seoScoreCount {
  0% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1.1);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

.seo-speed-label {
  font-size: 0.9rem;
  color: var(--seo-text-secondary);
  text-transform: uppercase;
  letter-spacing: 1px;
}

.seo-speed-metrics {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2rem;
}

@media (max-width: 1024px) {
  .seo-speed-metrics {
    gap: 2rem;
  }
}

.seo-metric {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.seo-metric-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--seo-primary-neon);
  margin-bottom: 0.25rem;
}

.seo-metric-label {
  font-size: 0.8rem;
  color: var(--seo-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Analytics Visual */
.seo-analytics-visual {
  margin: 2rem 0;
  text-align: center;
}

.seo-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 1rem;
  height: 150px;
  margin-bottom: 1rem;
}

.seo-bar {
  width: 40px;
  background: var(--seo-gradient-accent);
  border-radius: 5px 5px 0 0;
  transition: transform 0.5s ease;
  transform: scaleY(0);
  transform-origin: bottom;
}

.seo-chart-label {
  font-size: 0.9rem;
  color: var(--seo-text-secondary);
}

/* CTA Section */
.seo-cta-section {
  margin-top: 6rem;
  text-align: center;
  padding: 4rem 0;
  position: relative;
}

.seo-cta-content {
  background: linear-gradient(
    135deg,
    rgba(129, 140, 248, 0.1),
    rgba(236, 72, 153, 0.1)
  );
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 30px;
  padding: 4rem 2rem;
  max-width: 800px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
}

@media (max-width: 768px) {
  .seo-cta-content {
    padding: 3rem 1.5rem;
  }
}

/* CTA Title - Matching RD page */
.seo-cta-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
  background: var(--seo-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

@media (max-width: 768px) {
  .seo-cta-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .seo-cta-title {
    font-size: 1.25rem;
  }
}

.seo-cta-text {
  font-size: 1.125rem;
  color: var(--seo-text-secondary);
  margin-bottom: 2rem;
}

@media (max-width: 768px) {
  .seo-cta-text {
    font-size: 1rem;
  }
}

.seo-cta-button {
  display: inline-block;
  padding: 1rem 3rem;
  background: var(--seo-gradient-accent);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(129, 140, 248, 0.3);
}

@media (max-width: 480px) {
  .seo-cta-button {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
}

.seo-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(129, 140, 248, 0.4);
}

/* Fade-in Animation */
.seo-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.seo-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ================================
   DIGITAL MARKETING PAGE - EXCLUSIVE STYLES
   Dark, Mysterious, Neon Theme
   All classes prefixed with 'dm-' to avoid conflicts
   ================================ */

/* Digital Marketing Page Variables */
.dm-page {
  --dm-primary-neon: #00ffff;
  --dm-secondary-neon: #ff00ff;
  --dm-accent-purple: #818cf8;
  --dm-accent-pink: #ec4899;
  --dm-accent-green: #10b981;
  --dm-dark-bg: #0a0a0a;
  --dm-darker-bg: #050505;
  --dm-card-bg: rgba(15, 15, 15, 0.9);
  --dm-text-primary: #ffffff;
  --dm-text-secondary: #b0b0b0;
  --dm-gradient-primary: linear-gradient(135deg, #00ffff, #818cf8);
  --dm-gradient-accent: linear-gradient(135deg, #818cf8, #ec4899);
}

/* Page Base */
.dm-page {
  background-color: var(--dm-dark-bg);
  color: var(--dm-text-primary);
  font-family: 'Exo', sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Page Content Wrapper */
.dm-page-content {
  position: relative;
  z-index: 2;
}

/* Hero Section */
.dm-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
  padding-top: 93px;
}

@media (max-width: 768px) {
  .dm-hero-section {
    padding-top: 70px;
    min-height: auto;
    padding-bottom: 2rem;
  }
}

.dm-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(0, 255, 255, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(129, 140, 248, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(236, 72, 153, 0.05) 0%,
      transparent 50%
    );
  z-index: 1;
}

.dm-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 2rem;
  max-width: 1200px;
  width: 100%;
}

.dm-hero-text-wrapper {
  background: rgba(0, 0, 0, 0.8);
  padding: 4rem;
  border-radius: 30px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .dm-hero-text-wrapper {
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
  }
}

/* Hero Title - Matching SEO page */
.dm-hero-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 900;
  margin: 0 0 1.5rem 0;
  line-height: 0.9;
  position: relative;
  background: linear-gradient(
    135deg,
    #00ffff 0%,
    #818cf8 25%,
    #ec4899 50%,
    #10b981 75%,
    #00ffff 100%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: dmGradientShift 8s ease-in-out infinite,
    dmFloat 3s ease-in-out infinite;
  text-transform: uppercase;
  letter-spacing: 3px;
}

@keyframes dmGradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes dmFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.dm-hero-word {
  display: block;
  margin: 0.1em 0;
}

.dm-hero-divider {
  width: 100px;
  height: 3px;
  background: var(--dm-gradient-primary);
  margin: 1.5rem auto;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.dm-hero-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: dmDividerShine 3s ease-in-out infinite;
}

@keyframes dmDividerShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.dm-hero-subheading {
  font-size: 1.25rem;
  color: var(--dm-text-secondary);
  line-height: 1.6;
  max-width: 800px;
  margin: 0 auto;
  font-weight: 300;
}

/* Animated Background */
.dm-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}

.dm-float-element {
  position: absolute;
  background: linear-gradient(
    135deg,
    rgba(0, 255, 255, 0.1),
    rgba(129, 140, 248, 0.1)
  );
  border: 2px solid rgba(0, 255, 255, 0.2);
  border-radius: 20px;
  opacity: 0.3;
}

/* Main Content Section */
.dm-main-content {
  padding: 5rem 0;
  background: var(--dm-dark-bg);
  position: relative;
}

.dm-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Section Introduction */
.dm-section-intro {
  margin-bottom: 5rem;
  text-align: center;
}

.dm-intro-content {
  max-width: 900px;
  margin: 0 auto;
}

.dm-intro-text {
  font-size: 1.125rem;
  color: var(--dm-text-secondary);
  line-height: 1.8;
}

/* Service Showcase Section - Matching SEO Stats Grid */
.dm-service-section {
  margin-bottom: 6rem;
}

.dm-section-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  text-align: center;
  margin-bottom: 3rem;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.dm-gradient-text {
  background: linear-gradient(135deg, #ffffff 0%, #00ffff 50%, #818cf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Service Grid - Matching SEO Stats Grid */
.dm-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.dm-service-card {
  background: var(--dm-card-bg);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.dm-service-card:hover {
  transform: translateY(-5px);
  border-color: rgba(0, 255, 255, 0.4);
  box-shadow: 0 20px 40px rgba(0, 255, 255, 0.2);
}

.dm-service-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(0, 255, 255, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.dm-service-card:hover::before {
  opacity: 1;
}

.dm-service-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  color: var(--dm-primary-neon);
}

.dm-service-icon svg {
  width: 100%;
  height: 100%;
}

.dm-service-name {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--dm-text-primary);
  margin-bottom: 1rem;
}

.dm-service-desc {
  font-size: 0.95rem;
  color: var(--dm-text-secondary);
  line-height: 1.5;
}

/* Stats Counter Section */
.dm-stats-section {
  background: linear-gradient(
    135deg,
    rgba(15, 15, 15, 0.9),
    rgba(20, 20, 20, 0.9)
  );
  padding: 80px 20px;
  margin: 80px 0;
  position: relative;
  overflow: hidden;
}

.dm-stats-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(
    circle at 30% 50%,
    rgba(129, 140, 248, 0.1) 0%,
    transparent 50%
  );
  z-index: 0;
}

.dm-stats-container {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 40px;
  text-align: center;
  position: relative;
  z-index: 1;
}

.dm-stat-box {
  padding: 30px;
}

.dm-stat-number {
  font-size: 3.5rem;
  font-weight: 900;
  color: var(--dm-primary-neon);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.dm-stat-label {
  font-size: 1.1rem;
  color: var(--dm-text-primary);
  font-weight: 600;
}

/* Process Timeline - Matching SEO Process Grid */
.dm-process-section {
  padding: 80px 20px;
  background: var(--dm-dark-bg);
}

.dm-process-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.dm-process-item {
  text-align: center;
  padding: 1.5rem;
  background: rgba(129, 140, 248, 0.05);
  border-radius: 15px;
  border: 1px solid rgba(129, 140, 248, 0.2);
  transition: all 0.3s ease;
}

.dm-process-item:hover {
  background: rgba(129, 140, 248, 0.1);
  transform: translateY(-3px);
}

.dm-process-number {
  font-size: 3rem;
  font-weight: 900;
  color: var(--dm-accent-purple);
  opacity: 0.3;
  margin-bottom: 0.5rem;
}

.dm-process-item h3 {
  font-size: 1.2rem;
  color: var(--dm-text-primary);
  margin-bottom: 0.5rem;
}

.dm-process-item p {
  font-size: 0.9rem;
  color: var(--dm-text-secondary);
  line-height: 1.4;
}

/* Tools Section */
.dm-tools-section {
  padding: 80px 20px;
  background: var(--dm-darker-bg);
}

.dm-tools-container {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
}

.dm-tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 2rem;
  margin-top: 3rem;
}

.dm-tool-item {
  background: var(--dm-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  padding: 2rem 1rem;
  border-radius: 15px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dm-tool-item:hover {
  transform: translateY(-5px);
  border-color: var(--dm-primary-neon);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.2);
}

.dm-tool-icon {
  width: 50px;
  height: 50px;
  margin: 0 auto 1rem;
  color: var(--dm-accent-purple);
  transition: color 0.3s ease;
}

.dm-tool-item:hover .dm-tool-icon {
  color: var(--dm-primary-neon);
}

.dm-tool-icon svg {
  width: 100%;
  height: 100%;
}

.dm-tool-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--dm-text-primary);
}

/* Why Digital Marketing Section - Interactive Grid */
.dm-why-section {
  padding: 80px 20px;
  background: var(--dm-darker-bg);
}

.dm-why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  max-width: 1200px;
  margin: 0 auto;
}

.dm-why-card {
  background: linear-gradient(
    135deg,
    rgba(15, 15, 15, 0.9),
    rgba(20, 20, 20, 0.9)
  );
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.dm-why-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--dm-gradient-primary);
  border-radius: 20px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.dm-why-card:hover::before {
  opacity: 1;
}

.dm-why-card:hover {
  transform: translateY(-10px);
  border-color: transparent;
}

.dm-why-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 1.5rem;
  color: var(--dm-primary-neon);
}

.dm-why-icon svg {
  width: 100%;
  height: 100%;
}

.dm-why-card h3 {
  font-size: 1.3rem;
  color: var(--dm-text-primary);
  margin-bottom: 1rem;
}

.dm-why-card p {
  color: var(--dm-text-secondary);
  line-height: 1.6;
}

/* Our Approach Section - Timeline Style */
.dm-approach-section {
  padding: 80px 20px;
  background: var(--dm-dark-bg);
  position: relative;
  overflow: hidden;
}

.dm-approach-timeline {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.dm-approach-timeline::before {
  content: '';
  position: absolute;
  left: 29px; /* Center of 60px icon */
  top: 30px; /* Start from first icon center */
  bottom: 30px; /* End at last icon center */
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--dm-primary-neon),
    var(--dm-accent-purple)
  );
}

.dm-approach-item {
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  position: relative;
  opacity: 0;
  transform: translateX(-30px);
  animation: slideInLeft 0.6s ease forwards;
}

.dm-approach-item:last-child {
  margin-bottom: 0;
}

.dm-approach-item:nth-child(1) {
  animation-delay: 0.1s;
}
.dm-approach-item:nth-child(2) {
  animation-delay: 0.2s;
}
.dm-approach-item:nth-child(3) {
  animation-delay: 0.3s;
}
.dm-approach-item:nth-child(4) {
  animation-delay: 0.4s;
}
.dm-approach-item:nth-child(5) {
  animation-delay: 0.5s;
}
.dm-approach-item:nth-child(6) {
  animation-delay: 0.6s;
}

@keyframes slideInLeft {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.dm-approach-icon {
  width: 60px;
  height: 60px;
  background: var(--dm-dark-bg);
  border: 2px solid var(--dm-primary-neon);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-right: 2rem;
  position: relative;
  z-index: 2;
}

.dm-approach-icon::after {
  content: '';
  position: absolute;
  width: 10px;
  height: 10px;
  background: var(--dm-primary-neon);
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.dm-approach-icon svg {
  width: 30px;
  height: 30px;
  color: var(--dm-primary-neon);
}

.dm-approach-content {
  background: var(--dm-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 1.5rem;
  flex: 1;
  transition: all 0.3s ease;
}

.dm-approach-content:hover {
  border-color: var(--dm-primary-neon);
  transform: translateX(5px);
}

.dm-approach-content h3 {
  color: var(--dm-text-primary);
  margin-bottom: 0.5rem;
  font-size: 1.2rem;
}

.dm-approach-content p {
  color: var(--dm-text-secondary);
  line-height: 1.5;
  margin: 0;
}

/* PPC Section - Feature Showcase */
.dm-ppc-section {
  padding: 80px 20px;
  background: linear-gradient(
    135deg,
    rgba(15, 15, 15, 0.9),
    rgba(20, 20, 20, 0.9)
  );
}

.dm-ppc-showcase {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  max-width: 1200px;
  margin: 0 auto;
  align-items: center;
}

.dm-ppc-visual {
  position: relative;
}

.dm-ppc-mockup {
  background: var(--dm-dark-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 2rem;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.dm-search-bar {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.dm-search-bar svg {
  width: 20px;
  height: 20px;
  color: var(--dm-text-secondary);
}

.dm-search-bar span {
  color: var(--dm-text-secondary);
  font-style: italic;
}

.dm-ad-result {
  background: rgba(0, 255, 255, 0.05);
  border: 1px solid rgba(0, 255, 255, 0.2);
  border-radius: 10px;
  padding: 1.5rem;
  position: relative;
}

.dm-ad-tag {
  display: inline-block;
  background: var(--dm-primary-neon);
  color: var(--dm-dark-bg);
  padding: 0.2rem 0.5rem;
  border-radius: 5px;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.dm-ad-result h4 {
  color: var(--dm-primary-neon);
  margin-bottom: 0.5rem;
}

.dm-ad-result p {
  color: var(--dm-text-secondary);
  margin: 0;
  font-size: 0.9rem;
}

.dm-ppc-features {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.dm-ppc-feature h3 {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--dm-text-primary);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.dm-ppc-feature h3 svg {
  width: 24px;
  height: 24px;
  color: var(--dm-primary-neon);
  flex-shrink: 0;
}

.dm-ppc-feature p {
  color: var(--dm-text-secondary);
  line-height: 1.5;
  font-size: 0.95rem;
  margin-left: 2.5rem;
}

/* CRO Section - Interactive Demo */
.dm-cro-section {
  padding: 80px 20px;
  background: var(--dm-dark-bg);
}

.dm-cro-demo {
  max-width: 1200px;
  margin: 0 auto;
}

.dm-cro-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.dm-cro-card {
  background: var(--dm-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
}

.dm-cro-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--dm-gradient-accent);
  border-radius: 20px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.dm-cro-card:hover::after {
  opacity: 1;
}

.dm-cro-card:hover {
  transform: scale(1.05);
  border-color: transparent;
}

.dm-cro-card:hover .dm-cro-icon {
  transform: rotateY(180deg);
}

.dm-cro-icon {
  width: 80px;
  height: 80px;
  background: linear-gradient(
    135deg,
    rgba(129, 140, 248, 0.2),
    rgba(236, 72, 153, 0.2)
  );
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
  transition: transform 0.6s ease;
  transform-style: preserve-3d;
}

.dm-cro-icon svg {
  width: 40px;
  height: 40px;
  color: var(--dm-accent-purple);
}

.dm-cro-card h3 {
  color: var(--dm-text-primary);
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.dm-cro-card p {
  color: var(--dm-text-secondary);
  line-height: 1.5;
}

/* Analytics Section - Dashboard Style */
.dm-analytics-section {
  padding: 80px 20px;
  background: linear-gradient(135deg, #0a0a0a, #1a1a1a);
}

.dm-analytics-dashboard {
  max-width: 1200px;
  margin: 0 auto;
}

.dm-dashboard-main {
  background: var(--dm-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 3rem;
  margin-bottom: 3rem;
  position: relative;
  overflow: hidden;
}

.dm-dashboard-main::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--dm-gradient-primary);
}

.dm-metric-display {
  display: grid;
  gap: 2rem;
}

.dm-metric-item {
  display: grid;
  grid-template-columns: 150px 100px 1fr;
  align-items: center;
  gap: 2rem;
}

.dm-metric-label {
  color: var(--dm-text-secondary);
  font-size: 1rem;
}

.dm-metric-value {
  font-size: 2rem;
  font-weight: 900;
  color: var(--dm-primary-neon);
  text-align: right;
}

.dm-metric-bar {
  height: 8px;
  background: var(--dm-gradient-accent);
  border-radius: 4px;
  position: relative;
  overflow: hidden;
}

.dm-metric-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.dm-analytics-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
}

.dm-analytics-feature {
  background: var(--dm-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.dm-analytics-feature:hover {
  transform: translateY(-5px);
  border-color: var(--dm-accent-purple);
}

.dm-analytics-feature h3 {
  color: var(--dm-text-primary);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.dm-analytics-feature p {
  color: var(--dm-text-secondary);
  line-height: 1.5;
}

/* CTA Section - Matching SEO CTA */
.dm-cta-section {
  margin-top: 6rem;
  text-align: center;
  padding: 4rem 0;
  position: relative;
}

.dm-cta-content {
  background: linear-gradient(
    135deg,
    rgba(129, 140, 248, 0.1),
    rgba(236, 72, 153, 0.1)
  );
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 30px;
  padding: 4rem 2rem;
  max-width: 800px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
}

.dm-cta-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
  background: var(--dm-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.dm-cta-text {
  font-size: 1.125rem;
  color: var(--dm-text-secondary);
  margin-bottom: 2rem;
}

.dm-cta-buttons {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
}

.dm-cta-button {
  display: inline-block;
  padding: 1rem 3rem;
  background: var(--dm-gradient-accent);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(129, 140, 248, 0.3);
}

.dm-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(129, 140, 248, 0.4);
}

.dm-cta-button-secondary {
  background: transparent;
  border: 2px solid rgba(129, 140, 248, 0.6);
  color: var(--dm-text-primary);
}

.dm-cta-button-secondary:hover {
  background: rgba(129, 140, 248, 0.1);
  border-color: var(--dm-primary-neon);
}

/* Fade-in Animation */
.dm-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.dm-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .dm-hero-title {
    font-size: 2rem;
    letter-spacing: 1px;
  }

  .dm-services-grid {
    grid-template-columns: 1fr;
  }

  .dm-stats-container {
    grid-template-columns: repeat(2, 1fr);
  }

  .dm-tools-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  }

  .dm-cta-content {
    padding: 3rem 1.5rem;
  }

  /* Why Section */
  .dm-why-grid {
    grid-template-columns: 1fr;
  }

  /* Approach Timeline */
  .dm-approach-timeline::before {
    left: 30px;
  }

  .dm-approach-icon {
    width: 50px;
    height: 50px;
    margin-right: 1rem;
  }

  .dm-approach-content {
    padding: 1rem;
  }

  /* PPC Section */
  .dm-ppc-showcase {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .dm-ppc-features {
    grid-template-columns: 1fr;
  }

  /* CRO Cards */
  .dm-cro-cards {
    grid-template-columns: 1fr;
  }

  /* Analytics Dashboard */
  .dm-metric-item {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 1rem;
  }

  .dm-metric-value {
    text-align: center;
  }

  .dm-analytics-features {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .dm-approach-timeline::before {
    display: none;
  }

  .dm-approach-icon {
    display: none;
  }

  .dm-approach-content {
    margin-left: 0;
  }

  .dm-dashboard-main {
    padding: 1.5rem;
  }
}

/* ================================
   PAGESPEED ANALYTICS PAGE - EXCLUSIVE STYLES
   ================================ */
/* PageSpeed Performance Page Styles */
.pagespeed-body {
  background-color: #0a0a0a;
  color: #e0e0e0;
  font-family: 'Exo', Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
  position: relative;
}

.pagespeed-wrapper {
  position: relative;
  width: 100%;
}

/* Background layers for sections */
.pagespeed-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0a0a0a 0%, #1a0a2a 100%);
  z-index: 0;
}

.pagespeed-hero::after {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(
      circle at 20% 50%,
      rgba(138, 43, 226, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(0, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 20%,
      rgba(255, 0, 255, 0.1) 0%,
      transparent 50%
    );
  animation: pagespeedFloat 20s ease-in-out infinite;
  z-index: 1;
}

.pagespeed-details::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #0a0a0a 0%, #1a0a2a 100%);
  z-index: 0;
}

.pagespeed-cost::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a0a0a;
  z-index: 0;
}

.pagespeed-info-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #1a0a2a 0%, #0a0a0a 100%);
  z-index: 0;
}

.pagespeed-demo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #0a0a0a;
  z-index: 0;
}

/* Hero Section */
.pagespeed-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
  padding-top: 93px;
}

@media (max-width: 768px) {
  .pagespeed-hero {
    padding-top: 70px;
    min-height: auto;
    padding-bottom: 2rem;
  }
}

.pagespeed-hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
  z-index: 0;
}

.pagespeed-hero::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(0, 255, 255, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(138, 43, 226, 0.08) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(255, 0, 255, 0.05) 0%,
      transparent 50%
    );
  z-index: 1;
}

.pagespeed-hero::before {
  content: '';
  position: absolute;
  width: 200%;
  height: 200%;
  background: radial-gradient(
      circle at 20% 50%,
      rgba(138, 43, 226, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 80% 80%,
      rgba(0, 255, 255, 0.1) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 40% 20%,
      rgba(255, 0, 255, 0.1) 0%,
      transparent 50%
    );
  animation: pagespeedFloat 20s ease-in-out infinite;
}

@keyframes pagespeedFloat {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  33% {
    transform: translate(-30px, -30px) rotate(120deg);
  }
  66% {
    transform: translate(30px, -20px) rotate(240deg);
  }
}

.pagespeed-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 2rem;
  max-width: 1200px;
  width: 100%;
}

/* Hero Text Wrapper - New */
.pagespeed-hero-text-wrapper {
  background: rgba(0, 0, 0, 0.8);
  padding: 4rem;
  border-radius: 30px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .pagespeed-hero-text-wrapper {
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
  }
}

.pagespeed-hero-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 900;
  margin: 0 0 1.5rem 0;
  line-height: 0.9;
  position: relative;
  background: linear-gradient(
    135deg,
    #00ffff 0%,
    #8a2be2 25%,
    #ff00ff 50%,
    #00ff88 75%,
    #00ffff 100%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: pagespeedGradientShift 8s ease-in-out infinite,
    pagespeedFloatTitle 3s ease-in-out infinite;
  text-transform: uppercase;
  letter-spacing: 3px;
}

@media (max-width: 768px) {
  .pagespeed-hero-title {
    font-size: 2rem;
    letter-spacing: 1px;
  }
}

@media (max-width: 480px) {
  .pagespeed-hero-title {
    font-size: 1.75rem;
    letter-spacing: 0.5px;
  }
}

@keyframes pagespeedGradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes pagespeedFloatTitle {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.pagespeed-word-top,
.pagespeed-word-bottom {
  display: block;
  margin: 0.1em 0;
}

@media (max-width: 480px) {
  .pagespeed-word-top,
  .pagespeed-word-bottom {
    margin: 0 0;
    line-height: 1;
  }
}

/* Hero Divider - New */
.pagespeed-hero-divider {
  width: 100px;
  height: 3px;
  background: linear-gradient(135deg, #00ffff, #8a2be2);
  margin: 1.5rem auto;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

@media (max-width: 768px) {
  .pagespeed-hero-divider {
    width: 60px;
    height: 2px;
    margin: 0.75rem auto;
  }
}

.pagespeed-hero-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.8),
    transparent
  );
  animation: pagespeedDividerShine 3s ease-in-out infinite;
}

@keyframes pagespeedDividerShine {
  0% {
    left: -100%;
  }
  100% {
    left: 100%;
  }
}

.pagespeed-hero-subtitle {
  font-size: 1.25rem;
  color: #b0b0b0;
  margin-top: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  opacity: 0;
  animation: pagespeedFadeUp 1s ease-out 0.5s forwards;
}

@keyframes pagespeedFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Speed Meter Section */
.pagespeed-meter-section {
  padding: 5rem 2rem;
  position: relative;
}

.pagespeed-meter-wrapper {
  max-width: 600px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;
}

.pagespeed-meter-box {
  position: relative;
  padding: 2rem;
  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.1),
    rgba(0, 255, 255, 0.1)
  );
  border-radius: 20px;
  border: 1px solid rgba(138, 43, 226, 0.3);
  box-shadow: 0 0 50px rgba(138, 43, 226, 0.2);
}

.pagespeed-meter-display {
  position: relative;
  margin-bottom: 2rem;
}

.pagespeed-meter-circle {
  position: relative;
  width: 200px;
  height: 200px;
  margin: 0 auto;
}

.pagespeed-meter-circle svg {
  transform: rotate(-90deg);
}

.pagespeed-meter-bg {
  fill: none;
  stroke: rgba(255, 255, 255, 0.1);
  stroke-width: 15;
}

.pagespeed-meter-fill {
  fill: none;
  stroke: url(#pagespeedGradient);
  stroke-width: 15;
  stroke-dasharray: 565.48;
  stroke-dashoffset: 565.48;
  transition: stroke-dashoffset 2s cubic-bezier(0.4, 0, 0.2, 1);
  filter: drop-shadow(0 0 10px currentColor);
}

.pagespeed-meter-reading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.pagespeed-speed-value {
  font-size: 3rem;
  font-weight: 700;
  background: linear-gradient(45deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pagespeed-speed-unit {
  display: block;
  font-size: 1rem;
  color: #b0b0b0;
  margin-top: -0.5rem;
}

.pagespeed-meter-status {
  font-size: 1.5rem;
  font-weight: 600;
  margin-top: 1rem;
  transition: color 0.3s ease;
}

.pagespeed-meter-scale {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 0 2rem;
}

.pagespeed-meter-scale span {
  font-size: 0.875rem;
  opacity: 0.7;
}

.pagespeed-scale-slow {
  color: #ff4444;
}
.pagespeed-scale-avg {
  color: #ffaa00;
}
.pagespeed-scale-fast {
  color: #00ff88;
}

/* Details Section */
.pagespeed-details {
  padding: 3rem 2rem;
  position: relative;
}

.pagespeed-details-content {
  max-width: 900px;
  margin: 0 auto 4rem;
  text-align: center;
  position: relative;
  z-index: 10;
}

.pagespeed-details-text {
  font-size: 1.25rem;
  line-height: 1.8;
  color: #b0b0b0;
  position: relative;
  padding: 2rem;
  background: rgba(138, 43, 226, 0.05);
  border-radius: 15px;
  border: 1px solid rgba(138, 43, 226, 0.2);
}

/* Performance Metrics */
.pagespeed-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.pagespeed-metric-item {
  text-align: center;
  opacity: 0;
  animation: pagespeedFadeScale 0.8s ease-out forwards;
}

.pagespeed-metric-item:nth-child(1) {
  animation-delay: 0.1s;
}
.pagespeed-metric-item:nth-child(2) {
  animation-delay: 0.2s;
}
.pagespeed-metric-item:nth-child(3) {
  animation-delay: 0.3s;
}
.pagespeed-metric-item:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes pagespeedFadeScale {
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.pagespeed-metric-circle-wrapper {
  position: relative;
  display: inline-block;
}

.pagespeed-metric-circle {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.2),
    rgba(0, 255, 255, 0.2)
  );
  border: 3px solid transparent;
  background-image: linear-gradient(#0a0a0a, #0a0a0a),
    linear-gradient(45deg, #8a2be2, #00ffff);
  background-origin: border-box;
  background-clip: content-box, border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.pagespeed-metric-circle:hover {
  transform: scale(1.1);
  box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
}

.pagespeed-metric-circle::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    45deg,
    transparent,
    rgba(255, 255, 255, 0.1),
    transparent
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
}

.pagespeed-metric-circle:hover::before {
  transform: translateX(100%);
}

.pagespeed-metric-counter {
  font-size: 2.5rem;
  font-weight: 700;
  background: linear-gradient(45deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pagespeed-metric-label {
  margin-top: 1rem;
  font-size: 1.1rem;
  color: #b0b0b0;
  font-weight: 500;
}

/* Cost Section */
.pagespeed-cost {
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}

.pagespeed-cost::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #8a2be2, transparent);
  animation: pagespeedSlide 3s linear infinite;
}

@keyframes pagespeedSlide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.pagespeed-cost-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.pagespeed-cost-title {
  text-align: center;
  font-size: 3rem;
  margin-bottom: 3rem;
  background: linear-gradient(45deg, #ff0080, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-shadow: 0 0 30px rgba(255, 0, 128, 0.3);
}

.pagespeed-cost-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.pagespeed-cost-card {
  background: linear-gradient(
    135deg,
    rgba(138, 43, 226, 0.1),
    rgba(0, 255, 255, 0.05)
  );
  border: 1px solid rgba(138, 43, 226, 0.3);
  border-radius: 15px;
  padding: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pagespeed-cost-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #8a2be2, #00ffff);
  border-radius: 15px;
  opacity: 0;
  z-index: -1;
  transition: opacity 0.3s ease;
}

.pagespeed-cost-card:hover::before {
  opacity: 1;
}

.pagespeed-cost-card:hover {
  transform: translateY(-5px);
  background: rgba(10, 10, 10, 0.9);
}

.pagespeed-cost-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pagespeed-icon-bounce {
  background: linear-gradient(135deg, #ff4444, #ff0080);
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}

.pagespeed-icon-revenue {
  background: linear-gradient(135deg, #00d4ff, #0080ff);
  box-shadow: 0 0 20px rgba(0, 212, 255, 0.5);
}

.pagespeed-icon-mobile {
  background: linear-gradient(135deg, #a855f7, #8a2be2);
  box-shadow: 0 0 20px rgba(168, 85, 247, 0.5);
}

.pagespeed-icon-conversion {
  background: linear-gradient(135deg, #10b981, #00ff88);
  box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.pagespeed-cost-icon svg {
  width: 30px;
  height: 30px;
  color: white;
}

.pagespeed-cost-data h3 {
  font-size: 2.5rem;
  margin: 0;
  background: linear-gradient(45deg, #fff, #e0e0e0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pagespeed-cost-label {
  font-size: 1.1rem;
  color: #b0b0b0;
  margin: 0.25rem 0;
}

.pagespeed-cost-detail {
  font-size: 0.875rem;
  color: #808080;
  display: block;
}

/* Timeline */
.pagespeed-timeline {
  background: rgba(138, 43, 226, 0.05);
  border-radius: 20px;
  padding: 3rem;
  border: 1px solid rgba(138, 43, 226, 0.2);
}

.pagespeed-timeline-title {
  text-align: center;
  font-size: 1.75rem;
  margin-bottom: 2rem;
  color: #e0e0e0;
}

.pagespeed-timeline-wrapper {
  max-width: 800px;
  margin: 0 auto;
}

.pagespeed-timeline-item {
  margin-bottom: 2rem;
  opacity: 0;
  animation: pagespeedSlideLeft 0.8s ease-out forwards;
}

.pagespeed-timeline-item:nth-child(1) {
  animation-delay: 0.1s;
}
.pagespeed-timeline-item:nth-child(2) {
  animation-delay: 0.2s;
}
.pagespeed-timeline-item:nth-child(3) {
  animation-delay: 0.3s;
}
.pagespeed-timeline-item:nth-child(4) {
  animation-delay: 0.4s;
}

@keyframes pagespeedSlideLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.pagespeed-timeline-bar {
  height: 30px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  overflow: hidden;
  margin-bottom: 0.5rem;
  position: relative;
}

.pagespeed-timeline-fill {
  height: 100%;
  border-radius: 15px;
  transition: width 1.5s ease-out;
  position: relative;
  overflow: hidden;
}

.pagespeed-timeline-item[data-time='1s'] .pagespeed-timeline-fill {
  background: linear-gradient(90deg, #00ff88, #10b981);
  box-shadow: 0 0 20px rgba(0, 255, 136, 0.5);
}

.pagespeed-timeline-item[data-time='3s'] .pagespeed-timeline-fill {
  background: linear-gradient(90deg, #ffaa00, #ff8800);
  box-shadow: 0 0 20px rgba(255, 170, 0, 0.5);
}

.pagespeed-timeline-item[data-time='5s'] .pagespeed-timeline-fill {
  background: linear-gradient(90deg, #ff4444, #ff0080);
  box-shadow: 0 0 20px rgba(255, 68, 68, 0.5);
}

.pagespeed-timeline-item[data-time='10s'] .pagespeed-timeline-fill {
  background: linear-gradient(90deg, #cc0000, #800000);
  box-shadow: 0 0 20px rgba(204, 0, 0, 0.5);
}

.pagespeed-timeline-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.3),
    transparent
  );
  animation: pagespeedShimmerBar 2s linear infinite;
}

@keyframes pagespeedShimmerBar {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

.pagespeed-timeline-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.pagespeed-timeline-time {
  font-weight: 600;
  color: #e0e0e0;
}

.pagespeed-timeline-impact {
  color: #b0b0b0;
  font-size: 0.875rem;
}

/* Info Cards */
.pagespeed-info-section {
  padding: 5rem 2rem;
  position: relative;
}

.pagespeed-info-card {
  max-width: 900px;
  margin: 0 auto 3rem;
  padding: 3rem;
  background: rgba(138, 43, 226, 0.05);
  border-radius: 20px;
  border: 1px solid rgba(138, 43, 226, 0.2);
  position: relative;
  transition: all 0.4s ease;
  overflow: hidden;
  z-index: 10;
}

.pagespeed-info-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(138, 43, 226, 0.1),
    transparent
  );
  transition: left 0.6s ease;
}

.pagespeed-info-card:hover::before {
  left: 100%;
}

.pagespeed-info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 40px rgba(138, 43, 226, 0.3);
  border-color: rgba(138, 43, 226, 0.5);
}

.pagespeed-card-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 2rem;
  background: linear-gradient(135deg, #8a2be2, #00ffff);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
  animation: pagespeedPulse 2s ease-in-out infinite;
}

@keyframes pagespeedPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

.pagespeed-card-icon svg {
  width: 40px;
  height: 40px;
  color: white;
}

.pagespeed-card-title {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-align: center;
  background: linear-gradient(45deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pagespeed-card-list {
  list-style: none;
  padding: 0;
}

.pagespeed-card-list li {
  margin-bottom: 1.5rem;
  padding-left: 2rem;
  position: relative;
  line-height: 1.8;
  color: #b0b0b0;
}

.pagespeed-card-list li::before {
  content: '▸';
  position: absolute;
  left: 0;
  color: #8a2be2;
  font-size: 1.5rem;
  top: -0.2rem;
  animation: pagespeedBlink 2s ease-in-out infinite;
}

@keyframes pagespeedBlink {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.3;
  }
}

.pagespeed-card-list strong {
  color: #e0e0e0;
  display: inline-block;
  margin-bottom: 0.25rem;
}

/* Performance Demo */
.pagespeed-demo {
  padding: 5rem 2rem;
  position: relative;
}

.pagespeed-demo-container {
  max-width: 1000px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 10;
}

.pagespeed-demo-title {
  font-size: 3rem;
  margin-bottom: 1rem;
  background: linear-gradient(45deg, #00ffff, #8a2be2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.pagespeed-demo-subtitle {
  font-size: 1.25rem;
  color: #b0b0b0;
  margin-bottom: 3rem;
}

.pagespeed-demo-controls {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}

.pagespeed-demo-btn {
  padding: 1rem 2rem;
  background: rgba(138, 43, 226, 0.1);
  border: 2px solid rgba(138, 43, 226, 0.3);
  border-radius: 50px;
  color: #e0e0e0;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  font-family: 'Exo', Arial, sans-serif;
}

.pagespeed-demo-btn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(138, 43, 226, 0.3);
  transform: translate(-50%, -50%);
  transition: width 0.6s, height 0.6s;
}

.pagespeed-demo-btn:hover::before {
  width: 300px;
  height: 300px;
}

.pagespeed-demo-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 20px rgba(138, 43, 226, 0.4);
}

.pagespeed-btn-active {
  background: linear-gradient(135deg, #8a2be2, #00ffff);
  border-color: transparent;
  color: white;
  box-shadow: 0 0 30px rgba(138, 43, 226, 0.5);
}

.pagespeed-browser {
  background: #1a1a1a;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  margin-bottom: 2rem;
}

.pagespeed-browser-header {
  background: #2a2a2a;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pagespeed-browser-dots {
  display: flex;
  gap: 0.5rem;
}

.pagespeed-browser-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  display: block;
}

.pagespeed-browser-dots span:nth-child(1) {
  background: #ff5f56;
}
.pagespeed-browser-dots span:nth-child(2) {
  background: #ffbd2e;
}
.pagespeed-browser-dots span:nth-child(3) {
  background: #27c93f;
}

.pagespeed-browser-bar {
  flex: 1;
  background: #1a1a1a;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  color: #808080;
  font-size: 0.875rem;
}

.pagespeed-browser-content {
  height: 400px;
  position: relative;
  background: #0a0a0a;
}

.pagespeed-loading {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(10, 10, 10, 0.95);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.pagespeed-loading.pagespeed-show {
  opacity: 1;
  pointer-events: all;
}

.pagespeed-spinner {
  width: 50px;
  height: 50px;
  border: 3px solid rgba(138, 43, 226, 0.1);
  border-top-color: #8a2be2;
  border-radius: 50%;
  animation: pagespeedSpin 1s linear infinite;
}

@keyframes pagespeedSpin {
  to {
    transform: rotate(360deg);
  }
}

.pagespeed-loading-text {
  margin-top: 1rem;
  color: #b0b0b0;
  font-size: 1.1rem;
}

.pagespeed-website {
  padding: 2rem;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.pagespeed-website.pagespeed-hidden {
  opacity: 0;
}

.pagespeed-content-header {
  height: 60px;
  background: linear-gradient(
    90deg,
    rgba(138, 43, 226, 0.2),
    rgba(0, 255, 255, 0.2)
  );
  border-radius: 10px;
  margin-bottom: 2rem;
  animation: pagespeedSlideIn 0.6s ease-out;
}

.pagespeed-content-hero {
  height: 150px;
  background: linear-gradient(
    135deg,
    rgba(255, 0, 255, 0.1),
    rgba(0, 255, 255, 0.1)
  );
  border-radius: 10px;
  margin-bottom: 2rem;
  animation: pagespeedSlideIn 0.8s ease-out;
}

.pagespeed-content-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.pagespeed-content-card {
  height: 100px;
  background: rgba(138, 43, 226, 0.1);
  border-radius: 10px;
  border: 1px solid rgba(138, 43, 226, 0.2);
  animation: pagespeedSlideIn 1s ease-out;
}

.pagespeed-content-card:nth-child(1) {
  animation-delay: 0.2s;
}
.pagespeed-content-card:nth-child(2) {
  animation-delay: 0.4s;
}
.pagespeed-content-card:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes pagespeedSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pagespeed-demo-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  max-width: 500px;
  margin: 0 auto;
}

.pagespeed-demo-stat {
  background: rgba(138, 43, 226, 0.05);
  padding: 1.5rem;
  border-radius: 15px;
  border: 1px solid rgba(138, 43, 226, 0.2);
}

.pagespeed-stat-label {
  display: block;
  color: #b0b0b0;
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}

.pagespeed-stat-value {
  font-size: 2rem;
  font-weight: 700;
  background: linear-gradient(45deg, #00ffff, #ff00ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Responsive Design */
@media (max-width: 768px) {
  .pagespeed-hero-title {
    font-size: clamp(2.5rem, 8vw, 5rem);
  }

  .pagespeed-cost-title {
    font-size: 2rem;
  }

  .pagespeed-cost-grid {
    grid-template-columns: 1fr;
  }

  .pagespeed-timeline-info {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }

  .pagespeed-content-grid {
    grid-template-columns: 1fr;
  }

  .pagespeed-demo-stats {
    grid-template-columns: 1fr;
  }

  .pagespeed-info-card {
    padding: 2rem 1.5rem;
  }

  .pagespeed-card-list li {
    padding-left: 1.5rem;
  }

  .pagespeed-metrics {
    grid-template-columns: repeat(2, 1fr);
  }

  .pagespeed-timeline {
    padding: 2rem 1.5rem;
  }
}

/* ================================
   CONTENT CREATION PAGE - EXCLUSIVE STYLES
   Dark, Mysterious, Neon Theme
   All classes prefixed with 'cc-' to avoid conflicts
   ================================ */

/* Content Creation Page Variables */
.content-creation-page {
  --cc-primary-neon: #00ffff;
  --cc-secondary-neon: #ff00ff;
  --cc-accent-purple: #818cf8;
  --cc-accent-pink: #ec4899;
  --cc-accent-green: #10b981;
  --cc-dark-bg: #0a0a0a;
  --cc-darker-bg: #050505;
  --cc-card-bg: rgba(15, 15, 15, 0.9);
  --cc-text-primary: #ffffff;
  --cc-text-secondary: #b0b0b0;
  --cc-gradient-primary: linear-gradient(135deg, #00ffff, #818cf8);
  --cc-gradient-accent: linear-gradient(135deg, #818cf8, #ec4899);
}

/* Page Base */
.content-creation-page {
  background-color: var(--cc-dark-bg);
  color: var(--cc-text-primary);
  font-family: 'Exo', sans-serif;
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
}

/* Page Content Wrapper */
.cc-page-content {
  position: relative;
  z-index: 2;
}

/* Hero Section */
.cc-hero-section {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0a0a, #1a1a1a);
  padding-top: 93px;
}

@media (max-width: 768px) {
  .cc-hero-section {
    padding-top: 70px;
    min-height: auto;
    padding-bottom: 2rem;
  }
}

.cc-hero-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(
      circle at 20% 30%,
      rgba(129, 140, 248, 0.15) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 80% 70%,
      rgba(236, 72, 153, 0.1) 0%,
      transparent 40%
    ),
    radial-gradient(
      circle at 50% 50%,
      rgba(16, 185, 129, 0.08) 0%,
      transparent 50%
    );
  z-index: 1;
}

/* Animated Background */
.cc-animated-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.cc-content-float {
  position: absolute;
  background: linear-gradient(
    135deg,
    rgba(129, 140, 248, 0.1),
    rgba(236, 72, 153, 0.1)
  );
  border: 2px solid rgba(129, 140, 248, 0.2);
  border-radius: 20px;
  opacity: 0.3;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: float-content 20s ease-in-out infinite;
}

#content-1 {
  width: 200px;
  height: 150px;
  top: 15%;
  left: 10%;
}

#content-2 {
  width: 250px;
  height: 180px;
  top: 60%;
  right: 15%;
  animation-delay: 7s;
}

#content-3 {
  width: 180px;
  height: 220px;
  bottom: 20%;
  left: 25%;
  animation-delay: 14s;
}

.cc-icon-blog,
.cc-icon-article,
.cc-icon-email {
  width: 60px;
  height: 60px;
  background: var(--cc-gradient-accent);
  opacity: 0.6;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.cc-icon-blog {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 20H5a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v1m2 13a2 2 0 01-2-2V7m2 13a2 2 0 002-2V9a2 2 0 00-2-2h-2m-4-3H9M7 16h6M7 8h6v4H7V8z'/%3E%3C/svg%3E");
}

.cc-icon-article {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'/%3E%3C/svg%3E");
}

.cc-icon-email {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z'/%3E%3C/svg%3E");
}

@keyframes float-content {
  0%,
  100% {
    transform: translate(0, 0) rotate(5deg);
  }
  33% {
    transform: translate(50px, -30px) rotate(-5deg);
  }
  66% {
    transform: translate(-30px, 20px) rotate(10deg);
  }
}

/* Hero Content */
.cc-hero-content {
  position: relative;
  z-index: 3;
  text-align: center;
  padding: 0 2rem;
  max-width: 1200px;
  width: 100%;
}

.cc-hero-text-wrapper {
  background: rgba(0, 0, 0, 0.8);
  padding: 4rem;
  border-radius: 30px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}

@media (max-width: 768px) {
  .cc-hero-text-wrapper {
    padding: 2.5rem 1.5rem;
    border-radius: 20px;
  }
}

/* Hero Title */
.cc-hero-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(2.5rem, 6vw, 6rem);
  font-weight: 900;
  margin: 0 0 1.5rem 0;
  line-height: 0.9;
  position: relative;
  background: linear-gradient(
    135deg,
    #00ffff 0%,
    #818cf8 25%,
    #ec4899 50%,
    #10b981 75%,
    #00ffff 100%
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: ccGradientShift 8s ease-in-out infinite,
    ccFloat 3s ease-in-out infinite;
  text-transform: uppercase;
  letter-spacing: 3px;
}

@keyframes ccGradientShift {
  0%,
  100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes ccFloat {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
}

.cc-hero-word {
  display: block;
  margin: 0.1em 0;
}

.cc-hero-divider {
  width: 100px;
  height: 3px;
  background: var(--cc-gradient-primary);
  margin: 1.5rem auto;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}

.cc-hero-divider::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.5),
    transparent
  );
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(200%);
  }
}

.cc-hero-subheading {
  font-size: clamp(1rem, 2vw, 1.25rem);
  color: var(--cc-text-secondary);
  max-width: 800px;
  margin: 0 auto 2rem;
  line-height: 1.6;
}

/* Hero CTA */
.cc-hero-cta {
  margin-top: 2rem;
}

.cc-hero-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 1rem 2.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: var(--cc-dark-bg);
  background: var(--cc-primary-neon);
  border: none;
  border-radius: 50px;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 0 20px rgba(0, 255, 255, 0.3);
}

.cc-hero-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 30px rgba(0, 255, 255, 0.5);
}

.cc-hero-button svg {
  width: 20px;
  height: 20px;
  stroke: var(--cc-dark-bg);
  transition: transform 0.3s ease;
}

.cc-hero-button:hover svg {
  transform: translateY(3px);
}

/* Stats Section */
.cc-stats-section {
  background: var(--cc-darker-bg);
  padding: 5rem 0;
  position: relative;
  width: 100%;
}

.cc-stats-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  text-align: center;
}

.cc-stats-title {
  font-family: 'Exo', sans-serif;
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cc-text-primary);
  margin-bottom: 3rem;
  text-transform: uppercase;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
  background: linear-gradient(135deg, #ffffff, var(--cc-accent-purple));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cc-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.cc-stat-card {
  background: rgba(255, 255, 255, 0.05);
  padding: 2rem;
  border-radius: 15px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cc-stat-card::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(129, 140, 248, 0.1) 0%,
    transparent 70%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cc-stat-card:hover {
  transform: translateY(-5px);
  border-color: var(--cc-accent-purple);
  box-shadow: 0 5px 20px rgba(129, 140, 248, 0.3);
}

.cc-stat-card:hover::before {
  opacity: 1;
}

.cc-stat-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 4rem;
  color: var(--cc-primary-neon);
  margin-bottom: 0.5rem;
  text-shadow: 0 0 20px var(--cc-primary-neon);
  position: relative;
  z-index: 1;
}

.cc-stat-number::after {
  content: '%';
  font-size: 3rem;
  margin-left: 0.2rem;
}

.cc-stat-number[data-count='2.5']::after {
  content: 'x';
}

.cc-stat-label {
  font-size: 0.9rem;
  color: var(--cc-text-secondary);
  line-height: 1.4;
  position: relative;
  z-index: 1;
}

/* Main Content Section */
.cc-main-content {
  background: linear-gradient(180deg, var(--cc-darker-bg), var(--cc-dark-bg));
  padding: 5rem 0;
  width: 100%;
}

.cc-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

/* Section Introduction */
.cc-section-intro {
  text-align: center;
  margin-bottom: 4rem;
}

.cc-intro-content {
  max-width: 800px;
  margin: 0 auto;
}

.cc-intro-text {
  font-size: 1.125rem;
  line-height: 1.8;
  color: var(--cc-text-secondary);
}

/* Content Types Grid */
.cc-content-types {
  margin-top: 4rem;
}

.cc-section-heading {
  font-size: clamp(2rem, 4vw, 2.5rem);
  text-align: center;
  margin-bottom: 3rem;
  background: linear-gradient(
    135deg,
    var(--cc-primary-neon),
    var(--cc-accent-pink)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.cc-content-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

@media (min-width: 768px) {
  .cc-content-row {
    grid-template-columns: repeat(3, 1fr);
  }

  .cc-card-large {
    grid-column: span 2;
  }
}

.cc-content-card {
  background: var(--cc-card-bg);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(30px);
}

.cc-content-card.cc-fade-in {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.8s ease;
}

.cc-card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle,
    rgba(129, 140, 248, 0.2) 0%,
    transparent 50%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.cc-content-card:hover {
  transform: translateY(-5px);
  border-color: var(--cc-accent-purple);
  box-shadow: 0 10px 30px rgba(129, 140, 248, 0.2);
}

.cc-card-content {
  position: relative;
  z-index: 1;
}

.cc-card-icon {
  width: 50px;
  height: 50px;
  margin-bottom: 1.5rem;
  color: var(--cc-primary-neon);
}

.cc-card-icon svg {
  width: 100%;
  height: 100%;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 10px currentColor);
}

.cc-card-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--cc-text-primary);
}

.cc-card-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cc-card-features li {
  padding: 0.5rem 0;
  font-size: 0.9rem;
  color: var(--cc-text-secondary);
  line-height: 1.6;
}

.cc-card-features strong {
  color: var(--cc-accent-purple);
}

/* Insights Section */
.cc-insights-section {
  background: var(--cc-darker-bg);
  padding: 5rem 0;
  width: 100%;
  position: relative;
}

.cc-insights-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cc-insights-header {
  text-align: center;
  margin-bottom: 3rem;
}

.cc-insights-title {
  font-size: clamp(2rem, 4vw, 3rem);
  color: var(--cc-text-primary);
  margin-bottom: 1rem;
  text-transform: uppercase;
  background: linear-gradient(135deg, #ffffff, var(--cc-accent-green));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.cc-insights-subtitle {
  font-size: 1.125rem;
  color: var(--cc-text-secondary);
}

.cc-insights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  margin-bottom: 3rem;
}

@media (min-width: 768px) {
  .cc-insights-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.cc-insight-block {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.cc-insight-block:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--cc-accent-purple);
  transform: translateY(-3px);
}

.cc-insight-block-title {
  font-size: 1.5rem;
  color: var(--cc-text-primary);
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}

.cc-neon-icon {
  display: inline-flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  background: var(--cc-gradient-accent);
  border-radius: 10px;
  position: relative;
}

.cc-neon-icon::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background: inherit;
  border-radius: inherit;
  filter: blur(15px);
  opacity: 0.5;
  z-index: -1;
}

.cc-neon-icon i {
  display: block;
  width: 24px;
  height: 24px;
  background: white;
  mask-size: contain;
  mask-repeat: no-repeat;
  mask-position: center;
}

.cc-icon-video {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M15 10l4.553-2.276A1 1 0 0121 8.618v6.764a1 1 0 01-1.447.894L15 14M5 18h8a2 2 0 002-2V8a2 2 0 00-2-2H5a2 2 0 00-2 2v8a2 2 0 002 2z'/%3E%3C/svg%3E");
}

.cc-icon-trust {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z'/%3E%3C/svg%3E");
}

.cc-icon-social {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M17 20h-10a2 2 0 01-2-2V9a2 2 0 012-2h10a2 2 0 012 2v9a2 2 0 01-2 2zm0 0v-9a2 2 0 012-2h2a2 2 0 012 2v9m-4 0h4'/%3E%3C/svg%3E");
}

.cc-icon-strategy {
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z'/%3E%3C/svg%3E");
}

.cc-insight-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cc-insight-list li {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--cc-text-secondary);
}

.cc-insight-list li:last-child {
  border-bottom: none;
}

.cc-insight-list strong {
  color: var(--cc-text-primary);
  display: inline-block;
  margin-right: 0.5rem;
}

/* Insight Summary */
.cc-insight-summary {
  background: linear-gradient(
    135deg,
    rgba(129, 140, 248, 0.1),
    rgba(16, 185, 129, 0.1)
  );
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 20px;
  padding: 2.5rem;
  margin-top: 3rem;
}

.cc-insight-summary h3 {
  font-size: 1.5rem;
  color: var(--cc-text-primary);
  margin-bottom: 1.5rem;
  text-align: center;
}

.cc-insight-summary ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.cc-insight-summary li {
  padding: 0.75rem 0 0.75rem 2rem;
  position: relative;
  color: var(--cc-text-secondary);
  line-height: 1.6;
}

.cc-insight-summary li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--cc-accent-green);
  font-weight: bold;
  font-size: 1.2rem;
}

/* Process Section */
.cc-process-section {
  background: var(--cc-dark-bg);
  padding: 5rem 0;
  position: relative;
  overflow: hidden;
}

.cc-process-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 2rem;
}

.cc-process-title {
  font-size: clamp(2rem, 4vw, 3rem);
  text-align: center;
  margin-bottom: 4rem;
  background: linear-gradient(
    135deg,
    var(--cc-accent-pink),
    var(--cc-accent-purple)
  );
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-transform: uppercase;
  letter-spacing: 2px;
}

.cc-process-timeline {
  position: relative;
  padding: 2rem 0;
}

.cc-process-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  background: linear-gradient(
    180deg,
    transparent,
    var(--cc-accent-purple),
    var(--cc-accent-pink),
    var(--cc-accent-purple),
    transparent
  );
  transform: translateX(-50%);
}

@media (max-width: 768px) {
  .cc-process-line {
    left: 30px;
  }
}

.cc-process-step {
  position: relative;
  margin-bottom: 4rem;
  display: flex;
  align-items: center;
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.cc-process-step.visible {
  opacity: 1;
  transform: translateY(0);
}

.cc-process-step:nth-child(even) {
  flex-direction: row-reverse;
}

@media (max-width: 768px) {
  .cc-process-step,
  .cc-process-step:nth-child(even) {
    flex-direction: row;
  }
}

.cc-step-number {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 60px;
  background: var(--cc-dark-bg);
  border: 3px solid var(--cc-accent-purple);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: bold;
  color: var(--cc-accent-purple);
  z-index: 2;
  box-shadow: 0 0 20px rgba(129, 140, 248, 0.5);
}

@media (max-width: 768px) {
  .cc-step-number {
    left: 30px;
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
}

.cc-step-content {
  width: calc(50% - 60px);
  padding: 2rem;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  transition: all 0.3s ease;
}

.cc-process-step:nth-child(even) .cc-step-content {
  margin-left: auto;
}

@media (max-width: 768px) {
  .cc-step-content {
    width: calc(100% - 80px);
    margin-left: 80px !important;
  }
}

.cc-step-content:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: var(--cc-accent-purple);
}

.cc-step-content h3 {
  font-size: 1.25rem;
  color: var(--cc-text-primary);
  margin-bottom: 0.5rem;
}

.cc-step-content p {
  font-size: 0.95rem;
  color: var(--cc-text-secondary);
  line-height: 1.6;
}

/* CTA Section */
.cc-cta-section {
  margin-top: 6rem;
  text-align: center;
  padding: 4rem 0;
  position: relative;
}

.cc-cta-content {
  background: linear-gradient(
    135deg,
    rgba(129, 140, 248, 0.1),
    rgba(236, 72, 153, 0.1)
  );
  border: 1px solid rgba(129, 140, 248, 0.3);
  border-radius: 30px;
  padding: 4rem 2rem;
  max-width: 800px;
  margin: 0 auto;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.cc-cta-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(0, 255, 255, 0.1),
    transparent 50%
  );
  animation: rotate 20s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.cc-cta-title {
  font-size: clamp(1.75rem, 4vw, 3rem);
  font-weight: 800;
  margin-bottom: 1rem;
  background: var(--cc-gradient-accent);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
  z-index: 1;
}

.cc-cta-text {
  font-size: 1.125rem;
  color: var(--cc-text-secondary);
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.cc-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 3rem;
  background: var(--cc-gradient-accent);
  color: white;
  text-decoration: none;
  font-weight: 600;
  font-size: 1.1rem;
  border-radius: 50px;
  transition: all 0.3s ease;
  box-shadow: 0 10px 30px rgba(129, 140, 248, 0.3);
  position: relative;
  z-index: 1;
  overflow: hidden;
}

.cc-cta-button::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.2),
    transparent
  );
  transition: left 0.5s ease;
}

.cc-cta-button:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 40px rgba(129, 140, 248, 0.4);
}

.cc-cta-button:hover::before {
  left: 100%;
}

.cc-cta-button svg {
  width: 20px;
  height: 20px;
  transition: transform 0.3s ease;
}

.cc-cta-button:hover svg {
  transform: translateX(5px);
}

/* Fade-in Animation */
.cc-fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.8s ease;
}

.cc-fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Ensure insight blocks are visible by default if animation fails */
.cc-insight-block {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive Design */
@media (max-width: 768px) {
  .cc-hero-title {
    font-size: 2rem;
    letter-spacing: 1px;
  }

  .cc-stats-grid {
    grid-template-columns: 1fr;
  }

  .cc-content-row {
    grid-template-columns: 1fr;
  }

  .cc-card-large {
    grid-column: span 1;
  }

  .cc-insights-grid {
    grid-template-columns: 1fr;
  }

  .cc-cta-content {
    padding: 3rem 1.5rem;
  }

  .cc-cta-button {
    padding: 0.8rem 2rem;
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  .cc-hero-title {
    font-size: 1.75rem;
  }

  .cc-stats-title {
    font-size: 1.5rem;
  }

  .cc-stat-number {
    font-size: 3rem;
  }

  .cc-stat-number::after {
    font-size: 2rem;
  }

  .cc-section-heading {
    font-size: 1.5rem;
  }

  .cc-cta-title {
    font-size: 1.25rem;
  }
}