/* Section Headers - Reusable across all sections */
.section-header {
  text-align: center;
  max-width: 950px;
  margin: 0 auto var(--spacing-4xl);
  padding: 0 var(--spacing-xl);
}

.section-header .section-title {
  margin-bottom: var(--spacing-sm);
}

.section-description {
  font-size: var(--font-size-md-2);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-description);
  color: var(--text-secondary);
  margin: 0 auto var(--spacing-lg);
}

/* Heading hierarchy */

h2,
.h2 {
  font-size: 3rem;
  font-weight: 600;
  margin-bottom: 20px;
}

h3,
.h3 {
  font-size: 36px;
  color: #000;
  margin-bottom: 16px;
}

h4,
.h4 {
  font-size: 24px;
  font-weight: 600;
  color: #000;
  margin-bottom: 12px;
}

h5,
.h5 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
  margin-bottom: 8px;
}

h6,
.h6 {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
  margin-bottom: 8px;
}

.text-sm {
  font-size: 14px;
  line-height: 1.5;
}

.text-lg {
  font-size: 18px;
  line-height: 1.6;
}

.text-xl {
  font-size: 20px;
  line-height: 1.5;
}

/* Color utilities */
.text-primary {
  color: #000 !important;
}

.text-secondary {
  color: #666 !important;
}

.text-muted {
  color: #575757 !important;
}

.text-blue {
  background: #01abff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  position: relative;
}

.text-green {
  color: #10b981 !important;
}

.text-voliet {
  color: #7d00cc !important;
}

.text-yellow {
  color: #fbbc04;
}

.text-bold {
  font-weight: 600;
}

/* Font weight utilities */
.font-light {
  font-weight: 300;
}

.font-normal {
  font-weight: 400;
}

.font-medium {
  font-weight: 500;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

/* Section Badge Variants */
.section-badge.blue .badge-text {
  background: #f0f9ff;
  border-color: rgba(0, 112, 243, 0.2);
}

.section-badge.gray .badge-text {
  background: #fafafa;
  border-color: #eaeaea;
}

.peace-hosting img {
  position: absolute;
  max-width: 150px;
  bottom: 0;
  right: 0;
}

.peace-hosting .quality-stat-description {
  max-width: 50%;
}

/* Modern Card Base - Reusable */
.modern-card {
  padding: var(--spacing-lg);
  transition:
    transform var(--transition-standard),
    box-shadow var(--transition-standard),
    border-color var(--transition-standard);
  position: relative;
  overflow: hidden;
}

.card,
.product-card {
  border-radius: var(--radius-lg);
  padding: var(--spacing-lg);
  transition:
    transform var(--transition-standard),
    box-shadow var(--transition-standard),
    border-color var(--transition-standard);
  position: relative;
  overflow: hidden;
}

.card-sidebar {
  overflow: visible !important;
}

.selection-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--spacing-lg);
}

.selection-card {
  background: var(--bg-primary);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--spacing-md);
  cursor: pointer;
  transition:
    transform var(--transition-fast),
    border-color var(--transition-fast),
    background-color var(--transition-fast),
    color var(--transition-fast),
    box-shadow var(--transition-fast);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.selection-card:hover {
  border-color: var(--color-primary);
  transform: translateY(-1px);
  box-shadow: var(--shadow-subtle);
}

.selection-card.selected {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-medium);
}

.selection-card.selected * {
  color: inherit;
}

label {
  display: block;
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin-bottom: var(--spacing-xs);
}

input:not([type="checkbox"]):not([type="radio"]):hover,
select:hover,
textarea:hover {
  border-color: var(--color-primary);
}

input:not([type="checkbox"]):not([type="radio"]):disabled,
select:disabled,
textarea:disabled {
  background: var(--bg-secondary);
  color: var(--text-tertiary);
  cursor: not-allowed;
}

/* Layout Utilities */
.page-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--spacing-xl);
}

.section-padding {
  padding: var(--spacing-5xl) 0;
}

.section-padding--alt {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border-subtle);
  border-bottom: 1px solid var(--border-subtle);
}

.hero-padding {
  padding: 120px 0 100px;
}

.auto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--spacing-xl);
}

.content-wrapper {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--spacing-xl);
  align-items: flex-start;
}

.sidebar {
  position: static;
  top: unset;
}

/* Special Effects */
.grid-bg {
  position: relative;
  background: var(--bg-primary);
  overflow: hidden;
}

.grid-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--border-subtle) 1px, transparent 1px),
    linear-gradient(to bottom, var(--border-subtle) 1px, transparent 1px);
  background-size: 60px 60px;
  opacity: 0.4;
  animation: gridMove 20s linear infinite;
  z-index: 1;
}

.grid-bg>* {
  position: relative;
  z-index: 2;
}

/* Section Grid Overlay inspired by Vercel */
.grid-overlay,
.section-grid {
  --section-grid-size: 112px;
  --section-grid-line: rgba(17, 24, 39, 0.06);
  --section-grid-line-secondary: rgba(17, 24, 39, 0.03);
  --section-grid-cross-length: 0px;
  --section-grid-cross-thickness: 0px;
  --section-grid-cross-color: rgba(17, 24, 39, 0.1);
  --section-grid-cross-offset: calc(var(--section-grid-size) * 0.5);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.grid-overlay::before,
.section-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--section-grid-cross-color),
      var(--section-grid-cross-color)),
    linear-gradient(var(--section-grid-cross-color),
      var(--section-grid-cross-color)),
    linear-gradient(var(--section-grid-cross-color),
      var(--section-grid-cross-color)),
    linear-gradient(var(--section-grid-cross-color),
      var(--section-grid-cross-color));
  background-size:
    var(--section-grid-cross-thickness) var(--section-grid-cross-length),
    var(--section-grid-cross-length) var(--section-grid-cross-thickness),
    var(--section-grid-cross-thickness) var(--section-grid-cross-length),
    var(--section-grid-cross-length) var(--section-grid-cross-thickness);
  background-position:
    calc(var(--section-grid-cross-offset) - var(--section-grid-cross-thickness) / 2) calc(var(--section-grid-cross-offset) - var(--section-grid-cross-length) / 2),
    calc(var(--section-grid-cross-offset) - var(--section-grid-cross-length) / 2) calc(var(--section-grid-cross-offset) - var(--section-grid-cross-thickness) / 2),
    calc(100% - var(--section-grid-cross-offset) - var(--section-grid-cross-thickness) / 2) calc(100% - var(--section-grid-cross-offset) - var(--section-grid-cross-length) / 2),
    calc(100% - var(--section-grid-cross-offset) - var(--section-grid-cross-length) / 2) calc(100% - var(--section-grid-cross-offset) - var(--section-grid-cross-thickness) / 2);
  background-repeat: no-repeat;
  pointer-events: none;
  z-index: 2;
}

.grid-overlay::after,
.section-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--section-grid-line) 1px, transparent 1px),
    linear-gradient(to bottom,
      var(--section-grid-line-secondary) 1px,
      transparent 1px);
  background-size:
    var(--section-grid-size) var(--section-grid-size),
    var(--section-grid-size) var(--section-grid-size);
  background-position: center;
  background-repeat: repeat;
  pointer-events: none;
  z-index: 1;
  transform: translateZ(0);
}

.grid-overlay>*,
.section-grid>* {
  position: relative;
  z-index: 2;
}

.grid-overlay--xs,
.section-grid--xs {
  --section-grid-size: 64px;
}

.grid-overlay--sm,
.section-grid--sm {
  --section-grid-size: 88px;
}

.grid-overlay--md,
.section-grid--md {
  --section-grid-size: 125px;
}

.grid-overlay--lg,
.section-grid--lg {
  --section-grid-size: 200px;
}

.grid-overlay--xl,
.section-grid--xl {
  --section-grid-size: 280px;
}

.grid-overlay--xxl,
.section-grid--xxl {
  --section-grid-size: 380px;
}

.grid-overlay--tight,
.section-grid--tight {
  --section-grid-line: rgba(17, 24, 39, 0.05);
  --section-grid-line-secondary: rgba(17, 24, 39, 0.02);
}

.grid-overlay--extra-light,
.section-grid--extra-light {
  --section-grid-line: rgba(17, 24, 39, 0.04);
  --section-grid-line-secondary: rgba(17, 24, 39, 0.015);
}

.grid-overlay--extra-white,
.section-grid--extra-white {
  --section-grid-line: rgb(250 250 250 / 29%);
  --section-grid-line-secondary: rgb(250 250 250 / 34%);
}

.grid-overlay--subtle,
.section-grid--subtle {
  --section-grid-line: rgba(17, 24, 39, 0.025);
  --section-grid-line-secondary: rgba(17, 24, 39, 0.012);
}

.grid-overlay--cross,
.section-grid--cross {
  --section-grid-cross-length: 32px;
  --section-grid-cross-thickness: 1px;
}

.grid-overlay--cross-light,
.section-grid--cross-light {
  --section-grid-cross-color: rgba(17, 24, 39, 0.08);
}

.grid-overlay--cross-strong,
.section-grid--cross-strong {
  --section-grid-cross-color: rgba(17, 24, 39, 0.14);
}

.text-gradient-blue {
  background: #006bff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.mesh-bg {
  position: relative;
  background-image:
    radial-gradient(circle at -10% -10%,
      rgba(0, 112, 243, 0.1),
      transparent 55%),
    radial-gradient(circle at 110% -20%,
      rgba(121, 40, 202, 0.1),
      transparent 60%),
    repeating-linear-gradient(to right,
      rgba(17, 17, 17, 0.04) 0,
      transparent 1px,
      transparent 160px),
    repeating-linear-gradient(to bottom,
      rgba(17, 17, 17, 0.04) 0,
      transparent 1px,
      transparent 160px);
  opacity: 0.5;
}

.mesh-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background: inherit;
  opacity: 0.6;
  filter: blur(40px);
  z-index: 1;
}

.mesh-bg>* {
  position: relative;
  z-index: 2;
}

@keyframes gridMove {
  0% {
    transform: translate(0, 0);
  }

  100% {
    transform: translate(60px, 60px);
  }
}

/* Responsive Adjustments */
@media (max-width: 1200px) {
  .page-container {
    padding: 0 var(--spacing-lg);
  }
}

@media (max-width: 1024px) {
  .content-wrapper {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  .hero-padding {
    padding: 100px 0 80px;
  }
}

@media (max-width: 768px) {
  .peace-hosting img {
    max-width: 125px;
  }

  .page-container {
    padding: 0 var(--spacing-md);
  }

  .section-padding {
    padding: var(--spacing-4xl) 0;
  }

  .auto-grid {
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-lg);
  }

  .hero-padding {
    padding: 80px 0 60px;
  }
}

@media (max-width: 640px) {
  .section-header {
    margin: 0 auto var(--spacing-3xl);
    padding: 0;
  }

  .page-container {
    padding: 0 var(--spacing-sm);
  }

  .auto-grid {
    grid-template-columns: 1fr;
  }
}

.premium-explanation .feature-highlights {
  display: flex;
  flex-direction: row;
}

/* Stats Container - Reusable */
.stats-container-base {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 25px;
  max-width: 1000px;
  margin: 0 auto;
  padding: 10px 25px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 20px;
}

.stats-container-base.transparent {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.customer-stats-container .stat-item-base {
  text-align: center;
  padding: 16px;
  transition: all 0.3s ease;
  padding-bottom: 10px;
  transform: translateY(-4px);
}

.stat-number-base {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
  line-height: 1;
}

.stat-number-base.gradient {
  background: linear-gradient(135deg, #333 0%, #333 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.stat-label-base {
  font-size: 0.9rem;
  color: #666;
  font-weight: 600;
}

.stat-label-base.uppercase {
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Icon Base - Reusable */
.icon-base,
.feature-icon {
  width: 55px;
  height: 55px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0px auto 15px auto;
  transition: all 0.3s ease;
}

.trusted-card .icon-base {
  background: #ff828245;
  color: #fe2826;
}

.experts-card .icon-base {
  background: #9cb3fb63;
  color: #4371ff;
  opacity: 0.75;
}

.innovation-card .icon-base {
  background: #bd9ff969;
  color: #7a38ff;
}

.litespeed-card .icon-base {
  background: #f5d68d8f;
  color: #eca90c;
}

.independent-card .icon-base {
  background: #b9ffeb7a;
  color: #14d4b9;
}

.happiness-card .icon-base {
  background: #f6a1e6ab;
  color: #f749d6;
}

.icon-base.small {
  width: 56px;
  height: 56px;
  font-size: 1.5rem;
}

.icon-base.large {
  width: 80px;
  height: 80px;
  font-size: 2rem;
}

/* Section Background Base */
.section-bg-base,
.modern-features-included-section {
  position: relative;
  overflow: hidden;
  padding: 95px 0;
}

/* Bento Grid Layout for Modern Features Section */
/* Masonry Layout using CSS Columns for natural flow */
.bento-grid-container {
  column-count: 2;
  column-gap: 16px;
  margin-top: 40px;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

.bento-grid-item {
  position: relative;
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 16px;
  vertical-align: top;
}

/* Column layout handles positioning automatically - items flow naturally based on content height */

.bento-grid-item .enhanced-feature-card {
  height: auto;
  min-height: 0;
  margin-bottom: 0;
  padding: 32px;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.bento-grid-item .feature-flow-container {
  margin-bottom: 20px;
}

.bento-grid-item .feature-header {
  margin-bottom: 0;
}

.bento-grid-item .feature-title {
  font-size: 1.25rem;
  margin-bottom: 12px;
}

.bento-grid-item .feature-description {
  font-size: 0.95rem;
  line-height: 1.6;
  flex-grow: 1;
}

.bento-grid-item .security-layers {
  gap: 12px;
}

.bento-grid-item .security-box {
  padding: 10px;
}

.bento-grid-item .layer-icon {
  width: 32px;
  height: 32px;
  font-size: 14px;
}

.bento-grid-item .layer-label {
  font-size: 11px;
}

.bento-grid-item .network-globe-container {
  height: 100px;
}

.bento-grid-item .network-globe-container svg {
  height: 100px;
}

/* Responsive Design for Bento Grid - Masonry Layout */
@media (max-width: 992px) {
  .bento-grid-container {
    column-count: 2;
  }
}

@media (max-width: 768px) {
  .bento-grid-container {
    column-count: 1;
    column-gap: 0;
  }

  .bento-grid-item {
    margin-bottom: 16px;
  }

  .bento-grid-item .enhanced-feature-card {
    padding: 24px;
  }
}

.section-bg-base.gray {
  background: #fafafa;
  border-top: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}

.section-bg-base.dark {
  background: #1b1b1b;
}

.section-bg-base.dark-home {
  background: #212121;
}

.section-bg-base.sky-blue {
  background: #0473d1;
}

/* Differentiators Extension Classes */
.differentiator-card {
  display: flex;
  flex-direction: column;
  border: 1px solid #c3c2c2;
  border-radius: 12px;
  background: #fff;
}

.differentiator-title {
  font-size: 1.15rem;
  font-weight: 600;
  margin-top: 25px;
  margin-bottom: 10px;
  line-height: 1.3;
  color: #4c4c4c;
}

.differentiator-description {
  font-size: 0.95rem;
  color: #666;
}

.differentiators-stats .stat-number-base {
  font-size: 1.75rem;
}

/* Cloud Infrastructure Visual Styles */
.cloud-infrastructure-visual {
  text-align: center;
  position: relative;
  padding: 20px;
}

.cloud-infrastructure-visual .section-title {
  margin-bottom: 40px;
  text-align: left;
}

.datacenter-network {
  position: relative;
  margin: 30px 0;
  height: 300px;
  /* Set a fixed height for the container */
}

.datacenter-node.primary {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.datacenter-node.secondary {
  position: absolute;
  top: 80px;
  z-index: 2;
}

.datacenter-node.secondary:nth-child(2) {
  left: 20%;
}

.datacenter-node.secondary:nth-child(3) {
  right: 20%;
}

.datacenter-node {
  text-align: center;
}

.datacenter-node .icon-base {
  position: relative;
  margin: 0 auto 12px auto;
}

.datacenter-node.primary .icon-base {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.datacenter-node.secondary:nth-child(2) .icon-base {
  background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  color: white;
}

.datacenter-node.secondary:nth-child(3) .icon-base {
  background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  color: white;
}

.pulse-ring {
  position: absolute;
  top: -5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 2px solid #667eea;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

.datacenter-node p {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.datacenter-node.secondary p {
  font-weight: 500;
  font-size: 0.8rem;
}

.security-layer {
  position: absolute;
  top: 140px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
}

.security-layer-content {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
}

.security-layer .security-node {
  text-align: center;
}

.security-layer .security-node .icon-base {
  background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  color: white;
  width: 40px;
  height: 40px;
  margin: 0 auto 8px auto;
}

.security-layer .security-node:last-child .icon-base {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  color: #333;
}

.security-layer p {
  margin: 0;
  font-weight: 500;
  font-size: 0.8rem;
}

.healing-network {
  position: absolute;
  top: 220px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  text-align: center;
}

.healing-network .icon-base {
  background: linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%);
  color: #333;
  position: relative;
  margin: 0 auto 12px auto;
}

.healing-indicator {
  position: absolute;
  top: -3px;
  right: -3px;
  width: 12px;
  height: 12px;
  background: #10b981;
  border-radius: 50%;
  animation: blink 1.5s infinite;
}

.healing-network p {
  margin: 0;
  font-weight: 600;
  font-size: 0.9rem;
}

.network-svg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 280px;
  z-index: 1;
  pointer-events: none;
}

.global-reach {
  position: absolute;
  bottom: -20px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

.global-reach-flags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 15px;
  margin-bottom: 10px;
}

.cloud-features .section-title {
  margin-bottom: 30px;
  font-size: 1.5rem;
  font-weight: 600;
}

.platform-stats-grid {
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.platform-stats-grid>div {
  font-weight: 700;
  font-size: 1.2rem;
  color: #0070f3;
  padding: 0 20px;
}

.modern-card.padded {
  padding: 40px;
}

/* Global Datacenters Section */
.global-datacenters {
  margin-top: 60px;
  text-align: center;
}

.global-datacenters-row {
  margin-top: 30px;
}

.datacenter-flag {
  font-size: 2.5rem;
  margin-bottom: 10px;
}

.datacenter-name {
  margin-bottom: 5px;
  font-weight: 600;
}

/* CSS Animations for cloud infrastructure */
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.7;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes blink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0.3;
  }
}

.trust-item {
  display: inline;
  align-items: center;
  font-size: 0.875rem;
  color: #666;
  font-weight: 500;
}

/* Floating Particles */
.refund-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #10b981;
  border-radius: 50%;
  opacity: 0.6;
  animation: particleFloat 4s ease-in-out infinite;
}

.particle-1 {
  top: 20%;
  left: 80%;
  animation-delay: 0s;
}

.particle-2 {
  top: 70%;
  left: 20%;
  animation-delay: 1s;
}

.particle-3 {
  top: 40%;
  right: 15%;
  animation-delay: 2s;
}

.particle-4 {
  bottom: 30%;
  left: 60%;
  animation-delay: 3s;
}

.particle-5 {
  top: 60%;
  right: 40%;
  animation-delay: 1.5s;
}

/* Animations */
@keyframes refundFloat {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-20px) rotate(120deg);
  }

  66% {
    transform: translateY(-10px) rotate(240deg);
  }
}

@keyframes nodeGlow {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.6;
    transform: scale(1.1);
  }
}

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

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

@keyframes packetFlow {
  0% {
    left: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes progressFill {
  0% {
    width: 0%;
  }

  50% {
    width: 100%;
  }

  100% {
    width: 0%;
  }
}

@keyframes particleFloat {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }

  50% {
    transform: translateY(-10px) rotate(180deg);
    opacity: 0.8;
  }
}

@keyframes statusPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .refund-animation-container {
    min-height: 300px;
  }

  .shield-icon {
    width: 80px;
    height: 80px;
    font-size: 32px;
  }

  .progress-svg {
    width: 150px;
    height: 150px;
  }

  .progress-number {
    font-size: 28px;
  }

  .float-item {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .refund-steps {
    flex-direction: column;
    gap: 16px;
    bottom: -120px;
  }

  .step-item {
    padding: 12px 16px;
  }
}

/* ==============================================
END REUSABLE BASE CLASSES
============================================== */
/* Vercel-inspired Light Hero Section Styles */
.hero-section {
  display: flex;
  position: relative;
  overflow: hidden;
  margin-top: 70px;
}

.hero-section .container {
  position: relative;
  z-index: 2;
}

.hero-content {
  padding: clamp(5px, 12vw, 60px) 0 clamp(60px, 10vw, 50px);
  color: var(--text-primary);
  max-width: 900px;
  margin: 0 auto;
  margin-top: 60px;
}

.hero-badge {
  margin-bottom: var(--spacing-lg);
  animation: fadeInUp 0.8s ease-out;
}

.badge-text {
  background: var(--color-primary);
  color: var(--text-inverse);
  padding: var(--spacing-2xs) var(--spacing-md);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-2xs);
  text-transform: uppercase;
  border: 1px solid var(--color-primary);
  margin-bottom: 1rem;
}

/* Hero section for Dark theme */

.dark .hero-section {
  background: #1b1b1b;
}

.dark-blue .hero-section {
  background: #022155;
}

.dark .hero-title,
.dark-blue .hero-title,
.dark .hero-title h1,
.dark .hero-features .feature-item,
.dark .hero-features .feature-item span {
  color: #fff;
}

.dark .hero-subtitle,
.dark-blue .hero-subtitle {
  color: #e4e4e4;
  font-weight: 400;
}

.wordpress-platform-section .badge-text {
  background: var(--bg-primary);
  color: var(--text-primary);
}

.hero-title {
  font-size: clamp(2.625rem, 6vw, 3.2rem);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading-hero);
  animation: fadeInUp 0.8s ease-out 0.2s both;
  max-width: 780px;
  margin: 0 auto;
  line-height: 1.15;
}

.hero-title h1 {
  display: inline-block;
  margin-bottom: 0;
  font-size: clamp(2.625rem, 6vw, 3.2rem);
}

.text-white {
  color: var(--text-inverse) !important;
}

.text-black {
  color: var(--gray-900);
}

.hero-subtitle {
  font-size: var(--font-size-lg);
  line-height: var(--line-height-description);
  color: #3b3b3b;
  max-width: 720px;
  animation: fadeIn 0.8s ease 0.4s backwards;
  margin-top: 2rem;
}

.hero-features {
  margin-bottom: var(--spacing-2xl);
  animation: fadeInUp 0.8s ease-out 0.6s both;
  margin-top: 2rem;
}

.feature-item {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  backdrop-filter: blur(10px);
  padding: 2px 0px 8px;
  font-size: 1rem;
  font-weight: var(--font-weight-medium);
  color: #737373;
  margin: auto;
}

.hero-features .feature-grid {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
}

.hero-features .feature-item {
  font-size: 1.15rem;
  color: #1b1b1b;
  position: relative;
  margin: unset;
  text-align: center;
  justify-content: left;
}

.hero-features .feature-item span {
  font-size: 1.05rem;
  font-weight: 500;
  color: #1b1b1b;
}

.email-features .feature-item {
  padding: 16px 20px;
  margin: 0;
  border-radius: 8px;
  border: 1px solid #fef3d1;
}

.email-features .feature-description {
  margin: 0;
  padding-top: 8px;
}

.hero-actions {
  display: flex;
  gap: 0.75rem;
  flex-flow: inherit;
  margin-bottom: 1.25rem;
  margin-top: 2rem;
  animation: fadeInUp 0.8s ease-out 0.8s both;
}

.hero-section .row {
  align-items: stretch;
  display: flex;
}

.hero-section .col-md-6:last-child {
  display: flex;
  align-items: center;
  align-self: stretch;
}

.hero-image {
  display: flex;
  width: 100%;
  align-self: stretch;
  margin-top: 3rem;
}

.hero-image img {
  width: 85%;
  height: auto;
  object-fit: contain;
}

.hero-btn-primary,
.btn-primary,
.btn-base {
  background: #1b1b1b;
  border: 1px solid #1b1b1b;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  transition: all 0.15s ease;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  min-height: 40px;
}

.hero-btn-primary:hover,
.btn-primary:hover,
.btn-base:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: var(--text-inverse);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-subtle);
}

.hero-btn-primary:disabled,
.btn-primary:disabled,
.btn-base:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.hero-btn-secondary,
.btn-secondary {
  background: #fff;
  border: 1px solid #575757;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 1rem;
  line-height: 1.4;
  transition: all 0.15s ease;
  color: #18181b;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  position: relative;
  min-height: 40px;
}

.hero-btn-secondary:hover,
.btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--color-primary);
  color: var(--text-primary);
  text-decoration: none;
  transform: translateY(-1px);
  box-shadow: var(--shadow-subtle);
}

.hero-btn-secondary:disabled,
.btn-secondary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.primary-header .hero-actions .btn-primary,
.primary-header .hero-actions .hero-btn-primary {
  background: #01abff;
  border: 1px solid #01abff;
}

.pricing-card .hero-btn-primary {
  padding: 10px 20px;
  font-size: 0.95rem;
  background: #002970;
  border: 1px solid #002970;
}

.btn-cta {
  height: 40px;
  padding: 0 var(--spacing-xl);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary);
  background: var(--color-primary);
  color: var(--text-inverse);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  letter-spacing: var(--letter-spacing-heading-tight);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  text-decoration: none;
  transition:
    background-color var(--transition-fast),
    border-color var(--transition-fast),
    transform var(--transition-fast),
    box-shadow var(--transition-fast);
}

.btn-cta:hover {
  background: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

.btn-cta:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.hero-trust {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  animation: fadeInUp 0.8s ease-out 1s both;
}

.trust-logos {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.trust-stat {
  text-align: center;
  color: #333;
  font-size: 0.95rem;
}

.trust-stat strong {
  display: block;
  font-size: 1.75rem;
  font-weight: 700;
  margin-bottom: 2px;
}

/* Enhanced Hero Stars Background */
.hero-stars-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.star-field {
  position: relative;
  width: 100%;
  height: 100%;
}

.star {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #fff;
  border-radius: 50%;
  opacity: 0;
  animation: starTwinkle 3s infinite;
}

.star::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.8) 0%,
      transparent 70%);
  border-radius: 50%;
  animation: starGlow 2s infinite alternate;
}

/* Individual star positions and delays */
.star-1 {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.star-2 {
  top: 25%;
  left: 85%;
  animation-delay: 0.5s;
}

.star-3 {
  top: 40%;
  left: 20%;
  animation-delay: 1s;
}

.star-4 {
  top: 60%;
  left: 75%;
  animation-delay: 1.5s;
}

.star-5 {
  top: 80%;
  left: 30%;
  animation-delay: 2s;
}

.star-6 {
  top: 20%;
  left: 60%;
  animation-delay: 2.5s;
}

.star-7 {
  top: 70%;
  left: 15%;
  animation-delay: 0.8s;
}

.star-8 {
  top: 35%;
  left: 90%;
  animation-delay: 1.3s;
}

.star-9 {
  top: 55%;
  left: 45%;
  animation-delay: 1.8s;
}

.star-10 {
  top: 10%;
  left: 40%;
  animation-delay: 2.3s;
}

@keyframes starTwinkle {

  0%,
  100% {
    opacity: 0;
    transform: scale(0.8);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes starGlow {
  0% {
    opacity: 0.3;
    transform: scale(0.8);
  }

  100% {
    opacity: 0.8;
    transform: scale(1.2);
  }
}

/* Badge Star Rating with Filling Effect */
.badge-star-rating {
  display: inline-flex;
  gap: 2px;
  margin-right: 8px;
  vertical-align: middle;
}

.star-fill {
  color: #fbbf24;
  font-size: 0.875rem;
  position: relative;
  opacity: 0;
  animation: starFillIn 0.3s ease forwards;
}

.star-fill[data-rating="1"] {
  animation-delay: 0.1s;
}

.star-fill[data-rating="2"] {
  animation-delay: 0.2s;
}

.star-fill[data-rating="3"] {
  animation-delay: 0.3s;
}

.star-fill[data-rating="4"] {
  animation-delay: 0.4s;
}

.star-fill[data-rating="5"] {
  animation-delay: 0.5s;
}

@keyframes starFillIn {
  0% {
    opacity: 0;
    transform: scale(0) rotate(0deg);
  }

  50% {
    opacity: 1;
    transform: scale(1.3) rotate(180deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(360deg);
  }
}

/* Title Decoration Stars */
.title-decoration {
  position: relative;
  margin-top: 16px;
}

.celebration-stars {
  display: flex;
  justify-content: center;
  gap: 12px;
}

.celebration-star {
  color: #fbbf24;
  font-size: 1.5rem;
  animation: celebrationBounce 2s infinite;
}

.celebration-star:nth-child(1) {
  animation-delay: 0s;
}

.celebration-star:nth-child(2) {
  animation-delay: 0.3s;
}

.celebration-star:nth-child(3) {
  animation-delay: 0.6s;
}

@keyframes celebrationBounce {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  25% {
    transform: translateY(-8px) rotate(10deg);
  }

  50% {
    transform: translateY(0) rotate(0deg);
  }

  75% {
    transform: translateY(-4px) rotate(-5deg);
  }
}

/* Enhanced Stats with Icons */
.stat-icon {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1rem;
  color: #fff;
  animation: iconPulse 2s infinite;
}

@keyframes iconPulse {

  0%,
  100% {
    transform: translateX(-50%) scale(1);
  }

  50% {
    transform: translateX(-50%) scale(1.1);
  }
}

@keyframes ratingStarShine {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
    text-shadow: 0 0 8px rgba(251, 191, 36, 0.6);
  }
}

/* Joy Elements */
.joy-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 2;
}

.floating-emoji {
  position: absolute;
  font-size: 2rem;
  opacity: 0;
  animation: floatJoy 4s infinite;
}

.floating-emoji:nth-child(1) {
  bottom: 30%;
  left: 25%;
  animation-delay: 2s;
}

.floating-emoji:nth-child(2) {
  bottom: 20%;
  right: 15%;
  animation-delay: 3s;
}

@keyframes floatJoy {

  0%,
  100% {
    opacity: 0;
    transform: translateY(20px) scale(0.8) rotate(0deg);
  }

  25% {
    opacity: 0.7;
    transform: translateY(-10px) scale(1.1) rotate(5deg);
  }

  50% {
    opacity: 1;
    transform: translateY(-20px) scale(1.2) rotate(-5deg);
  }

  75% {
    opacity: 0.7;
    transform: translateY(-10px) scale(1.1) rotate(3deg);
  }
}

.hero-visual {
  margin-top: 3.5rem;
  animation: fadeInUp 0.8s ease-out 1.2s both;
}

/* Animated UI Flow */
.animated-ui-container {
  position: relative;
  text-align: center;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  max-width: 800px;
  margin: 0 auto;
}

.animated-ui-container:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.ui-flow-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 2rem;
}

.ui-step {
  position: relative;
  z-index: 2;
}

.step-circle {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--gradient-black);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 1rem;
  animation: pulse 2s infinite;
  box-shadow: 0 4px 15px rgba(0, 112, 243, 0.3);
}

.step-circle.active {
  animation: pulse 1.5s infinite;
}

.step-circle.completed {
  background: var(--bg-inverse);
  animation: none;
}

.step-desc {
  font-size: 0.9rem;
  color: #6f6f6f;
  max-width: 120px;
  font-weight: 500;
}

.code-preview {
  background: #000;
  border-radius: 12px;
  padding: 1.5rem;
  margin-top: 2rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  font-family: "Courier New", monospace;
  position: relative;
  overflow: hidden;
  text-align: left;
}

.code-line {
  display: block;
  margin: 0.5rem 0;
  opacity: 0;
  animation: typeWriter 0.5s forwards;
  color: #fff;
}

.code-line:nth-child(1) {
  animation-delay: 0.5s;
}

.code-line:nth-child(2) {
  animation-delay: 1s;
}

.code-line:nth-child(3) {
  animation-delay: 1.5s;
}

.code-line:nth-child(4) {
  animation-delay: 2s;
}

.code-line .syntax-comment {
  color: #737373;
}

.deployment-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
  padding: 0.25rem 0.75rem;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  animation: fadeIn 2.5s forwards;
  opacity: 0;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes progressFlow {
  0% {
    width: 0%;
  }

  50% {
    width: 100%;
  }

  100% {
    width: 0%;
  }
}

@keyframes typeWriter {
  from {
    opacity: 0;
    transform: translateX(-10px);
  }

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hero-section .row {
    display: block;
  }

  .hero-title {
    font-size: 2.5rem;
  }

  .hero-subtitle {
    font-size: 1.1rem;
  }

  .hero-features .feature-grid {
    grid-template-columns: auto;
    gap: 10px;
    justify-content: left;
    margin: 2rem auto;
  }

  .hero-features .feature-item {
    justify-content: left;
  }

  .feature-grid {
    flex-direction: column;
    align-items: center;
  }

  .feature-item {
    width: 100%;
    max-width: 100%;
    justify-content: left;
  }

  .hero-actions {
    flex-direction: column;
    align-items: center;
  }

  .hero-btn-primary,
  .hero-btn-secondary {
    width: 100%;
    max-width: 280px;
    justify-content: center;
    margin: 10px;
  }

  .trust-logos {
    flex-direction: row;
    gap: 1.5rem;
  }

  .ui-flow-steps {
    flex-direction: column;
    gap: 2rem;
  }

  .ui-flow-steps.hosting {
    flex-direction: row;
    gap: 1rem;
    align-items: self-start;
  }

  .connection-line {
    display: none;
  }

  .step-desc {
    max-width: 200px;
  }
}

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

  .hero-content {
    padding: 15px 0;
    padding-top: 80px;
    overflow: hidden;
  }

  .hero-badge {
    margin-bottom: 1.5rem;
  }

  .hero-image {
    margin-top: 0;
    margin-bottom: 2rem;
  }

  .badge-text {
    padding: 10px 20px;
    font-size: 13px;
  }

  .animated-ui-container {
    padding: 2rem 1rem;
  }

  .code-preview {
    padding: 1rem;
  }

  .hero-section .container {
    max-width: 100%;
  }
}

/* Quality Section Styles */
.quality-section {
  padding: 95px 0;
  position: relative;
  background: #0070f300;
}

.quality-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: minmax(220px, auto);
  position: relative;
  z-index: 2;
  border-radius: 8px;
}

.quality-tile {
  padding: 1.75rem 2rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: clamp(12px, 1.5vw, 15px);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  border-radius: 12px;
}

.quality-tile--hero {
  grid-row: span 2;
  background: rgba(255, 255, 255, 0.92);
  padding: clamp(32px, 4vw, 35px);
  gap: clamp(16px, 2vw, 16px);
  border-right: 1px solid rgba(17, 24, 39, 0.08);
}

.quality-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 600;
  color: rgba(15, 23, 42, 0.55);
  background: rgba(15, 23, 42, 0.05);
  padding: 10px 18px;
  border-radius: 999px;
  width: fit-content;
}

.quality-title {
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.25;
  color: #0f172a;
}

.quality-description {
  font-size: 1.05rem;
  color: rgba(15, 23, 42, 0.7);
  line-height: 1.5;
  max-width: 36ch;
}

.quality-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 8px;
}

.quality-points li {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 1.05rem;
  color: rgba(15, 23, 42, 0.65);
}

.quality-points li::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
  flex-shrink: 0;
  margin-top: 6px;
}

.quality-actions {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 16px;
}

.quality-meta {
  font-size: 1rem;
  color: rgba(15, 23, 42, 0.45);
}

.quality-stat-title {
  font-size: 1.35rem;
  color: #0f172a;
  margin-bottom: 0;
}

.quality-stat-description {
  font-size: 1.05rem;
  color: rgba(15, 23, 42, 0.65);
  line-height: 1.35;
}

.quality-tile--neutral {
  background: rgba(248, 250, 252, 0.9);
  border-color: rgba(15, 23, 42, 0.06);
}

.quality-tile--neutral .quality-stat-title {
  color: #111827;
}

@media (max-width: 1200px) {
  .quality-layout {
    grid-template-columns: minmax(0, 1.1fr) repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 992px) {
  .quality-layout {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-rows: auto;
  }

  .quality-tile--hero {
    grid-row: auto;
  }
}

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

  .happiness.quality-grid-item {
    margin-top: 190px;
  }

  .quality-tile {
    padding: 24px;
  }

  .quality-title {
    font-size: 2.2rem;
  }

  .quality-actions {
    flex-wrap: wrap;
  }
}

/* Quality Grid Layout - Large left card, two small right cards */
.quality-grid-layout {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: var(--spacing-lg, 24px);
  align-items: start;
}

.quality-grid-item {
  position: relative;
}

.quality-grid-item .light-green-block,
.quality-grid-item .quality-tile {
  height: auto;
  display: flex;
  flex-direction: column;
}

.quality-grid-item--large {
  grid-row: auto;
}

.quality-grid-item--small:first-of-type {
  grid-row: auto;
}

.quality-grid-item--small:last-of-type {
  grid-row: auto;
}

@media (max-width: 992px) {
  .quality-grid-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    min-height: auto;
    height: auto;
  }

  .quality-grid-left,
  .quality-grid-right {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }

  .quality-grid-left > div,
  .quality-grid-right > div {
    margin-bottom: 0 !important;
  }
}

@media (max-width: 992px) {
  .quality-grid-item--large {
    grid-row: auto;
  }

  .quality-grid-item--small:first-of-type {
    grid-row: auto;
  }

  .quality-grid-item--small:last-of-type {
    grid-row: auto;
  }
}

.quality-header {
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}

.quality-badge {
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s ease-out;
}

/* Quality title now uses .section-title base class */
.quality-subtitle {
  font-size: 1.15rem;
  color: #737373;
  line-height: 1.5;
  max-width: 680px;
  margin: 0 auto;
  animation: fadeInUp 0.8s ease-out 0.4s both;
}

.quality-features {
  margin-bottom: 50px;
  position: relative;
  z-index: 2;
}

.quality-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 1.75rem 1.5rem;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(0, 0, 0, 0.06);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  animation: fadeInUp 0.8s ease-out 0.6s both;
}

.quality-card.featured {
  border: 1px solid #333;
  transform: scale(1.01);
}

.quality-card.featured:hover {
  transform: scale(1.01) translateY(-4px);
  box-shadow: 0 15px 30px rgba(0, 112, 243, 0.15);
}

.card-badge {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: #fae49e;
  color: white;
  padding: 0.2rem 0.6rem;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.card-icon {
  width: 40px;
  height: 40px;
  background: #424242;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.card-icon i {
  font-size: 20px;
  color: white;
}

.quality-card:hover .card-icon {
  transform: scale(1.05) rotate(3deg);
}

.card-title,
.feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #171717;
  margin-bottom: 0.75rem;
  line-height: 1.3;
  margin-top: 1rem;
}

.card-description,
.feature-description {
  color: #737373;
  line-height: 1.35;
  font-size: 1rem;
}

.card-stats {
  display: flex;
  gap: 1rem;
  margin-top: auto;
}

.quality-metrics {
  position: relative;
  z-index: 2;
}

.metrics-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.metric-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #171717;
  margin-bottom: 0.25rem;
  background: #4c4c4c;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-top: 10px;
}

.metric-label {
  font-size: 0.8rem;
  color: #737373;
  font-weight: 500;
}

/* Responsive Design for Quality Section */
@media (max-width: 768px) {
  .quality-section {
    padding: 60px 0;
  }

  .quality-title {
    font-size: 2rem;
  }

  .quality-subtitle {
    font-size: 1rem;
  }

  .quality-header {
    margin-bottom: 40px;
  }

  .quality-features {
    margin-bottom: 40px;
  }

  .quality-card {
    padding: 1.5rem 1.25rem;
  }

  .card-stats {
    flex-direction: row;
    gap: 0.75rem;
  }

  .metrics-container {
    flex-direction: row;
    gap: 1.5rem;
    padding: 0.5rem;
  }

  .metric-number {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .quality-title {
    font-size: 1.6rem;
  }

  .quality-card {
    padding: 1.25rem 1rem;
  }

  .card-icon {
    width: 40px;
    height: 40px;
  }

  .card-icon i {
    font-size: 18px;
  }

  .card-title {
    font-size: 1.1rem;
  }

  .metric-number {
    font-size: 1.5rem;
  }
}

/* ==================== */
/* Modern Pricing Section */
/* ==================== */
.modern-pricing-section,
.bg-grey {
  padding: 95px 0;
  position: relative;
}

.bg-grey {
  background: #fafafa;
}

.pricing-header {
  margin-bottom: clamp(48px, 6vw, 64px);
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.hosting-tier-grid {
  display: flex;
  position: relative;
  z-index: 2;
  margin: 0 auto;
  gap: 15px;
  max-width: 1260px;
  padding-top: 2rem;
  justify-content: center;
}

.hosting-tier-card .plan-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 10px;
}

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

.savings-pill {
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(34, 197, 94, 0.16);
  color: #15803d;
  padding: 4px 12px;
  border-radius: 999px;
}

.savings-pill--amber {
  background: rgba(251, 191, 36, 0.2);
  color: #92400e;
}

.savings-pill--teal {
  background: rgba(13, 148, 136, 0.2);
  color: #047857;
}

.plan-original {
  font-size: 0.95rem;
  color: #9ca3af;
  text-decoration: line-through;
}

.plan-billing-note {
  font-size: 0.95rem;
  color: #6b7280;
  line-height: 1.5;
  margin-bottom: 0;
}

.plan-feature-list {
  margin-top: 12px;
  margin-bottom: 24px;
}

.plan-feature-list li {
  font-size: 0.95rem;
  color: #1f2937;
}

.plan-price-prefix {
  display: block;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6b7280;
}

.plan-cta-note {
  display: block;
  font-size: 0.85rem;
  color: #6b7280;
  text-align: center;
}

.pricing-tier-card.plan-popular {
  border: 1px solid #e5e7eb;
}

.plan-popular-banner {
  position: absolute;
  top: -35px;
  left: 0;
  right: 0;
  background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
  color: #ffffff;
  text-align: center;
  padding: 10px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-radius: 12px 12px 0 0;
  height: 65px;
  z-index: -1;
}

.plan-popular .plan-meta {
  margin-top: 0;
}

.plan-discount-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  background: #16a34a;
  color: #ffffff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 700;
  z-index: 11;
  white-space: nowrap;
}

.plan-meta {
  margin-bottom: 20px;
}

.plan-original-price {
  font-size: 0.95rem;
  color: #9ca3af;
  text-decoration: line-through;
  display: block;
  margin-bottom: 8px;
}

.plan-price-main {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
  flex-wrap: wrap;
}

.plan-bonus {
  display: block;
  font-size: 0.9rem;
  color: #059669;
  font-weight: 600;
  margin-top: 4px;
}

.plan-bonus--tooltip {
  position: relative;
  cursor: help;
  display: inline-block;
}

.plan-bonus-icon {
  margin-left: 6px;
  font-size: 0.85rem;
  color: #059669;
  opacity: 0.7;
  vertical-align: middle;
  transition: opacity 0.2s ease;
}

.plan-bonus--tooltip:hover .plan-bonus-icon {
  opacity: 1;
}

.plan-bonus--tooltip .tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1b1b1b;
  color: #ffffff;
  text-align: left;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  width: 280px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
}

.plan-bonus--tooltip .tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1b1b1b;
}

.plan-bonus--tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  .plan-bonus--tooltip .tooltip-content {
    width: 240px;
    font-size: 0.8rem;
    padding: 10px 14px;
    left: 0;
    transform: translateX(0);
  }

  .plan-bonus--tooltip .tooltip-content::after {
    left: 20px;
    transform: translateX(0);
  }
}

.plan-actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 20px 0;
}

.plan-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1px solid;
  width: 100%;
}

.plan-button--deal {
  background: #e8f8fdc7;
  color: #111f5a;
  border-color: snow;
  padding: 8px 20px;
  font-size: 0.9rem;
}

.plan-button--choose {
  background: #f3f4f6;
  color: #111827;
  border-color: #e5e7eb;
}

.plan-button--choose:hover {
  background: #e5e7eb;
}

.plan-button--choose.plan-button--dark {
  background: #1a1a1a;
  color: #ffffff;
  border-color: #1a1a1a;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.plan-button--choose.plan-button--dark:hover {
  background: #2d2d2d;
  border-color: #2d2d2d;
}

/* Plan Button Dropdown Styles */
.plan-button-dropdown {
  position: relative;
  width: 100%;
}

.plan-button--dropdown-toggle {
  position: relative;
  cursor: pointer;
  gap: 8px;
}

.plan-button--dropdown-toggle i {
  font-size: 0.75rem;
  transition: transform 0.2s ease;
  margin-left: 4px;
}

.plan-button-dropdown.active .plan-button--dropdown-toggle i {
  transform: rotate(180deg);
}

.plan-dropdown-menu {
  position: absolute;
  top: calc(100%);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all 0.2s ease;
  z-index: 1000;
  overflow: hidden;
  margin-top: 4px;
}

.plan-button-dropdown.active .plan-dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.plan-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  text-decoration: none;
  color: #002970;
  transition: background-color 0.15s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  gap: 12px;
}

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

.plan-dropdown-item:hover {
  background-color: #f9fafb;
  text-decoration: none;
  color: #1b1b1b;
}

.plan-dropdown-item .dropdown-period {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1b1b1b;
  flex: 1;
}

.plan-dropdown-item .dropdown-price {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1b1b1b;
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.plan-dropdown-item .dropdown-period-small {
  font-size: 0.75rem;
  font-weight: 400;
  color: #666;
}

.plan-dropdown-item .dropdown-badge {
  font-size: 0.7rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: linear-gradient(135deg, #0071f3e6, #005ff2);
  color: #ffffff;
  white-space: nowrap;
}

/* Dark button dropdown styles */
.plan-button--dark+.plan-dropdown-menu {
  background: #002970;
  border-color: #002970;
}

.plan-button--dark+.plan-dropdown-menu .plan-dropdown-item {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.plan-button--dark+.plan-dropdown-menu .plan-dropdown-item:hover {
  background-color: #1f2937;
  color: #ffffff;
}

.plan-button--dark+.plan-dropdown-menu .plan-dropdown-item .dropdown-period,
.plan-button--dark+.plan-dropdown-menu .plan-dropdown-item .dropdown-price {
  color: #ffffff;
}

.plan-button--dark+.plan-dropdown-menu .plan-dropdown-item .dropdown-period-small {
  color: rgba(255, 255, 255, 0.7);
}

.plan-key-features {
  margin: 20px 0;
  padding: 20px 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.key-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #1f2937;
  line-height: 1.35;
}

.key-feature-item:last-child {
  margin-bottom: 0;
}

.key-feature-item i {
  font-size: 1.1rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.plan-includes-note {
  font-size: 0.9rem;
  font-weight: 600;
  color: #111f5a;
  margin-bottom: 0.75rem;
  margin-top: 1rem;
  padding-left: 12px;
  border-radius: 12px;
  display: none;
  background: linear-gradient(90deg,
      rgb(0 172 255 / 15%) 0%,
      rgb(228 242 231 / 29%) 40%,
      rgb(237 238 255 / 29%) 60%,
      rgb(237 238 255 / 3%) 100%);
}

.plan-benefits-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  overflow: visible;
  gap: 10px;
  margin-bottom: 10px;
}

.plan-benefits-list li {
  display: flex;
  align-items: flex-start;
  gap: 5px;
  font-size: 0.9rem;
  color: #374151;
  line-height: 1.35;
}

.plan-benefits-list li.plan-feature-item--tooltip span {
  cursor: help;
  border-bottom: 1px dashed rgba(55, 65, 81, 0.3);
  transition: border-color 0.2s ease;
}

.plan-benefits-list li.plan-feature-item--tooltip:hover {
  border-bottom-color: rgba(5, 150, 105, 0.5);
}

.plan-benefits-list i {
  color: #10b981;
  font-size: 1rem;
  margin-top: 5px;
  margin-right: 5px;
  flex-shrink: 0;
}

.plan-feature-text {
  display: inline;
}

/* Tooltip styling for list items */
.plan-feature-item--tooltip {
  position: relative;
}

.plan-feature-item--tooltip .tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  background-color: #1b1b1b;
  color: #ffffff;
  text-align: left;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  width: 250px;
  z-index: 10000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
}

/* Fix tooltip clipping for last items - show above instead */
.plan-benefits-list li:last-child .plan-feature-item--tooltip .tooltip-content,
.plan-benefits-list li:nth-last-child(2) .plan-feature-item--tooltip .tooltip-content,
.plan-benefits-list li:nth-last-child(3) .plan-feature-item--tooltip .tooltip-content {
  top: auto;
  bottom: calc(100% + 12px);
}

.plan-benefits-list li:last-child .plan-feature-item--tooltip .tooltip-content::after,
.plan-benefits-list li:nth-last-child(2) .plan-feature-item--tooltip .tooltip-content::after,
.plan-benefits-list li:nth-last-child(3) .plan-feature-item--tooltip .tooltip-content::after {
  top: 100%;
  bottom: auto;
  transform: rotate(0deg);
  border-top-color: transparent;
  border-bottom-color: #1b1b1b;
}

.plan-feature-item--tooltip .tooltip-content::after {
  content: "";
  position: absolute;
  top: -15px;
  left: 120px;
  transform: rotate(180deg);
  border: 8px solid transparent;
  border-top-color: #1b1b1b;
}

.plan-feature-item--tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

.plan-feature-item--tooltip .plan-bonus-icon {
  margin-left: 6px;
  font-size: 0.85rem;
  color: #059669;
  opacity: 0.7;
  vertical-align: middle;
  transition: opacity 0.2s ease;
}

.plan-feature-item--tooltip:hover .plan-bonus-icon {
  opacity: 1;
}

@media (max-width: 768px) {
  .plan-feature-item--tooltip .tooltip-content {
    width: 240px;
    font-size: 0.8rem;
    padding: 10px 14px;
    left: 0;
  }

  .plan-feature-item--tooltip .tooltip-content::after {
    left: 20px;
  }
}

.plan-feature-text.plan-bonus--tooltip {
  position: relative;
  cursor: help;
  display: inline-block;
}

.plan-feature-text .plan-bonus-icon {
  margin-left: 6px;
  font-size: 0.85rem;
  color: #059669;
  opacity: 0.7;
  vertical-align: middle;
  transition: opacity 0.2s ease;
}

.plan-feature-text.plan-bonus--tooltip:hover .plan-bonus-icon {
  opacity: 1;
}

.plan-feature-text.plan-bonus--tooltip .tooltip-content {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  bottom: 125%;
  left: 50%;
  transform: translateX(-50%);
  background-color: #1b1b1b;
  color: #ffffff;
  text-align: left;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: normal;
  width: 280px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition:
    opacity 0.3s ease,
    visibility 0.3s ease;
  pointer-events: none;
}

.plan-feature-text.plan-bonus--tooltip .tooltip-content::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1b1b1b;
}

.plan-feature-text.plan-bonus--tooltip:hover .tooltip-content {
  visibility: visible;
  opacity: 1;
}

@media (max-width: 768px) {
  .plan-feature-text.plan-bonus--tooltip .tooltip-content {
    width: 240px;
    font-size: 0.8rem;
    padding: 10px 14px;
    left: 0;
    transform: translateX(0);
  }

  .plan-feature-text.plan-bonus--tooltip .tooltip-content::after {
    left: 20px;
    transform: translateX(0);
  }
}

.feature-tag {
  display: inline-block;
  background: #3b82f6;
  color: #ffffff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  margin-left: 6px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.pricing-tier-card {
  border: 1px solid rgba(0, 0, 0, 0.1);
  padding: 32px 25px 20px 25px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-height: 100%;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
  position: relative;
  border-radius: 12px;
  background: #ffffff;
  overflow: visible;
}

.pricing-tier-card--light {
  background: #ffffff;
}

.pricing-tier-pill {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #111827;
  color: #ffffff;
  padding: 6px 16px;
  border-radius: 6px;
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 600;
  z-index: 10;
}

.pricing-tier-card--popular {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #ffffff;
  padding-top: clamp(44px, 5vw, 52px);
  border-left: none;
  border-right: none;
}

.pricing-tier-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pricing-tier-name {
  font-size: 1.75rem;
  font-weight: 600;
  color: #111f5a;
  margin: 0 0 8px 0;
  line-height: 1.2;
}

.pricing-tier-summary {
  font-size: 1rem;
  color: #5f6368;
  line-height: 1.5;
  margin: 0;
}

.pricing-tier-price {
  display: flex;
  flex-direction: column;
  margin: 20px 0;
}

.pricing-tier-price__currency {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000000;
  line-height: 1;
}

.pricing-tier-price__value {
  font-size: 2.5rem;
  font-weight: 700;
  color: #000000;
  line-height: 1;
}

.pricing-tier-price__detail {
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.7);
  font-weight: 400;
  margin-left: 4px;
}

.pricing-tier-divider {
  margin-top: 8px;
  padding-top: 16px;
  font-size: 0.875rem;
  color: rgba(0, 0, 0, 0.6);
  font-weight: 500;
}

.pricing-tier-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 12px;
  color: rgba(0, 0, 0, 0.7);
  font-size: 1rem;
  line-height: 1.5;
}

.pricing-tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.pricing-tier-features i {
  width: 20px;
  min-width: 20px;
  text-align: left;
  color: rgba(0, 0, 0, 0.5);
  font-size: 0.875rem;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Legacy support - keeping for backward compatibility */

.fw-bold {
  font-weight: 600;
}

.pricing-tier-actions {
  margin-top: auto;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  flex-direction: column;
}

.pricing-tier-actions--split {
  flex-direction: column;
}

.pricing-tier-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border-radius: 8px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  background: #ffffff;
  color: #000000;
  font-weight: 500;
  font-size: 1rem;
  transition: all 0.2s ease;
  text-decoration: none;
  width: 100%;
}

.pricing-tier-button i {
  font-size: 0.875rem;
}

.pricing-tier-button--primary {
  background: #0066ff;
  color: #ffffff;
  border-color: #0066ff;
}

.pricing-tier-button--primary:hover {
  background: #0146ae;
  border-color: #0052cc;
  color: #fff;
}

.pricing-tier-button--dark {
  background: #000000;
  color: #ffffff;
  border-color: #000000;
}

.pricing-tier-button--dark:hover {
  background: rgba(0, 0, 0, 0.85);
  border-color: rgba(0, 0, 0, 0.85);
  color: #fff;
}

.pricing-tier-footnote {
  text-align: center;
  font-size: 1rem;
  color: rgba(0, 0, 0, 0.6);
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 1200px) {
  .pricing-tier-grid {
    gap: 20px;
  }
}

@media (max-width: 992px) {
  .hosting-tier-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {

  .pricing-tier-grid,
  .hosting-tier-grid {
    display: flex;
    gap: 16px;
    flex-direction: column;
  }

  .modern-pricing-section {
    padding: 30px 0;
  }

  .hosting-tier-card,
  .pricing-tier-card {
    padding: 20px 16px;
  }
  
  .pricing-tier-card.plan-popular,
  .hosting-tier-card.plan-popular {
    padding-top: 40px;
    position: relative;
  }
  
  .plan-popular-banner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 40px;
    padding: 10px 16px;
    font-size: 11px;
    border-radius: 8px 8px 0 0;
    z-index: 10;
  }
  
  .plan-popular .plan-meta {
    margin-top: 0;
  }

  .plan-actions {
    flex-direction: column;
  }

  .plan-button {
    width: 100%;
  }

  .plan-dropdown-menu {
    left: 16px;
    right: 16px;
    width: auto;
    max-width: calc(100vw - 32px);
  }
}

.pricing-card {
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: clamp(25px, 2vw, 35px);
  text-align: left;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.pricing-card.featured {
  border-color: #0070f3;
  transform: scale(1.05);
}

.popular-badge {
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
  color: white;
  padding: 4px 16px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 600;
}

.card-header {
  margin-bottom: 20px;
}

.plan-icon {
  width: 48px;
  height: 48px;
  margin: 0 auto 12px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.2rem;
}

.plan-name {
  font-size: 1rem;
  font-weight: 600;
  color: #171717;
}

.plan-description {
  color: #737373;
  font-size: 0.9rem;
  line-height: 1.4;
  margin: 0;
}

.card-pricing {
  margin-bottom: 24px;
}

.price-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 8px;
}

.currency {
  font-size: 1.1rem;
  font-weight: 600;
  color: #171717;
  margin-right: 2px;
}

.amount {
  font-size: 2.8rem;
  font-weight: 700;
  color: #171717;
  line-height: 1;
}

.period {
  font-size: 0.9rem;
  color: #525252;
  margin-left: 4px;
}

.price-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 0.85rem;
}

.original-price {
  color: #737373;
  text-decoration: line-through;
}

.discount {
  color: #059669;
  font-weight: 500;
  padding: 2px 6px;
  background: #dcfce7;
  border-radius: 4px;
}

.card-features {
  flex: 1;
  margin-bottom: 24px;
}

.feature-highlight {
  background: #f3f4f6;
  padding: 8px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.9rem;
}

.feature-list {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
}

.feature-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  color: #525252;
  font-size: 0.9rem;
}

.feature-list li i {
  color: #059669;
  font-size: 0.8rem;
  width: 14px;
  flex-shrink: 0;
}

.card-actions {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pricing-card.sleek .card-actions {
  margin-top: auto;
  padding-top: 8px;
}

.btn-link {
  background: transparent;
  border: none;
  color: #0070f3;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 6px;
  transition: all 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.btn-link:hover {
  color: #0060df;
  text-decoration: none;
}

/* Additional Vercel-inspired button variants */
.btn-outline {
  background: transparent;
  border: 1px solid #d4d4d8;
  color: #18181b;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: 40px;
  font-family: var(--font-family-sans);
}

.btn-outline:hover {
  background: #18181b;
  border-color: #18181b;
  color: white;
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  border: none;
  color: #71717a;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
  transition: all 0.15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: 40px;
  font-family: var(--font-family-sans);
}

.btn-ghost:hover {
  background: #f4f4f5;
  color: #18181b;
  text-decoration: none;
}

/* Button sizes */
.btn-sm {
  padding: 8px 16px;
  font-size: 13px;
  min-height: 32px;
}

/* Button states */
.btn:disabled,
.btn-base:disabled,
.btn-primary:disabled,
.btn-secondary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Premium Plan */
.premium-plan {
  margin-bottom: 40px;
}

.premium-card {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 16px;
  padding: 40px 32px;
  color: white;
  position: relative;
  overflow: hidden;
}

.premium-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  transform: translate(30px, -30px);
}

.premium-pricing {
  text-align: center;
}

.premium-price {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 20px;
}

.premium-price .currency {
  font-size: 1.2rem;
  margin-right: 2px;
}

.premium-price .amount {
  font-size: 3rem;
  font-weight: 700;
  line-height: 1;
}

.premium-price .period {
  font-size: 1rem;
  margin-left: 4px;
  opacity: 0.9;
}

.premium-content {
  padding-left: 20px;
}

.premium-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin-bottom: 12px;
  line-height: 1.2;
}

.premium-subtitle {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 20px;
  line-height: 1.5;
}

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

.premium-features .feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
}

.premium-features .feature-item i {
  font-size: 1rem;
  opacity: 0.9;
}

/* Guarantee Section */
.guarantee-section {
  margin-top: 40px;
}

.guarantee-card {
  text-align: center;
}

.guarantee-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 16px;
  background: #333;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
}

.guarantee-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #171717;
  margin-bottom: 8px;
}

.guarantee-description {
  color: #525252;
  font-size: 0.95rem;
  margin-bottom: 20px;
  line-height: 1.5;
}

.guarantee-features {
  display: flex;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
}

/* ==================== */
/* Sleek Pricing Animations */
/* ==================== */
/* Pricing Flow Visualization */
.pricing-flow-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.3;
  z-index: 0;
}

.data-flow-lines {
  position: relative;
  width: 100%;
  height: 100%;
}

.flow-line {
  position: absolute;
  background: linear-gradient(90deg, transparent, #0070f3, transparent);
  height: 2px;
  animation: dataFlow 4s linear infinite;
}

.flow-1 {
  top: 20%;
  width: 80%;
  left: 10%;
  animation-delay: 0s;
}

.flow-2 {
  top: 50%;
  width: 60%;
  left: 20%;
  animation-delay: 1.5s;
}

.flow-3 {
  top: 80%;
  width: 70%;
  left: 15%;
  animation-delay: 3s;
}

.floating-particles {
  position: absolute;
  width: 100%;
  height: 100%;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: #0070f3;
  border-radius: 50%;
  animation: floatParticle 6s linear infinite;
}

.particle:nth-child(1) {
  left: 10%;
  animation-delay: 0s;
}

.particle:nth-child(2) {
  left: 25%;
  animation-delay: 1s;
}

.particle:nth-child(3) {
  left: 45%;
  animation-delay: 2s;
}

.particle:nth-child(4) {
  left: 60%;
  animation-delay: 3s;
}

.particle:nth-child(5) {
  left: 75%;
  animation-delay: 4s;
}

.particle:nth-child(6) {
  left: 90%;
  animation-delay: 5s;
}

.featured-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0070f3 0%, #0070f3 100%);
  opacity: 1;
}

.card-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle,
      rgba(0, 112, 243, 0.1) 0%,
      transparent 70%);
  opacity: 0;
  transition: all 0.4s ease;
  pointer-events: none;
}

.pricing-card.sleek:hover .card-glow {
  opacity: 1;
  animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

/* Performance Indicators */
.performance-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  padding: 8px 12px;
  background: rgba(0, 0, 0, 0.05);
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 500;
}

.cpu-usage {
  width: 40px;
  height: 6px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.usage-bar {
  height: 100%;
  background: linear-gradient(90deg, #059669, #10b981);
  border-radius: 3px;
  width: var(--usage);
  animation: usageFlow 2s ease-in-out infinite;
}

.usage-text {
  color: #525252;
  font-weight: 500;
}

/* Popular Badge Sleek */
.popular-badge-sleek {
  position: absolute;
  top: -35px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--bg-inverse);
  color: white;
  padding: 6px 16px;
  border-radius: 15px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 2;
  box-shadow: 0 4px 12px rgb(0 0 0 / 30%);
  white-space: nowrap;
  display: inline-block;
}

.badge-pulse {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: var(--bg-inverse);
  animation: badgePulse 2s ease-in-out infinite;
  z-index: -1;
}

/* Plan Header */
.plan-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.plan-icon-container {
  position: relative;
}

.plan-icon.animated {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.3rem;
  position: relative;
  transition: all 0.3s ease;
}

.plan-icon.animated.featured {
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
}

.plan-icon.animated.cloud {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.icon-pulse {
  position: absolute;
  top: -4px;
  left: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  border-radius: 18px;
  background: linear-gradient(135deg, #1010105c 0%, #05050514 100%);
  opacity: 0;
  animation: iconPulse 3s ease-in-out infinite;
}

.icon-pulse.featured {
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
}

.icon-pulse.cloud {
  background: linear-gradient(135deg, #8b5cf6 0%, #a855f7 100%);
}

.plan-info {
  flex: 1;
}

/* Pricing Display */
.pricing-display {
  text-align: center;
  margin-bottom: 28px;
}

.price-container {
  display: flex;
  align-items: baseline;
  justify-content: center;
  margin-bottom: 8px;
}

.price-container .currency {
  font-size: 1.2rem;
  font-weight: 600;
  color: #171717;
  margin-right: 2px;
}

.price-container .amount {
  font-size: 2.8rem;
  font-weight: 800;
  color: #171717;
  line-height: 1;
  animation: priceCounter 0.8s ease-out;
}

.price-container .period {
  font-size: 1rem;
  color: #737373;
  margin-left: 4px;
  font-weight: 500;
}

.savings-badge {
  display: inline-block;
  background: #33333317;
  color: #000;
  padding: 4px 12px;
  border-radius: 12px;
  font-size: 0.8rem;
  font-weight: 600;
}

.savings-badge.featured {
  background: var(--gradient-blue);
  color: white;
}

/* Specs Grid */
.specs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-bottom: 28px;
}

/* For Business plan with more features */
.spec-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, 0.02);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.pricing-card.sleek .spec-item {
  padding: 12px 12px;
  gap: 12px;
  margin-bottom: 10px;
}

/* Adjust spec items for featured plan */
.pricing-card.featured .spec-item {
  padding: 10px 8px;
  gap: 8px;
  min-height: 45px;
}

.pricing-card.featured .spec-icon {
  width: 28px;
  height: 28px;
  font-size: 0.8rem;
}

.pricing-card.featured .spec-value {
  font-size: 0.8rem;
}

.pricing-card.featured .spec-label {
  font-size: 0.7rem;
}

/* Starter Plan Options */
.starter-plans {
  margin-bottom: 20px;
}

.starter-plans.compact {
  display: flex;
  gap: 8px;
  margin-bottom: 2rem;
}

.starter-plan-option {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  position: relative;
  flex: 1;
}

.starter-plan-option:hover {
  border-color: #0070f3;
  background: rgba(0, 112, 243, 0.05);
}

.starter-plan-option.active {
  border-color: #317dff;
  background: rgb(38 119 255 / 32%);
  position: relative;
}

.starter-plan-option.active::before {
  content: " ";
  position: absolute;
  top: 4px;
  right: 6px;
  color: #0070f3;
  font-weight: bold;
  font-size: 0.7rem;
}

.option-text {
  font-weight: 600;
  font-size: 1rem;
  display: block;
}

/* Cloud Compute Deployment Showcase */
.deployment-showcase {
  margin-bottom: 20px;
  background: linear-gradient(135deg,
      rgb(11 11 11 / 5%) 0%,
      rgb(12 12 12 / 5%) 100%);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(139, 92, 246, 0.1);
}

.deployment-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-weight: 600;
  font-size: 0.85rem;
}

.deployment-header i {
  font-size: 1rem;
}

.deployment-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.deploy-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: rgba(255, 255, 255, 0.7);
  border-radius: 8px;
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid rgba(139, 92, 246, 0.1);
}

.deploy-option:hover {
  background: rgba(139, 92, 246, 0.1);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.deploy-icon {
  width: 24px;
  height: 24px;
  background: linear-gradient(135deg, #333 0%, #000 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.8rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.deploy-option:hover .deploy-icon {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

.deploy-option span {
  font-size: 0.75rem;
  font-weight: 600;
  color: #525252;
}

/* Control Panel Excellence Showcase */
.control-panel-experience {
  margin-top: 48px;
  z-index: 9;
  position: relative;
}

.flow-endpoints {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 24px;
  padding: 0 16px;
  margin-bottom: 28px;
}

.flow-endpoint {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.endpoint-icon {
  --node-color: #0f172a;
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.35rem;
  color: var(--node-color);
  box-shadow: 0 18px 32px rgba(15, 23, 42, 0.12);
}

.endpoint-icon--domains {
  --node-color: #1d4ed8;
}

.endpoint-icon--apps {
  --node-color: #dc2626;
}

.endpoint-icon--email {
  --node-color: #d97706;
}

.endpoint-icon--security {
  --node-color: #0f766e;
}

.endpoint-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: #4b5563;
}

.control-deployment-node {
  position: static;
  text-align: center;
}

.deployment-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 18px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.08);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 18px 38px rgba(15, 23, 42, 0.12);
  margin: 0 auto;
}

.deployment-chip i {
  font-size: 0.9rem;
}

.control-panel-highlights {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 48px;
}

.control-panel-highlights::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -72px;
  bottom: -32px;
  width: 2px;
  background: linear-gradient(180deg,
      transparent 0%,
      rgb(224 224 224 / 93%) 45%,
      rgba(15, 23, 42, 0.12) 55%,
      transparent 100%);
  transform: translateX(-50%);
  opacity: 0.6;
}

.control-highlight {
  position: relative;
  background: #fff;
  padding: 2rem;
  border-radius: 8px;
}

.highlight-title {
  font-size: 1.25rem;
}

.highlight-label {
  background: #000;
  color: #fff;
  padding: 7px 20px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 25px;
}

/* Read More Functionality for Control Panel Highlights */
.highlight-description--hidden {
  display: none;
  margin-top: 1rem;
}

.highlight-description--hidden.is-expanded {
  display: block;
}

.highlight-description--first {
  margin-bottom: 0;
}

.highlight-read-more:hover,
.highlight-read-more:focus {
  outline: none;
  text-decoration: none;
}

.highlight-read-more .read-more-icon {
  transition: transform 0.3s ease;
  font-size: 0.875rem;
}

.highlight-read-more[aria-expanded="true"] .read-more-icon {
  transform: rotate(180deg);
}

.highlight-read-more[aria-expanded="true"] .read-more-text {
  display: none;
}

.highlight-read-more[aria-expanded="true"] .read-less-text {
  display: inline !important;
}

@media (max-width: 991px) {
  .flow-endpoints {
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
  }

  .control-panel-highlights {
    grid-template-columns: 1fr;
    gap: 36px;
    margin-top: 64px;
  }

  .control-panel-highlights::before,
  .faq-cta::after {
    display: none;
  }

  .highlight-description {
    max-width: 100%;
  }

  .insight-body {
    grid-template-columns: 1fr;
  }

  .insight-card--score {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .score-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 575px) {
  .endpoint-icon {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  .deployment-chip {
    font-size: 0.85rem;
    padding: 8px 16px;
  }

  .insight-card {
    padding: 24px;
  }

  .insight-toolbar {
    align-items: flex-start;
  }

  .range-pill {
    width: 100%;
    justify-content: space-between;
  }

  .trend-graph {
    height: 160px;
  }

  .score-grid {
    grid-template-columns: 1fr;
  }

  .score-ring {
    width: 100px;
    height: 100px;
    font-size: 2.1rem;
  }
}

.core-node-chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border-radius: 18px;
  background: #ffffff;
  color: #0f172a;
  border: 1px solid rgba(15, 23, 42, 0.1);
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow: 0 24px 46px rgba(15, 23, 42, 0.12);
}

.core-node-chip i {
  font-size: 0.95rem;
}

.core-stack-caption {
  margin-top: 10px;
  font-size: 0.95rem;
  color: #4b5563;
  line-height: 1.5;
}

.deploy-option:hover span {
  color: #8b5cf6;
}

.spec-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #525252;
  font-size: 0.9rem;
  flex-shrink: 0;
}

.spec-details {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
}

.spec-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #171717;
  line-height: 1;
  text-align: left;
}

.spec-label {
  font-size: 0.75rem;
  color: #737373;
  font-weight: 500;
}

/* Sleek Buttons */
.btn-sleek {
  width: 100%;
  padding: 12px 20px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  border: 1px solid transparent;
  position: relative;
  transition: all 0.15s ease;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  cursor: pointer;
  min-height: 40px;
  font-family: var(--font-family-sans);
}

.btn-sleek.btn-primary {
  background: #000;
  border-color: #000;
  color: white;
}

.btn-sleek.btn-featured {
  background: #0070f3;
  border-color: #0070f3;
  color: white;
}

.btn-sleek:hover {
  transform: none;
  box-shadow: none;
}

.btn-sleek.btn-primary:hover {
  background: #333;
  border-color: #333;
}

.btn-sleek.btn-featured:hover {
  background: #0060df;
  border-color: #0060df;
}

.btn-text {
  position: relative;
  z-index: 2;
}

.btn-loading {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-sleek:hover .btn-loading {
  animation: btnSpin 1s linear infinite;
  opacity: 0.7;
}

@keyframes priceCounter {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes btnSpin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes nodeGlow {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.1);
  }
}

@keyframes packetFlow {
  0% {
    left: -20px;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

/* Responsive fixes */
@media (max-width: 768px) {
  .feature-card .feature-stats {
    flex-direction: column;
    gap: 16px;
  }

  .modern-faq-section .category-tabs {
    flex-direction: column;
    align-items: center;
  }

  .modern-faq-section .category-tab {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .final-cta-section .cta-title {
    font-size: 2rem;
  }

  .final-cta-section .cta-features {
    flex-direction: column;
    gap: 16px;
  }

  .final-cta-section .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .final-cta-section .cta-actions .btn {
    width: 100%;
    max-width: 300px;
  }

  /* Enhanced Pricing Responsive */

  .modern-pricing-card {
    padding: 32px 24px;
  }

  .pricing-price {
    font-size: 2.5rem;
  }
}

/* Additional responsive styles for mobile */
@media (max-width: 480px) {
  .modern-pricing-card {
    padding: 24px 16px;
  }

  .pricing-price {
    font-size: 2rem;
  }

  .pricing-features .feature-item {
    padding: 8px 0;
  }

  .pricing-actions .btn-base {
    font-size: 1rem;
    padding: 14px 24px;
  }
}

/* Policy Highlights */

.highlight-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px;
  background: #f8fafc;
  border-radius: 12px;
  border: 1px solid #e2e8f0;
  transition: all 0.3s ease;
}

.highlight-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border-color: #cbd5e1;
}

.highlight-item i {
  color: #0070f3;
  font-size: 0.9rem;
  flex-shrink: 0;
  margin-top: 0;
}

.highlight-content h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
}

/* Important Note Section */
.important-note {
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
}

.note-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.note-header i {
  color: #f59e0b;
  font-size: 1.25rem;
}

.note-header h4 {
  color: #92400e;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.important-note p {
  color: #92400e;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Prohibited Scenarios */
.prohibited-scenarios {
  display: grid;
  gap: 16px;
}

.scenario-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.scenario-content h5 {
  color: #dc2626;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.scenario-content p {
  color: #7f1d1d;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Content Section - Reusing existing pattern */
.content-section {
  padding: 0;
}

.content-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 12px;
}

.content-body {
  color: #4b5563;
  line-height: 1.6;
}

/* Feature Grid - Reusing existing pattern */
.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  justify-content: center;
  max-width: 750px;
  margin: auto;
}

/* Hero Visual Adjustments */
.hero-visual img {
  max-width: 100%;
  height: auto;
  opacity: 0.9;
}

/* Responsive Design for Refund Policy */
@media (max-width: 768px) {
  .policy-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .highlight-item {
    flex-direction: column;
    text-align: center;
  }

  .highlight-item i {
    margin-top: 0;
  }

  .scenario-number {
    margin: 0 auto;
  }

  .important-note {
    padding: 20px;
  }

  .note-header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

@media (max-width: 480px) {
  .highlight-item {
    padding: 16px;
  }

  .content-title {
    font-size: 1.25rem;
  }

  .important-note {
    padding: 16px;
  }

  .hero-visual {
    margin-top: 20px;
  }
}

/* Pricing Mobile Responsive */
@media (max-width: 768px) {
  .pricing-title {
    font-size: 2rem;
  }

  .pricing-subtitle {
    font-size: 1rem;
  }

  .pricing-card.sleek {
    margin-bottom: 24px;
    padding: 24px 20px;
  }

  .pricing-card.sleek.featured {
    transform: none;
    margin-bottom: 24px;
  }

  .pricing-card.sleek:hover {
    transform: translateY(-4px);
  }

  .plan-header {
    gap: 12px;
  }

  .plan-icon.animated {
    width: 45px;
    height: 45px;
    font-size: 1.2rem;
  }

  .plan-name {
    font-size: 1.2rem;
  }

  .price-container .amount {
    font-size: 2.4rem;
  }

  .specs-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  /* Featured plan mobile adjustments */
  .specs-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .pricing-card.featured .spec-item {
    padding: 8px 6px;
    gap: 6px;
    min-height: 42px;
  }

  .pricing-card.featured .spec-icon {
    width: 26px;
    height: 26px;
    font-size: 0.75rem;
  }

  .pricing-card.featured .spec-value {
    font-size: 0.75rem;
  }

  .pricing-card.featured .spec-label {
    font-size: 0.65rem;
  }

  /* Starter plan mobile adjustments */
  .starter-plans.compact {
    gap: 6px;
  }

  .starter-plan-option {
    padding: 6px 8px;
  }

  .option-text {
    font-size: 0.7rem;
  }

  .starter-plan-option.active::before {
    top: 2px;
    right: 4px;
    font-size: 0.6rem;
  }

  /* Cloud Compute mobile adjustments */
  .deployment-showcase {
    padding: 12px;
    margin-bottom: 16px;
  }

  .deployment-header {
    font-size: 0.8rem;
    margin-bottom: 10px;
  }

  .deployment-options {
    gap: 6px;
  }

  .deploy-option {
    padding: 6px 8px;
    gap: 6px;
  }

  .deploy-icon {
    width: 20px;
    height: 20px;
    font-size: 0.7rem;
  }

  .deploy-option span {
    font-size: 0.7rem;
  }

  /* Performance Section */
  .performance-section {
    padding: 80px 0;
    background: linear-gradient(135deg, #fafafa 0%, #f3f4f6 100%);
    position: relative;
  }

  .performance-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
      radial-gradient(circle at 20% 30%,
        rgba(0, 112, 243, 0.03) 0%,
        transparent 50%),
      radial-gradient(circle at 80% 70%,
        rgba(121, 40, 202, 0.03) 0%,
        transparent 50%);
    pointer-events: none;
  }

  .performance-header {
    margin-bottom: 60px;
  }

  .performance-badge {
    display: inline-block;
    margin-bottom: 24px;
  }

  .performance-badge .badge-text {
    background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
    color: white;
    padding: 8px 20px;
    border-radius: 25px;
    font-size: 0.9rem;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 112, 243, 0.2);
  }

  .performance-title {
    font-size: 2.8rem;
    font-weight: 800;
    color: #171717;
    margin-bottom: 16px;
    line-height: 1.2;
  }

  .performance-features {
    margin-bottom: 60px;
  }

  .performance-card {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 32px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    height: 100%;
    margin-bottom: 30px;
  }

  .performance-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.12);
  }

  .performance-card .card-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 28px;
  }

  .nginx-icon {
    background: linear-gradient(135deg, #059669 0%, #10b981 100%);
  }

  .litespeed-icon {
    background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
  }

  .tech-info {
    flex: 1;
  }

  .tech-name {
    font-size: 1.4rem;
    font-weight: 700;
    color: #171717;
    margin-bottom: 4px;
  }

  .tech-description {
    color: #737373;
    font-size: 0.95rem;
    margin: 0;
  }

  /* Performance Comparison */
  .performance-comparison {
    margin-bottom: 28px;
  }

  .metric-bar-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  .metric-bar {
    display: flex;
    align-items: center;
    border-radius: 10px;
    position: relative;
    overflow: hidden;
  }

  .apache-bar {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
  }

  .nginx-bar {
    background: linear-gradient(135deg,
        rgba(5, 150, 105, 0.1) 0%,
        rgba(16, 185, 129, 0.1) 100%);
    border: 1px solid rgba(5, 150, 105, 0.2);
  }

  .bar-label {
    font-weight: 600;
    color: #171717;
    font-size: 0.9rem;
  }

  .bar-value {
    font-weight: 700;
    font-size: 0.9rem;
  }

  .apache-bar .bar-value {
    color: #6b7280;
  }

  .nginx-bar .bar-value {
    color: #059669;
  }

  /* Cache Performance */
  .cache-performance {
    display: flex;
    gap: 24px;
    margin-bottom: 28px;
  }

  .performance-metric {
    text-align: center;
    flex: 1;
  }

  .metric-description {
    font-size: 0.9rem;
    color: #525252;
    font-weight: 600;
  }

  /* Supported CMS */
  .supported-cms {
    margin-bottom: 28px;
  }

  .cms-header {
    font-size: 0.9rem;
    font-weight: 600;
    color: #525252;
    margin-bottom: 16px;
  }

  .cms-logos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .cms-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(220, 38, 38, 0.05);
    border-radius: 8px;
    border: 1px solid rgba(220, 38, 38, 0.1);
    transition: all 0.3s ease;
  }

  .cms-item:hover {
    background: rgba(220, 38, 38, 0.1);
    transform: translateY(-2px);
  }

  .cms-item i {
    color: #dc2626;
    font-size: 1.1rem;
  }

  .cms-item span {
    font-size: 0.85rem;
    font-weight: 600;
    color: #525252;
  }

  /* Feature Highlights */
  .feature-highlights {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  .highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 0.9rem;
  }

  .highlight-item i {
    color: #059669;
    font-size: 1rem;
    flex-shrink: 0;
  }

  .highlight-item span {
    color: #525252;
    font-weight: 500;
  }

  /* Performance CTA */
  .performance-cta {
    text-align: center;
  }

  .cta-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px);
    border-radius: 20px;
    padding: 40px 32px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
  }

  .cta-title {
    font-size: 1.8rem;
    font-weight: 700;
    color: #171717;
    margin-bottom: 12px;
  }

  .cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
  }

  .cta-actions .btn {
    padding: 12px 24px;
    border-radius: 10px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
  }

  .cta-actions .btn-outline-primary {
    background: transparent;
    color: #0070f3;
    border: 2px solid #0070f3;
  }

  .cta-actions .btn-outline-primary:hover {
    background: #0070f3;
    color: white;
    transform: translateY(-2px);
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    .flow-chart-container {
      flex-direction: column;
      gap: 20px;
    }

    .connection-line.animated {
      width: 4px;
      height: 30px;
      background: linear-gradient(180deg, #e5e7eb, #0070f3, #e5e7eb);
    }

    .data-packet {
      top: -20px;
      left: 0;
      width: 100%;
      height: 20px;
      background: linear-gradient(180deg, transparent, #0070f3, transparent);
    }

    .step-node {
      width: 50px;
      height: 50px;
      font-size: 1.2rem;
    }
  }
}

/* Performance Header - Vercel Style */
.performance-header {
  margin-bottom: 55px;
  max-width: 768px;
  margin-left: auto;
  margin-right: auto;
}

/* Performance title now uses .section-title base class */
/* ==============================================
Modern Startup Section Styles
============================================== */
.modern-startup-section {
  position: relative;
  padding: 0 0;
  overflow: hidden;
}

/* Startup Features Cards */
.startup-features {
  margin-bottom: 75px;
}

.startup-card {
  padding: 2rem;
  border-radius: 12px;
}

.startup-card .card-icon-container {
  margin-bottom: 24px;
}

.startup-card .card-icon {
  width: 45px;
  height: 45px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  transition: all 0.3s ease;
}

.startup-card .card-icon i {
  font-size: 1.25rem;
  color: #fff;
}

.startup-card .card-description {
  font-size: 1.1rem;
  color: #5e5c5c;
  line-height: 1.6;
  margin-bottom: 24px;
}

.startup-card .card-features {
  margin-bottom: 24px;
}

.startup-card .stars {
  display: flex;
  margin-right: 12px;
}

.startup-card .stars i {
  color: #fbbf24;
  margin-right: 2px;
}

.startup-card .rating-text {
  color: #666;
  font-size: 14px;
  font-weight: 500;
}

.startup-card .community-stats {
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
}

.startup-card .stat-item {
  text-align: center;
  flex: 1;
}

/* Customer Stories Section */
.customer-stories {
  margin-bottom: 35px;
}

.stories-header {
  margin-bottom: 45px;
}

/* Testimonials Grid */
.testimonials-grid {
  margin-bottom: 50px;
}

.testimonial-card {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  height: 100%;
  margin-bottom: 30px;
}

.testimonial-card .rating-stars {
  display: flex;
  margin-bottom: 20px;
}

.testimonial-card .rating-stars i {
  color: #fbbf24;
  margin-right: 4px;
  font-size: 16px;
}

.testimonial-card blockquote {
  font-size: 1rem;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 24px;
  border: none;
  padding: 0;
}

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

.testimonial-card .author-name {
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 4px;
}

.testimonial-card .author-source {
  font-size: 14px;
  color: #666;
}

.testimonial-card .platform-score {
  background: #f1f5f9;
  color: #333;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 600;
}

/* Background Elements */
.startup-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: -1;
}

.floating-code-element {
  position: absolute;
  opacity: 0.1;
  animation: float 6s ease-in-out infinite;
}

.floating-code-element.element-1 {
  top: 20%;
  left: 10%;
  animation-delay: 0s;
}

.floating-code-element.element-2 {
  top: 60%;
  right: 15%;
  animation-delay: 2s;
}

.floating-code-element.element-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 4s;
}

.code-snippet {
  font-family: "Menlo", "Monaco", "Consolas", monospace;
  font-size: 18px;
  color: #0070f3;
  white-space: nowrap;
}

.code-bracket {
  color: #6b7280;
}

.code-property {
  color: #059669;
}

.code-colon {
  color: #6b7280;
}

.code-value {
  color: #dc2626;
}

.code-tag {
  color: #7c3aed;
}

.code-function {
  color: #2563eb;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-startup-section {
    padding: 30px 0;
  }

  .startup-card {
    padding: 30px 20px;
    margin: 2rem 0;
  }

  .startup-card .card-icon {
    width: 56px;
    height: 56px;
  }

  .startup-card .card-icon i {
    font-size: 24px;
  }

  .startup-card .card-title {
    font-size: 1.25rem;
  }

  .startup-card .community-stats {
    flex-direction: column;
    gap: 16px;
  }

  .testimonial-card {
    padding: 24px;
  }

  .trustpilot-card {
    padding: 30px 20px;
  }

  .trustpilot-header {
    flex-direction: column;
    gap: 20px;
  }

  .trustpilot-stats {
    flex-direction: column;
    gap: 20px;
  }
}

/* Featured Articles */
.press-articles {
  margin-bottom: 100px;
}

.press-article-card {
  background: #fff;
  overflow: hidden;
  transition: all 0.3s ease;
  margin-bottom: 30px;
  border-radius: 12px;
  border: 1px solid #c3c2c2;
}

.press-article-card.featured {
  height: 100%;
}

.press-article-card .article-image {
  height: 200px;
  background: #1b1b1b;
  position: relative;
  overflow: hidden;
}

.press-article-card .article-image::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url("../images/news-card.png");
  background-repeat: no-repeat;
  background-size: 25%;
  background-position: 100% 100%;
}

.press-article-card .article-overlay {
  position: absolute;
  top: 20px;
  left: 20px;
  right: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.press-article-card .article-category {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  backdrop-filter: blur(10px);
}

.press-article-card .article-date {
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  backdrop-filter: blur(10px);
}

.press-article-card .article-content {
  padding: 30px;
}

.press-article-card .article-source {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.press-article-card .source-logo {
  /* width: 32px; */
  height: 32px;
  margin-right: 12px;
  border-radius: 6px;
}

.press-article-card .source-name {
  font-size: 14px;
  font-weight: 600;
  color: #666;
}

.press-article-card .article-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 16px;
  line-height: 1.4;
}

.press-article-card.secondary .article-title {
  font-size: 1.125rem;
  margin-bottom: 12px;
}

.press-article-card .article-excerpt {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
}

.press-article-card.secondary .article-excerpt {
  font-size: 0.9rem;
  margin-bottom: 16px;
}

.press-article-card .article-metrics {
  display: flex;
  gap: 20px;
  margin-bottom: 24px;
}

.press-article-card .metric-item {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #666;
}

.press-article-card .article-cta {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: #333;
  color: #fff;
  border-radius: 16px;
  text-decoration: none;
  font-weight: 600;
  transition: all 0.3s ease;
}

.press-article-card .article-cta .cta-text {
  font-size: 0.8rem;
}

.press-article-card .article-cta:hover {
  background: #0056b3;
  transform: translateX(4px);
}

.press-article-card .article-cta i {
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.press-article-card .article-cta:hover i {
  transform: translateX(4px);
}

.press-article-card.secondary .article-date {
  background: #f1f5f9;
  color: #333;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  display: inline-block;
}

/* Secondary Articles */
.secondary-articles .press-article-card {
  margin-bottom: 20px;
}

.secondary-articles .press-article-card .article-content {
  padding: 24px;
}

/* Media Coverage */

.coverage-title {
  font-size: 1.35rem;
  font-weight: 500;
  color: #000;
  margin-bottom: 5px;
}

.coverage-subtitle {
  font-size: 1.05rem;
  color: #666;
}

.media-logos-grid {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 40px;
  margin: 0 auto;
}

.media-logo-item {
  position: relative;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: left;
  border-radius: 12px;
  transition: all 0.3s ease;
  cursor: pointer;
}

.media-logo-item .media-logo {
  max-width: 150px;
  max-height: 55px;
  filter: grayscale(100%);
  transition: all 0.3s ease;
}

.media-logo-item:hover .media-logo {
  filter: grayscale(0%);
}

.media-logo-item .logo-overlay {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  opacity: 0;
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Press Statistics */
.press-stats {
  margin-bottom: 80px;
}

/* Press CTA */
.press-cta {
  margin-bottom: 60px;
}

.press-cta-card {
  background: #fff;
  border-radius: 24px;
  padding: 25px 25px;
  text-align: center;
  border: 1px solid #e5e7eb;
}

.cta-description {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 40px;
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

.press-cta-card .cta-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

.press-cta-card .cta-badges {
  display: flex;
  justify-content: center;
  gap: 30px;
  flex-wrap: wrap;
}

.press-cta-card .badge-item {
  display: flex;
  align-items: center;
  font-size: 0.9rem;
  color: #666;
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-press-section {
    padding: 30px 0;
  }

  .press-article-card .article-image {
    height: 150px;
  }

  .press-article-card .article-content {
    padding: 20px;
  }

  .press-article-card .article-title {
    font-size: 1.25rem;
  }

  .press-article-card.secondary .article-title {
    font-size: 1rem;
  }

  .press-article-card .article-metrics {
    flex-direction: column;
    gap: 8px;
  }

  .media-logos-grid {
    gap: 20px;
  }

  .media-logo-item {
    width: 107px;
    height: auto;
  }

  .media-logo-item .media-logo {
    max-width: 100px;
  }

  .press-cta-card {
    padding: 40px 30px;
  }

  .press-cta-card .cta-title {
    font-size: 1.5rem;
  }

  .press-cta-card .cta-actions {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .press-cta-card .cta-badges {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .press-article-card .article-overlay {
    flex-direction: column;
    gap: 8px;
    align-items: flex-start;
  }

  .coverage-title {
    font-size: 1.5rem;
  }

  .press-cta-card .cta-title {
    font-size: 1.5rem;
  }
}

/* Rating Section - Vercel Style */
.rating-section {
  margin-bottom: 80px;
}

.rating-content {
  text-align: center;
}

.rating-cards-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 25px;
  flex-wrap: wrap;
}

.rating-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 20px;
  background: transparent;
  border: none;
  position: relative;
  cursor: pointer;
}

.rating-company {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  margin-bottom: 5px;
  position: relative;
  z-index: 1;
}

.rating-company img {
  height: 40px;
  width: auto;
  object-fit: contain;
  filter: grayscale(20%);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.rating-value {
  font-size: 0.9rem;
  font-weight: 500;
  color: #575757;
  text-align: center;
  position: relative;
  z-index: 1;
  transition: all 0.3s ease;
}

/* Responsive Design for Rating Section */
@media (max-width: 768px) {
  .rating-cards-container {
    gap: 32px;
  }

  .rating-section {
    margin-bottom: 20px;
  }

  .rating-card {
    padding: 0px 20px;
    flex: 0 0 calc(50% - 16px);
    max-width: 200px;
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    flex-direction: row;
    gap: 15px;
  }

  .rating-company img {
    max-width: 100px;
    max-height: 50px;
  }

  .rating-value {
    font-size: 0.9rem;
  }

  .rating-title {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .rating-cards-container {
    flex-direction: column;
    gap: 0;
  }

  .rating-title {
    font-size: 1.5rem;
  }
}

.performance-subtitle {
  font-size: 1.25rem;
  color: #666;
  line-height: 1.6;
  font-weight: 400;
  margin: 0;
}

/* Performance Dashboard - Vercel Style */
.performance-dashboard {
  margin-bottom: 96px;
}

.dashboard-container {
  background: #fff;
  border-radius: 12px;
  padding: 15px 30px 20px;
  border: 1px solid #eaeaea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.dashboard-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  max-width: 800px;
  margin: auto;
  margin-bottom: 3rem;
}

.dashboard-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #000;
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-title i {
  color: #0070f3;
  font-size: 1.25rem;
}

.status-dot {
  width: 8px;
  height: 8px;
  background: #10b981;
  border-radius: 50%;
  animation: statusPulse 2s ease-in-out infinite;
}

/* Metrics Grid - Vercel Style */
.metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 24px;
}

.performance-dashboard .metric-card {
  transition: all 0.2s ease;
  position: relative;
  overflow: hidden;
}

.metric-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #f4f4f4;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #363636;
  font-size: 1.125rem;
  margin-bottom: 20px;
}

.metric-bar {
  height: 6px;
  background: #f1f5f9;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #0070f3, #7928ca4f);
  border-radius: 3px;
  width: 0%;
  transition: width 2s ease;
  position: relative;
}

.bar-fill::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100%;
  background: linear-gradient(to left, rgb(250 252 254) 25%, rgb(7 248 71) 75%);
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  animation: barShimmer 2s ease-in-out infinite;
}

/* Technology Stack */
.tech-stack-section {
  margin-bottom: 100px;
}

.tech-stack-header {
  margin-bottom: 60px;
}

.section-title {
  font-size: 3rem;
  color: #1b1b1b;
  max-width: 850px;
  margin: auto;
  line-height: 1.5;
  letter-spacing: -0.02em;
  margin-bottom: 1rem;
}

.wordpress-platform-section .section-title {
  color: #fff;
}

.wordpress-platform-section .section-subtitle {
  color: #a5a5a5;
}

.section-subtitle,
.pricing-subtitle {
  font-size: 1.15rem;
  color: #5f6368;
  max-width: 850px;
  margin: 0 auto;
  line-height: 1.5;
}

.tech-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 32px;
}

.tech-item {
  position: relative;
}

.tech-card {
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 32px 24px;
  text-align: center;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s ease;
  height: 100%;
  position: relative;
  overflow: hidden;
}

.tech-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(0, 112, 243, 0.05) 0%,
      rgba(121, 40, 202, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.tech-card:hover::before {
  opacity: 1;
}

.tech-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.tech-icon {
  width: 45px;
  height: 45px;
  margin: 0 auto;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: white;
  position: relative;
  overflow: hidden;
  background: #333;
}

.tech-name {
  font-size: 1.15rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 4px;
  margin-top: 0;
}

.tech-description {
  font-size: 0.9rem;
  color: #525252;
  margin-bottom: 16px;
  line-height: 1.5;
  margin-top: 15px;
}

.stat-badge {
  display: inline-block;
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
  color: white;
  padding: 6px 16px;
  border-radius: 20px;
  font-size: 0.8rem;
  font-weight: 600;
}

.primary-value a {
  color: var(--text-primary);
}

.supporting-copy {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.comparison-description {
  color: var(--text-secondary);
  line-height: 1.65;
  font-size: 1rem;
  margin-top: 1rem;
}

.comparison-points {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0;
  margin: 0;
  list-style: none;
  color: var(--text-secondary);
}

.comparison-points li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  line-height: 1.6;
}

.comparison-points i {
  color: #10b981;
  font-size: 0.9rem;
}

.comparison-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}

.comparison-metric {
  padding: 16px 18px;
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 1rem;
}

.comparison-metric-value {
  font-size: 1.6rem;
  font-weight: 600;
}

.metric-sub {
  font-size: 0.85rem;
  color: rgba(15, 23, 42, 0.6);
}

.comparison-chart {
  display: flex;
  flex-direction: row;
  max-width: 750px;
  margin: auto;
}

.chart-item {
  display: flex;
  padding: 10px 20px;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease,
    border-color 0.3s ease;
  margin: auto;
  background: #f0faff;
  margin-left: 0;
  border-radius: 6px;
}

.provider-logo {
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.1rem;
}

.provider-logo.cyberin {
  background: linear-gradient(135deg, #050505, #1f1f1f);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.provider-logo.competitor1 {
  color: #0f172a;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.provider-logo.competitor2 {
  background: linear-gradient(135deg, #e5e7eb, #cbd5f5);
  color: #0f172a;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.provider-logo.competitor3 {
  background: linear-gradient(135deg, #f5f5f5, #e0e7ff);
  color: #0f172a;
  border: 1px solid rgba(17, 24, 39, 0.08);
}

.provider-name {
  font-size: 1.25rem;
  font-weight: 500;
  color: #0f172a;
}

.provider-tag {
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.5);
  font-weight: 600;
}

.comparison-meta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 0 4px;
}

.comparison-legend {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.legend-title {
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(15, 23, 42, 0.6);
}

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

.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.08);
  color: rgba(15, 23, 42, 0.7);
  font-size: 0.85rem;
  font-weight: 500;
}

.comparison-footer {
  padding-bottom: 18px;
}

.test-info {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(15, 23, 42, 0.6);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* Modern CTA - Vercel Style */
.modern-cta-card {
  background: #fff;
  border-radius: 12px;
  padding: 35px 30px;
  text-align: center;
  border: 1px solid #eaeaea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.cta-actions {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

.guarantee-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: #333;
  border-radius: 5px;
  font-weight: 600;
  font-size: 0.9rem;
  position: relative;
  z-index: 2;
}

@keyframes statusPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes barShimmer {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-20px) rotate(120deg);
  }

  66% {
    transform: translateY(-10px) rotate(240deg);
  }
}

/* Counter Animation */
@keyframes countUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

/* Mobile Responsive */
@media (max-width: 768px) {

  .section-bg-base,
  .modern-features-included-section,
  .modern-performance-section {
    padding: 80px 0;
  }

  .performance-title {
    font-size: 2.5rem;
  }

  .performance-subtitle {
    font-size: 1rem;
  }

  .dashboard-container {
    padding: 24px;
  }

  .dashboard-header {
    flex-direction: column;
    gap: 16px;
    text-align: center;
  }

  .metrics-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .metric-card {
    padding: 20px;
  }

  .metric-value {
    font-size: 2rem;
  }

  .tech-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .tech-card {
    padding: 24px 20px;
  }

  .section-title {
    font-size: 2rem;
  }

  .comparison-card {
    padding: var(--spacing-xl);
  }

  .comparison-header {
    text-align: center;
    margin: 0 auto var(--spacing-lg);
    align-items: center;
  }

  .comparison-body {
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
  }

  .comparison-summary {
    align-items: stretch;
    text-align: left;
  }

  .comparison-points li {
    justify-content: flex-start;
    text-align: left;
  }

  .comparison-metrics {
    width: 100%;
  }

  .comparison-chart {
    padding: 10px 20px;
    flex-direction: column;
  }

  .chart-item {
    text-align: center;
    margin: 15px 0;
  }

  .performance-bar {
    width: 100%;
  }

  .bar-metrics {
    justify-content: center;
  }

  .comparison-meta {
    align-items: center;
    text-align: center;
  }

  .comparison-footer {
    width: 100%;
  }

  .test-info {
    justify-content: center;
    text-align: center;
    flex-wrap: wrap;
  }

  .modern-cta-card {
    padding: 25px 32px;
  }

  .cta-title {
    font-size: 1.5rem;
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .btn-modern {
    width: 100%;
    justify-content: center;
  }
}

/* Core Technologies Section */
.core-technologies-section {
  margin-bottom: 96px;
  padding-top: 30px;
}

.tech-header {
  margin-bottom: 64px;
  text-align: center;
}

.tech-feature-card {
  background: #fff;
  border-radius: 12px;
  padding: 0;
  border: 1px solid #eaeaea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  height: 100%;
  margin-bottom: 32px;
  overflow: hidden;
  position: relative;
}

.tech-feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

.tech-card-header {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px 20px 20px;
  border-bottom: 1px solid #eaeaea;
}

.tech-info {
  flex: 1;
}

.tech-tagline {
  font-size: 0.875rem;
  color: #666;
  margin: 0;
  font-weight: 500;
}

.tech-content {
  padding: 0 32px 0;
}

.tech-content .highlight-item {
  background: #fff;
}

.tech-highlights {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 24px;
}

/* CMS Support Grid */
.supported-cms {
  margin-bottom: 24px;
}

.cms-header {
  font-size: 0.9rem;
  font-weight: 600;
  color: #525252;
  margin-bottom: 16px;
}

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

.cms-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid #7d00cc29;
  transition: all 0.3s ease;
}

.cms-item:hover {
  background: #7d00cc0f;
  transform: translateY(-2px);
}

.cms-item i {
  color: #7d00cc;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.cms-item span {
  font-size: 0.85rem;
  font-weight: 600;
  color: #525252;
}

/* Performance Badge Bottom */
.performance-badge-bottom {
  padding: 0 32px 32px;
}

.performance-stat {
  display: inline-block;
  background: var(--gradient-black);
  color: white;
  padding: 10px 20px;
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 700;
  box-shadow: 0 4px 15px rgba(0, 112, 243, 0.3);
}

/* Hover Effects */
.tech-feature-card:hover .tech-icon {
  transform: scale(1.05);
}

.tech-feature-card:hover .performance-stat {
  transform: scale(1.05);
}

/* Mobile Responsive for Core Technologies */
@media (max-width: 768px) {

  .core-technologies-section,
  .performance-header {
    margin-bottom: 30px;
  }

  .tech-header {
    margin-bottom: 40px;
  }

  .tech-feature-card {
    margin-bottom: 40px;
  }

  .tech-card-header {
    flex-direction: column;
    text-align: center;
    gap: 16px;
    padding: 24px 24px 20px;
  }

  .tech-content {
    padding: 0 24px 0;
  }

  .tech-feature-card .tech-icon {
    width: 45px;
    height: 45px;
    font-size: 1.25rem;
  }

  .tech-feature-card .tech-name {
    font-size: 1.3rem;
  }

  .tech-feature-card .tech-description {
    font-size: 0.95rem;
    margin-bottom: 20px;
  }

  .cms-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .cms-item {
    padding: 10px 14px;
  }

  .performance-badge-bottom {
    padding: 0 24px 24px;
    text-align: center;
  }

  .tech-highlights {
    gap: 10px;
    margin-bottom: 20px;
  }

  .tech-feature-card .highlight-item {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .tech-card-header {
    padding: 20px 20px 16px;
  }

  .tech-content {
    padding: 0 20px 16px;
  }

  .performance-badge-bottom {
    padding: 0 20px 20px;
  }

  .tech-feature-card .tech-name {
    font-size: 1.2rem;
  }

  .tech-feature-card .tech-description {
    font-size: 0.9rem;
  }
}

/* Modern Email Section */
.modern-email-section {
  background: #fff;
  position: relative;
}

.modern-email-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  pointer-events: none;
  z-index: 0;
}

/* Email Header */
.email-header {
  margin-bottom: 75px;
}

.email-title {
  font-size: 3.75rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 24px;
  line-height: 1.1;
}

.highlight-text {
  font-weight: 600;
  color: #0070f3;
}

/* Email Content */

.email-content {
  background: #fff;
}

.features-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Email Demo */
.demo-card {
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.demo-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
}

.demo-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #000;
}

.demo-title i {
  color: #0070f3;
}

.demo-badge {
  background: #010b3f;
  color: #fff;
  padding: 4px 12px;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
}

.video-container {
  position: relative;
  padding: 0;
}

.demo-footer {
  padding: 20px 24px;
  border-top: 1px solid #eaeaea;
}

.demo-description {
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
  margin: 0;
}

/* Email Stats */
.email-stats {
  margin-bottom: 75px;
}

.stats-container {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  padding: 25px 30px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  margin-top: 35px;
}

.email-stats .stat-icon {
  font-size: 1.75rem;
  color: #333;
  margin-bottom: 10px;
}

.email-stats .stat-item {
  text-align: center;
  display: inline-block;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 25px;
  margin: auto;
}

/* Email CTA */
.email-cta {
  margin-bottom: 48px;
}

.cta-container {
  text-align: center;
  background: #fff;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  padding: 25px 20px 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.cta-title {
  font-size: 2.25rem;
  font-weight: 600;
  color: #000;
  text-align: left;
}

/* Responsive Design */
@media (max-width: 768px) {
  .email-header {
    margin-bottom: 64px;
  }

  .email-title {
    font-size: 2.5rem;
  }

  .email-features {
    padding-right: 0;
    margin-bottom: 48px;
  }

  .features-list {
    align-items: center;
  }

  .email-demo {
    padding-left: 0;
  }

  .demo-card {
    margin-bottom: 32px;
  }

  .stats-grid,
  .stat-item-base {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: center;
  }

  .email-stats {
    margin: 10px;
  }

  .cta-container {
    padding: 40px 24px;
  }

  .cta-title {
    font-size: 1.5rem;
  }

  .cta-description {
    font-size: 1rem;
  }

  .cta-actions {
    flex-direction: column;
    gap: 5px;
  }
}

/* Modern Support Section */
.modern-support-section {
  padding: 128px 0;
  background: #fff;
  position: relative;
}

.modern-support-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(0, 112, 243, 0.01) 0%,
      rgba(121, 40, 202, 0.01) 50%,
      rgba(16, 185, 129, 0.01) 100%);
  pointer-events: none;
}

.support-badge .badge-text {
  background: #000;
  color: #fff;
  padding: 7px 20px;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 32px;
}

.support-subtitle {
  font-size: 1.15rem;
  color: #575757;
  max-width: 850px;
  margin: 0 auto;
  margin-bottom: 3rem;
  line-height: 1.5;
}

/* Support Content */
.support-content {
  margin-bottom: 55px;
  z-index: 9;
  position: relative;
}

/* Support Flow Chart */
.support-flow-chart {
  margin-bottom: 25px;
}

.flow-chart-container {
  text-align: center;
  padding: 48px 24px;
}

.flow-chart-title {
  font-size: 2rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 12px;
}

.flow-chart-subtitle {
  font-size: 1rem;
  color: #666;
  margin-bottom: 48px;
}

.support-flow-steps {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  gap: 0;
  margin-bottom: 64px;
  position: relative;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 20px;
}

.step-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
  line-height: 1.3;
}

.step-description {
  font-size: 0.75rem;
  color: #666;
  line-height: 1.4;
  margin-bottom: 10px;
}

.alternative-paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 32px;
  margin-top: 48px;
}

.path-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px;
  background: #fafafa;
  border-radius: 12px;
  border: 1px solid #eaeaea;
  transition: all 0.3s ease;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

.path-item:nth-child(1) {
  animation-delay: 1s;
}

.path-item:nth-child(2) {
  animation-delay: 1.2s;
}

.path-item:nth-child(3) {
  animation-delay: 1.4s;
}

.path-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.path-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #0070f3;
  border: 1px solid #eaeaea;
  flex-shrink: 0;
}

.path-title {
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 4px;
}

.path-desc {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.4;
  margin-bottom: 0;
}

/* Animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes lineGrow {
  from {
    width: 0;
    opacity: 0;
  }

  to {
    width: 60px;
    opacity: 1;
  }
}

@keyframes dataPulse {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateX(60px);
    opacity: 0;
  }
}

@keyframes dataPulseMobile {
  0% {
    transform: translateY(0);
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    transform: translateY(40px);
    opacity: 0;
  }
}

.support-description {
  padding-right: 48px;
}

.description-title {
  font-size: 2rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 24px;
}

.description-text {
  font-size: 1.15rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 0;
}

.features-grid {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.support-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.feature-icon-wrapper {
  position: relative;
  width: 48px;
  height: 48px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}

.feature-desc {
  font-size: 0.875rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 0;
}

/* Contact Information */

.support-contact {
  margin-bottom: 96px;
}

.contact-container {
  background: #fafafa;
  border-radius: 12px;
  padding: 15px;
  border: 1px solid #eaeaea;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
  gap: 25px;
}

.contact-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: #0070f3;
  flex-shrink: 0;
}

.contact-title {
  font-size: 1rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
}

.contact-details {
  font-size: 0.875rem;
  color: #666;
  margin-bottom: 4px;
}

.phone-link,
.callback-link {
  color: #0070f3;
  text-decoration: none;
  font-weight: 500;
}

.phone-link:hover,
.callback-link:hover {
  text-decoration: underline;
}

.contact-note {
  font-size: 0.75rem;
  color: #999;
}

.support-metrics-panel {
  padding: 28px;
  border-radius: 12px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.metric-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0f172a;
  margin-bottom: 18px;
}

.metric-pill .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.metric-pill .dot.online {
  background: #10b981;
  box-shadow: 0 0 0 6px rgba(16, 185, 129, 0.15);
}

.support-metrics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 18px;
}

.support-metric {
  background: #f8fafc;
  border-radius: 14px;
  padding: 16px;
}

.support-metric .label {
  font-size: 0.9rem;
  text-transform: uppercase;
  color: #6b7280;
  padding: 0;
}

.support-metric strong {
  display: block;
  font-size: 1.5rem;
  margin: 4px 0;
  color: #0f172a;
}

.support-metric .hint {
  font-size: 0.9rem;
  color: #6b7280;
}

.support-metrics-note {
  margin: 20px 0 0;
  color: #4b5563;
  font-size: 1rem;
}

.support-promises-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  border-radius: 12px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.support-promise-card {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition:
    transform 0.2s ease,
    box-shadow 0.2s ease;
}

.promise-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgb(250 208 254);
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}

.support-promise-card h4 {
  margin: 0;
  font-size: 1.1rem;
  color: #0f172a;
}

.support-promise-card p {
  margin: 0;
  color: #4b5563;
  font-size: 1rem;
  line-height: 1.4;
}

/* Responsive Design */
@media (max-width: 1024px) {
  .support-description {
    padding-right: 24px;
  }
}

@media (max-width: 768px) {
  .modern-support-section {
    padding: 96px 0;
  }

  .support-header {
    margin-bottom: 64px;
  }

  .support-subtitle {
    font-size: 1.05rem;
  }

  .support-content {
    margin-bottom: 64px;
  }

  .support-description {
    padding-right: 0;
    margin-bottom: 48px;
  }

  .contact-container {
    padding: 32px 24px;
  }

  .contact-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .support-contact {
    margin-bottom: 64px;
  }

  .support-cta-container {
    padding: 32px 24px;
  }

  .support-cta .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .support-highlights {
    gap: 10px;
  }

  .support-metrics-panel {
    padding: 24px;
  }

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

  .support-promises-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 480px) {
  .support-subtitle {
    font-size: 0.9rem;
  }

  .features-grid {
    gap: 24px;
  }

  .support-feature-item {
    gap: 16px;
  }

  .contact-item {
    padding: 20px;
  }

  .support-metrics-panel {
    padding: 20px;
  }

  .support-metrics-grid {
    grid-template-columns: 1fr;
  }

  .support-promise-card {
    padding: 20px;
  }
}

/* Modern CTA Section */
.modern-cta-section {
  padding: 100px 0;
  position: relative;
  overflow: hidden;
}

.modern-cta-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 30% 20%,
      rgba(0, 112, 243, 0.05) 0%,
      transparent 50%),
    radial-gradient(circle at 70% 80%,
      rgba(121, 40, 202, 0.05) 0%,
      transparent 50%);
  pointer-events: none;
}

.cta-header {
  margin-bottom: 80px;
}

.cta-badge .badge-text {
  background: #fff;
  color: #0070f3;
  padding: 8px 16px;
  border-radius: 24px;
  font-size: 0.875rem;
  font-weight: 500;
  border: 1px solid #eaeaea;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 24px;
  transition: all 0.2s ease;
}

.cta-badge .badge-text:hover {
  border-color: #0070f3;
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.15);
}

/* Action Section */
.cta-action {
  margin-bottom: 0;
}

.action-title {
  font-size: 2.25rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 16px;
  line-height: 1.2;
}

.action-description {
  font-size: 1.125rem;
  color: #666;
  margin-bottom: 40px;
  line-height: 1.6;
  max-width: 500px;
  margin-left: auto;
  margin-right: auto;
}

.action-buttons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-bottom: 48px;
  flex-wrap: wrap;
}

/* FAQ CTA */
.faq-cta {
  display: flex;
  align-items: center;
  margin-top: 60px;
  background: linear-gradient(to left, #6b7280 25%, #333 75%);
  border-radius: 20px;
  text-align: center;
  position: relative;
  overflow: hidden;
  margin-bottom: 5rem;
}

.faq-cta-card .cta-description {
  text-align: left;
  font-size: 1.1rem;
  color: #1b1b1b;
}

.faq-cta .cta-actions {
  justify-content: left;
}

.faq-cta-card {
  padding: 15px 0px 50px 35px;
}

.faq-cta img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Background Elements */
.cta-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-shape {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg,
      rgba(0, 112, 243, 0.1) 0%,
      rgba(121, 40, 202, 0.1) 100%);
  animation: floatShape 8s ease-in-out infinite;
}

.shape-1 {
  width: 120px;
  height: 120px;
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.shape-2 {
  width: 80px;
  height: 80px;
  top: 60%;
  right: 10%;
  animation-delay: 2s;
}

.shape-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 15%;
  animation-delay: 4s;
}

@keyframes floatShape {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  50% {
    transform: translateY(-20px) rotate(180deg);
  }
}

/* CTA Responsive Design */
@media (max-width: 768px) {
  .modern-cta-section {
    padding: 96px 0;
  }

  .cta-header {
    margin-bottom: 64px;
  }

  .modern-cta-section .cta-title {
    font-size: 2.5rem;
  }

  .modern-cta-section .cta-subtitle {
    font-size: 1.125rem;
  }

  .cta-stats {
    margin-bottom: 64px;
  }

  .stats-showcase {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .stats-showcase .stat-item {
    padding: 24px 20px;
  }

  .stats-showcase .stat-icon {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  .stats-showcase .stat-number {
    font-size: 2rem;
  }

  .action-title {
    font-size: 1.875rem;
  }

  .action-description {
    font-size: 1rem;
  }

  .action-buttons {
    flex-direction: column;
    align-items: center;
  }

  .trust-indicators {
    gap: 24px;
  }

  .trust-item {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .modern-cta-section {
    padding: 80px 0;
  }

  .modern-cta-section .cta-title {
    font-size: 2rem;
  }

  .modern-cta-section .cta-subtitle {
    font-size: 1rem;
  }

  .action-title {
    font-size: 1.5rem;
  }

  .trust-indicators {
    flex-direction: column;
    gap: 16px;
  }
}

/* Background Elements */
.differentiators-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.differentiators-bg .floating-element {
  position: absolute;
  border-radius: 50%;
  background: linear-gradient(135deg,
      rgba(0, 112, 243, 0.08) 0%,
      rgba(121, 40, 202, 0.08) 100%);
  animation: differentiatorFloat 12s ease-in-out infinite;
}

.differentiators-bg .element-1 {
  width: 160px;
  height: 160px;
  top: 15%;
  left: -80px;
  animation-delay: 0s;
}

.differentiators-bg .element-2 {
  width: 120px;
  height: 120px;
  top: 50%;
  right: -60px;
  animation-delay: 4s;
}

.differentiators-bg .element-3 {
  width: 100px;
  height: 100px;
  bottom: 20%;
  left: 10%;
  animation-delay: 8s;
}

@keyframes differentiatorFloat {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  33% {
    transform: translateY(-20px) rotate(120deg);
  }

  66% {
    transform: translateY(10px) rotate(240deg);
  }
}

/* ===== Modern FAQ Section ===== */
.modern-faq-section {
  position: relative;
  overflow: hidden;
}

.modern-faq-section .section-header {
  margin-bottom: 60px;
}

/* FAQ Categories */
.faq-categories {
  margin-bottom: 50px;
}

.category-tabs {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

.category-tab,
.category-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.6);
  color: #000;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.category-tab:hover,
.category-item:hover {
  background: rgb(255 255 255 / 78%);
  /* border-color: rgb(7 7 7 / 20%); */
}

.category-tab.active,
.category-item.active {
  background: linear-gradient(45deg, #000, #000);
  border-color: transparent;
  color: #fff;
  position: relative;
}

.faq-categories .category-tab.active {
  border: 1px solid transparent;
  border-radius: 50px;
}

.category-item.active::after {
  content: " ";
  position: absolute;
  display: inline-block;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
  border-top-color: #000000;
  border-width: 15px;
  margin-left: -15px;
  top: 100%;
  left: 50%;
}

.category-tab i,
.category-item i {
  font-size: 0.9rem;
}

/* FAQ Content */
.faq-content {
  margin-bottom: 60px;
}

.faq-category-content {
  display: none;
  animation: fadeInUp 0.5s ease;
}

.faq-category-content.active {
  display: block;
}

.faq-item {
  margin-bottom: 16px;
  background: white;
  border-radius: 12px;
  border: 1px solid #e1e5e9;
  overflow: hidden;
  transition: all 0.3s ease;
}

.faq-item:hover {
  border-color: #0070f3;
  box-shadow: 0 4px 25px rgba(0, 112, 243, 0.1);
}

.faq-item.active {
  border-color: #0070f3;
  box-shadow: 0 8px 30px rgba(0, 112, 243, 0.15);
}

.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  cursor: pointer;
  user-select: none;
  transition: all 0.3s ease;
}

.faq-item.active .faq-question {
  border-bottom: 1px solid #e1e5e9;
}

.question-text {
  font-size: 1rem;
  font-weight: 500;
  color: #1a1a1a;
  margin: 0;
  line-height: 1.4;
  flex: 1;
  padding-right: 20px;
}

.question-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #f8f9fa;
  border: 1px solid #e1e5e9;
  transition: all 0.3s ease;
}

.question-icon i {
  font-size: 14px;
  color: #666;
  transition: all 0.3s ease;
}

.faq-item.active .question-icon {
  background: #333;
  border-color: #333;
  transform: rotate(45deg);
}

.faq-item.active .question-icon i {
  color: white;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.faq-item.active .faq-answer {
  max-height: 1000px;
}

.answer-content {
  padding: 15px 20px 20px;
  color: #666;
  line-height: 1.6;
}

.answer-content ul {
  margin-left: 15px;
}

.answer-content ul li {
  font-size: 0.9rem;
}

.answer-content p,
.answer-content h4 {
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.answer-content p:last-child {
  margin-bottom: 0;
}

.support-levels h4 {
  font-size: 1rem;
  margin-top: 15px;
  margin-bottom: 5px;
}

.support-levels ul {
  list-style: auto;
  margin-left: 20px;
  font-size: 0.9rem;
}

.migration-feature {
  font-size: 0.9rem;
}

/* Answer Highlights */
.answer-highlights {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
}

/* Answer Features Grid */
.answer-features {
  margin-top: 20px;
}

.feature-item span {
  font-size: 1rem;
  font-weight: 500;
}

/* Pros and Cons Grid */
.pros-cons-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 20px;
}

.pros-section h4,
.cons-section h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
  color: #1a1a1a;
}

.pros-section h4 i {
  color: #22c55e;
}

.cons-section h4 i {
  color: #f59e0b;
}

.pros-section ul,
.cons-section ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.pros-section li,
.cons-section li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.pros-section li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: bold;
}

.cons-section li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: #f59e0b;
}

/* Setup Timeline */
.setup-timeline {
  margin: 20px 0;
}

.timeline-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0px;
  border-bottom: 1px solid #f1f3f4;
}

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

.timeline-item i {
  font-size: 1.25rem;
  color: #fff;
  width: 20px;
  text-align: center;
}

.timeline-item span {
  font-size: 0.9rem;
  color: #666;
}

.dns-link {
  color: #0070f3;
  text-decoration: none;
  font-weight: 500;
}

.dns-link:hover {
  text-decoration: underline;
}

/* Plan Limits */
.plan-limits {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}

.limit-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e1e5e9;
}

.limit-value {
  font-weight: 600;
  color: #0070f3;
}

/* SSL Benefits */
.ssl-benefits {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 20px;
}

.benefit-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 8px 10px 8px;
  background: rgb(141 141 141 / 10%);
  border-radius: 6px;
  font-size: 0.9rem;
}

.benefit-item i {
  font-size: 0.75rem;
  background: #000;
  padding: 8px;
  border-radius: 5px;
  color: #fff;
  height: 25px;
  width: 25px;
}

/* Uptime Stats */
.uptime-stats {
  display: flex;
  gap: 24px;
  margin: 20px 0;
  flex-wrap: wrap;
}

.status-link {
  color: #0070f3;
  text-decoration: none;
  font-weight: 500;
}

.status-link:hover {
  text-decoration: underline;
}

/* Support Channels */
.support-channels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.channel-item {
  padding: 16px;
  background: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e1e5e9;
  text-align: center;
  transition: all 0.3s ease;
}

.channel-item span {
  display: block;
  font-weight: 500;
  color: #1a1a1a;
  margin-bottom: 4px;
}

.channel-item small {
  font-size: 0.8rem;
  line-height: 1;
}

/* Payment Options */
.payment-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 20px;
}

.payment-option {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 12px;
  border: 2px solid #e1e5e9;
  transition: all 0.3s ease;
}

.payment-option:hover {
  border-color: #0070f3;
  background: rgba(0, 112, 243, 0.05);
}

.payment-option.recommended {
  border-color: #0070f3;
  background: rgba(0, 112, 243, 0.05);
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.option-name {
  font-weight: 600;
  color: #1a1a1a;
}

.option-badge {
  padding: 4px 8px;
  background: #0070f3;
  color: white;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
}

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

.payment-option li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 5px;
  font-size: 0.9rem;
  color: #666;
}

.payment-option li::before {
  content: ">";
  position: absolute;
  left: 0;
  color: #22c55e;
  font-weight: bold;
}

/* FAQ Background Elements */
.faq-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
}

.floating-question-element {
  position: absolute;
  opacity: 0.05;
  animation: floatQuestion 25s ease-in-out infinite;
  z-index: 1;
}

.floating-question-element.element-1 {
  top: 15%;
  left: 8%;
  animation-delay: 0s;
}

.floating-question-element.element-2 {
  top: 50%;
  right: 10%;
  animation-delay: 8s;
}

.floating-question-element.element-3 {
  bottom: 20%;
  left: 15%;
  animation-delay: 16s;
}

.floating-question-element i {
  font-size: 60px;
  color: #0070f3;
}

@keyframes floatQuestion {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
  }

  33% {
    transform: translateY(-30px) rotate(5deg);
  }

  66% {
    transform: translateY(15px) rotate(-3deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-faq-section {
    padding: 30px 0;
  }

  .modern-faq-section .section-header {
    margin-bottom: 40px;
  }

  .faq-cta {
    display: block;
    padding: 0 1rem;
    border-radius: 0;
  }

  .category-tab {
    padding: 10px 16px;
    font-size: 13px;
  }

  .faq-question {
    padding: 20px;
  }

  .answer-content {
    padding: 0 20px 20px;
  }

  .pros-cons-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-grid {
    grid-template-columns: 1fr;
  }

  .uptime-stats {
    justify-content: center;
  }

  .support-channels {
    grid-template-columns: 1fr;
  }

  .payment-options {
    grid-template-columns: 1fr;
  }

  .faq-cta-card {
    padding: 20px 10px;
  }

  .cta-title {
    font-size: 24px;
  }

  .cta-actions {
    flex-direction: column;
    align-items: center;
  }

  .floating-question-element i {
    font-size: 40px;
  }
}

/* ===== Partnership Announcement Section ===== */
.partnership-announcement {
  background: linear-gradient(135deg, rgb(4 4 4 / 5%) 0%, rgb(2 2 2 / 5%) 100%);
  border-radius: 20px;
  padding: 45px 20px;
  position: relative;
  overflow: hidden;
}

.partnership-announcement::before {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgb(7 7 7 / 10%) 0%, transparent 70%);
  animation: partnershipPulse 8s ease-in-out infinite;
}

.partnership-container {
  position: relative;
  z-index: 2;
}

.partnership-header {
  margin-bottom: 40px;
}

.partnership-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 40px;
  border: 1px solid rgb(132 131 131 / 20%);
  transition: all 0.3s ease;
}

.partnership-logos {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 30px;
  gap: 30px;
}

.logo-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.partner-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  padding: 10px;
  background: #fff;
  border-radius: 15px;
  border: 1px solid rgba(0, 112, 243, 0.1);
}

.zordo-logo-placeholder {
  width: 80px;
  height: 80px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 15px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  text-align: center;
}

.zordo-logo-placeholder .logo-text {
  font-size: 18px;
  font-weight: 700;
}

.zordo-logo-placeholder small {
  font-size: 10px;
  opacity: 0.9;
}

.logo-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
  text-align: center;
}

.partnership-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: var(--bg-inverse);
  border-radius: 50%;
  color: white;
  font-size: 16px;
  animation: connectPulse 2s ease-in-out infinite;
}

.partnership-description h4 {
  font-size: 1.25rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 15px;
  text-align: center;
}

.partnership-description p {
  font-size: 0.9rem;
}

.partnership-benefits {
  margin-bottom: 30px;
}

.benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.benefit-grid .benefit-item {
  padding: 5px 20px 10px;
}

.benefit-content h5 {
  font-size: 0.95rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 0;
  margin-top: 10px;
}

.benefit-content p {
  font-size: 0.85rem;
  color: #666;
  margin: 0;
  line-height: 1.4;
}

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

.partnership-cta .btn-modern {
  min-width: 200px;
}

/* Partnership Animations */
@keyframes partnershipPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.3;
  }

  50% {
    transform: scale(1.1);
    opacity: 0.1;
  }
}

@keyframes connectPulse {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(0, 112, 243, 0.4);
  }

  50% {
    transform: scale(1.05);
    box-shadow: 0 0 0 10px rgba(0, 112, 243, 0);
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .partnership-card {
    padding: 30px 20px;
  }

  .partnership-logos {
    flex-direction: column;
    gap: 20px;
  }

  .partnership-connector {
    transform: rotate(90deg);
  }

  .benefit-grid {
    grid-template-columns: 1fr;
  }

  .partnership-cta {
    flex-direction: column;
    align-items: center;
  }

  .partnership-cta .btn-modern {
    min-width: 250px;
  }
}

/* ===== Cloud Partners Section ===== */
.cloud-partners-section {
  position: relative;
  overflow: hidden;
  padding: 80px 0;
}

.cloud-partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 30px;
  max-width: 1200px;
  margin: 0 auto 50px;
  padding: 0 20px;
}

.cloud-partner-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.cloud-partner-card:hover::before {
  transform: scaleX(1);
}

.cloud-partner-card.featured {
  border-color: #0070f3;
}

.cloud-partner-card.featured::before {
  transform: scaleX(1);
}

.partner-logo-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
}

.partner-logo-bg {
  width: 100px;
  height: 100px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.partner-logo-bg img {
  max-width: 95px;
}

.partner-info {
  margin-top: 20px;
}

.partner-name {
  font-size: 1.25rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 12px;
}

.partner-description {
  font-size: 0.9rem;
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  min-height: 48px;
}

.partner-badges {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

.partner-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: #f0f9ff;
  border: 1px solid rgba(0, 112, 243, 0.2);
  border-radius: 20px;
  font-size: 0.85rem;
  color: #0070f3;
  font-weight: 500;
}

.partner-badge i {
  font-size: 0.75rem;
}

.cloud-partners-benefits .benefit-item i {
  font-size: 1.1rem;
  color: #0070f3;
}

/* Cloud Partners Responsive */
@media (max-width: 768px) {
  .cloud-partners-section {
    padding: 50px 0;
  }

  .cloud-partners-grid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 15px;
  }

  .cloud-partner-card {
    padding: 25px 20px;
  }

  .partner-logo-wrapper {
    height: 100px;
  }

  .partner-logo-bg {
    width: 80px;
    height: 80px;
  }

  .partner-logo-text {
    font-size: 1.5rem;
  }

  .partner-name {
    font-size: 1.1rem;
  }

  .partner-description {
    font-size: 0.85rem;
    min-height: auto;
  }

  .cloud-partners-benefits {
    flex-direction: column;
    gap: 20px;
    padding: 20px;
  }

  .cloud-partners-benefits .benefit-item {
    font-size: 0.9rem;
  }
}

/* ===== Modern Footer ===== */
.modern-footer {
  background: linear-gradient(135deg, #121212 0%, #121212 50%, #121212 100%);
  color: #ffffff;
  position: relative;
  overflow: hidden;
  padding: 25px 0 0;
}

.modern-footer::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
      transparent,
      #0070f3,
      #7928ca,
      transparent);
}

/* Footer Main Content */
.footer-main {
  padding-bottom: 15px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.footer-section {
  margin-bottom: 25px;
}

.footer-logo {
  margin-bottom: 20px;
}

.footer-logo img {
  height: 50px;
}

.brand-tagline {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
  margin: 0;
  font-weight: 500;
}

.company-description {
  font-size: 0.9rem;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 30px;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.8);
}

.contact-item i {
  width: 18px;
  font-size: 14px;
}

.contact-item .contact-link {
  color: #fff;
}

.contact-link:hover {
  color: #0070f3;
  text-decoration: none;
}

.contact-item small {
  color: rgba(255, 255, 255, 0.6);
  font-size: 12px;
  margin-left: 8px;
}

/* Footer Titles */
.footer-title {
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 0;
  position: relative;
  padding-bottom: 8px;
}

.footer-title::after {
  content: "";
  /* position: absolute; */
  /* bottom: 0; */
  /* left: 0; */
  /* width: 30px; */
  /* height: 2px; */
  /* background: linear-gradient(90deg, #0070f3, #7928ca); */
  /* border-radius: 2px; */
}

/* Footer Links */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.footer-links li {
  position: relative;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  display: inline-block;
  padding: 2px 0;
}

.footer-links a:hover {
  text-decoration: none;
  transform: translateX(4px);
}

.link-badge {
  display: inline-block;
  background: var(--gradient-blue);
  color: white;
  font-size: 10px;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
  font-weight: 500;
}

/* Community Initiative */
.community-initiative {
  margin-bottom: 30px;
}

.initiative-header .initiative-logo {
  filter: brightness(0.5);
}

.initiative-header h5 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 12px;
  font-weight: 500;
}

.initiative-link {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-decoration: none;
  transition: all 0.3s ease;
}

.initiative-link:hover {
  color: #0070f3;
  text-decoration: none;
  transform: translateX(4px);
}

/* Legal Links */
.legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-bottom: 30px;
}

.legal-link {
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  font-size: 0.9rem;
  transition: color 0.3s ease;
  position: relative;
}

.legal-link:hover {
  color: #0070f3;
  text-decoration: none;
}

.legal-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #0070f3;
  transition: width 0.3s ease;
}

.legal-link:hover::after {
  width: 100%;
}

/* Social Media */
.social-media h5 {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 15px;
  font-weight: 500;
}

.social-links {
  display: flex;
  gap: 15px;
}

.social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.social-link:hover {
  transform: translateY(-2px);
  text-decoration: none;
}

.social-link.facebook:hover {
  background: #1877f2;
  color: white;
}

.social-link.twitter:hover {
  background: #1da1f2;
  color: white;
}

.social-link.linkedin:hover {
  background: #0077b5;
  color: white;
}

.social-link.youtube:hover {
  background: #ff0000;
  color: white;
}

/* Trust Badges */
.trust-badges {
  padding: 15px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.badges-container {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  gap: 40px;
}

.badge-item {
  display: flex;
  align-items: center;
  gap: 15px;
  min-width: 200px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 15px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.badge-item:hover {
  color: #333;
}

.badge-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 50px;
  background: var(--gradient-black);
  border-radius: 50%;
  color: white;
  font-size: 20px;
}

.badge-content {
  display: flex;
  flex-direction: column;
}

.badge-value {
  font-size: 1rem;
  font-weight: 700;
  color: #575757;
  line-height: 1.2;
}

.badge-label {
  font-size: 0.9rem;
  color: #575757;
  font-weight: 500;
}

/* Association Section */
.association-section {
  padding-top: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.association-container {
  text-align: center;
}

.association-title {
  font-size: 0.9rem;
  color: #575757;
  margin-top: 20px;
  margin-bottom: 5px;
  font-weight: 500;
}

.association-image {
  max-height: 50px;
  max-width: 100%;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: contrast(0.25);
}

.association-image:hover {
  opacity: 1;
}

.association-image.partners {
  transform: rotate(1deg);
}

/* Footer Bottom */
.footer-bottom {
  padding: 30px 0;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.copyright {
  font-size: 0.9rem;
  color: #575757;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.footer-stats {
  display: flex;
  align-items: center;
  gap: 15px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.6);
}

.stat-separator {
  color: rgba(255, 255, 255, 0.4);
}

/* Background Elements */
.footer-bg-elements {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.footer-bg-elements .floating-element {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle,
      rgba(0, 112, 243, 0.1) 0%,
      transparent 70%);
  border-radius: 50%;
  animation: floatFooter 8s ease-in-out infinite;
}

.footer-bg-elements .element-1 {
  top: 10%;
  left: 10%;
  animation-delay: 0s;
}

.footer-bg-elements .element-2 {
  top: 60%;
  right: 15%;
  animation-delay: -2s;
}

.footer-bg-elements .element-3 {
  bottom: 20%;
  left: 20%;
  animation-delay: -4s;
}

@keyframes floatFooter {

  0%,
  100% {
    transform: translateY(0px) scale(1);
    opacity: 0.3;
  }

  50% {
    transform: translateY(-20px) scale(1.1);
    opacity: 0.1;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .modern-footer {
    padding: 60px 0 0;
  }

  .footer-main {
    padding-bottom: 40px;
  }

  .footer-section {
    margin-bottom: 30px;
  }

  .badges-container {
    flex-direction: column;
    gap: 20px;
    text-align: center;
  }

  .badge-item {
    min-width: 100%;
    justify-content: center;
  }

  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .legal-links {
    flex-direction: column;
    gap: 15px;
  }

  .social-links {
    justify-content: center;
  }

  .footer-stats {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 480px) {
  .brand-name {
    font-size: 28px;
  }

  .footer-title {
    font-size: 16px;
  }

  .contact-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    display: inline-block;
    padding: 0;
  }

  .badge-item {
    padding: 0;
  }

  .badge-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .badge-value {
    font-size: 20px;
  }
}

/* ===== Innovative Workflow Container ===== */
.innovative-workflow-container {
  position: relative;
  padding: 30px 0;
  border-radius: 20px;
  overflow: hidden;
}

.innovative-workflow-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: workflowPulse 6s ease-in-out infinite;
}

/* Workflow Steps */

.step-card {
  position: relative;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 20px;
  padding: 20px 15px;
  border: 1px solid rgb(9 9 9 / 20%);
  transition: all 0.4s ease;
  cursor: pointer;
  overflow: hidden;
}

.step-card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  border-color: #333;
}

.step-glow {
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle,
      rgba(0, 112, 243, 0.1) 0%,
      transparent 50%);
  opacity: 0;
  transition: opacity 0.4s ease;
}

.step-glow.active {
  opacity: 1;
  animation: activeGlow 2s ease-in-out infinite;
}

.step-icon-container {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.step-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, #3f3f40 0%, #383839 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  color: white;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}

.step-icon::before {
  content: "";
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: var(--gradient-black);
  border-radius: 50%;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.workflow-step.active .step-icon::before {
  opacity: 1;
  animation: iconPulse 1.5s ease-in-out infinite;
}

.step-status {
  position: absolute;
  top: -5px;
  right: -5px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  z-index: 3;
}

.step-status.completed {
  background: #10b981;
  color: white;
}

.step-status.active {
  background: #0070f3;
  color: white;
}

.step-status.pending {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid #e5e7eb;
}

.loading-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid white;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.pending-dot {
  width: 8px;
  height: 8px;
  background: #9ca3af;
  border-radius: 50%;
  animation: pendingPulse 2s ease-in-out infinite;
}

.step-particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

/* Connection Network */
.connection-network {
  position: absolute;
  top: 35%;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
  transform: translateY(-50%);
}

.network-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, #7928ca, #0070f3, transparent);
  border-radius: 2px;
  opacity: 0.6;
}

.network-line.line-1 {
  left: 12%;
  width: 20%;
  animation: networkFlow 3s ease-in-out infinite;
}

.network-line.line-2 {
  left: 40%;
  width: 20%;
  animation: networkFlow 3s ease-in-out infinite 1s;
}

.network-line.line-3 {
  left: 70%;
  width: 20%;
  animation: networkFlow 3s ease-in-out infinite 2s;
}

.data-packet.packet-1 {
  animation-delay: 0s;
}

.data-packet.packet-2 {
  animation-delay: 0.5s;
}

.data-packet.packet-3 {
  animation-delay: 1s;
}

.data-packet.packet-4 {
  animation-delay: 1.5s;
}

.data-packet.packet-5 {
  animation-delay: 0.3s;
}

.data-packet.packet-6 {
  animation-delay: 0.8s;
}

.network-pulse {
  position: absolute;
  top: -10px;
  width: 20px;
  height: 20px;
  border: 2px solid #f59e0b;
  border-radius: 50%;
  animation: networkPulse 2s ease-in-out infinite;
}

.network-pulse.pulse-1 {
  left: 22%;
  animation-delay: 0s;
}

.network-pulse.pulse-2 {
  left: 50%;
  animation-delay: 0.7s;
}

.network-pulse.pulse-3 {
  left: 78%;
  animation-delay: 1.4s;
}

/* Old Stack */
.info-icon {
  min-width: 42px;
  padding-right: 10px;
  float: left;
  margin-top: 20px;
}

.media-body h4 {
  font-size: 1.35rem;
}

.media-body p {
  color: #fff;
  font-size: 1.05rem;
  line-height: 1.5rem;
}

.heading-title {
  font-size: 2.5rem;
  margin: 1rem 0;
  font-weight: 700;
}

/* Deployment Stats */
.deployment-stats {
  display: flex;
  justify-content: space-around;
  padding: 15px;
  background: rgba(255, 255, 255, 0.05);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #ffffff;
  text-align: center;
}

.stat-value {
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  line-height: 1.2;
}

/* Animations */
@keyframes workflowPulse {

  0%,
  100% {
    opacity: 0.3;
    transform: scale(1);
  }

  50% {
    opacity: 0.1;
    transform: scale(1.05);
  }
}

@keyframes activeGlow {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

@keyframes iconPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.8;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

@keyframes pendingPulse {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes particleFloat {

  0%,
  100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0.3;
  }

  50% {
    transform: translateY(-10px) rotate(180deg);
    opacity: 0.8;
  }
}

@keyframes networkFlow {
  0% {
    opacity: 0.3;
    transform: scaleX(0);
  }

  50% {
    opacity: 0.8;
    transform: scaleX(1);
  }

  100% {
    opacity: 0.3;
    transform: scaleX(0);
  }
}

@keyframes packetMove {
  0% {
    left: 0%;
    opacity: 0;
  }

  10% {
    opacity: 1;
  }

  90% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes networkPulse {
  0% {
    transform: scale(0.8);
    opacity: 1;
  }

  100% {
    transform: scale(2);
    opacity: 0;
  }
}

@keyframes statusBlink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0.3;
  }
}

@keyframes cursorBlink {

  0%,
  50% {
    opacity: 1;
  }

  51%,
  100% {
    opacity: 0;
  }
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .innovative-workflow-container {
    padding: 40px 0;
    margin: 40px 0;
  }

  .workflow-step {
    max-width: 100%;
    margin: 0;
  }

  .connection-network {
    display: none;
  }

  .deployment-stats {
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
}

@media (max-width: 480px) {
  .step-card {
    padding: 20px 15px;
    /* display: inline-block; */
  }

  .step-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .step-title {
    font-size: 16px;
  }

  .step-description {
    font-size: 13px;
  }

  .terminal-content {
    padding: 15px;
    font-size: 12px;
  }

  .terminal-header {
    padding: 10px 15px;
  }

  .stat-icon {
    width: 35px;
    height: 35px;
    font-size: 1rem;
    margin: auto;
  }

  .stat-value {
    font-size: 16px;
  }
}

/* Enhanced Features Flow Visualizations */

.feature-highlights {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 1rem;
}

.backup-card .icon-base {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.email-card .icon-base {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  color: white;
}

/* Animation Keyframes */
@keyframes arrowPulse {

  0%,
  100% {
    opacity: 0.6;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.1);
  }
}

/* Responsive Design */
@media (max-width: 768px) {

  .backup-flow-visualization,
  .email-flow-visualization {
    flex-direction: row;
    gap: 1rem;
  }

  .flow-connection-animated {
    transform: rotate(90deg);
  }

  .connection-line.animated {
    width: 40px;
  }

  .feature-highlights {
    grid-template-columns: 1fr;
  }

  .step-node {
    width: 40px;
    height: 40px;
    font-size: 14px;
  }
}

@media (max-width: 480px) {
  .feature-flow-container {
    margin-bottom: 1rem;
  }

  .backup-flow-visualization,
  .email-flow-visualization {
    padding: 0.5rem;
    border: none;
  }

  .step-label {
    font-size: 10px;
  }
}

/* Enhanced cPanel Hosting Sections - Galaxy Background */
.enhanced-cpanel-section {
  position: relative;
  overflow: hidden;
  background: radial-gradient(ellipse at center,
      #0a0a0a 0%,
      #000000 70%,
      #000000 100%);
}

.enhanced-cpanel-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(2px 2px at 20px 30px, #eee, transparent),
    radial-gradient(2px 2px at 40px 70px,
      rgba(255, 255, 255, 0.8),
      transparent),
    radial-gradient(1px 1px at 90px 40px, #fff, transparent),
    radial-gradient(1px 1px at 130px 80px,
      rgba(255, 255, 255, 0.6),
      transparent),
    radial-gradient(2px 2px at 160px 30px, #ddd, transparent),
    radial-gradient(1px 1px at 200px 60px, #fff, transparent),
    radial-gradient(1px 1px at 240px 20px,
      rgba(255, 255, 255, 0.7),
      transparent),
    radial-gradient(2px 2px at 280px 90px, #eee, transparent),
    radial-gradient(1px 1px at 320px 50px, #fff, transparent),
    radial-gradient(1px 1px at 360px 10px,
      rgba(255, 255, 255, 0.5),
      transparent);
  background-repeat: repeat;
  background-size: 400px 400px;
  animation: twinkle 20s linear infinite;
  pointer-events: none;
}

.enhanced-cpanel-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(ellipse at 20% 30%,
      rgba(138, 43, 226, 0.15) 0%,
      transparent 50%),
    radial-gradient(ellipse at 80% 70%,
      rgba(0, 112, 243, 0.1) 0%,
      transparent 50%),
    radial-gradient(ellipse at 40% 80%,
      rgba(139, 92, 246, 0.08) 0%,
      transparent 50%);
  pointer-events: none;
}

.enhanced-cpanel-section .section-header {
  position: relative;
  z-index: 3;
}

.enhanced-cpanel-section .section-title {
  color: #ffffff !important;
}

.enhanced-cpanel-section .section-subtitle {
  color: rgba(255, 255, 255, 0.8) !important;
}

.enhanced-cpanel-section .badge-text {
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  backdrop-filter: blur(10px);
}

.enhanced-differentiator-card {
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 5px;
  margin-bottom: 32px;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
  backdrop-filter: blur(20px);
  background: transparent;
  z-index: 9;
}

.enhanced-differentiator-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(0, 112, 243, 0.03) 0%,
      rgba(139, 92, 246, 0.03) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.enhanced-differentiator-card:hover::before {
  opacity: 1;
}

.enhanced-differentiator-card>* {
  position: relative;
  z-index: 2;
}

.enhanced-differentiator-title {
  font-size: 1.35rem;
  font-weight: 700;
  margin-top: 1.5rem;
  margin-bottom: 1rem;
  color: #fff;
  line-height: 1.3;
  padding: 0 2rem;
}

.enhanced-differentiator-description {
  font-size: 1rem;
  color: #d8d8d8;
  line-height: 1.6;
  margin-bottom: 1.5rem;
  padding: 0 2rem;
}

.enhanced-feature-benefits {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  padding: 0 2rem 1.5rem;
}

.enhanced-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-size: 0.9rem;
  color: #fff;
}

.enhanced-feature-item i {
  color: #10b981;
  font-size: 1rem;
  width: 16px;
  text-align: center;
}

.enhanced-stats-container {
  z-index: 9;
  position: relative;
}

.enhanced-stats-container .stats-container-base {
  background: transparent;
  margin-top: 2rem;
}

.enhanced-stat-item {
  text-align: center;
  padding: 0.5rem;
  transition: all 0.3s ease;
  border-radius: 12px;
}

.enhanced-stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  background: linear-gradient(135deg, #fffbf3 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  line-height: 1;
  margin-bottom: 10px;
}

.enhanced-stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Galaxy Animations */
@keyframes twinkle {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.3;
  }
}

@keyframes orbit1 {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateX(80px) translateY(-60px) rotate(90deg);
  }

  50% {
    transform: translateX(120px) translateY(0px) rotate(180deg);
  }

  75% {
    transform: translateX(80px) translateY(60px) rotate(270deg);
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg);
  }
}

@keyframes orbit2 {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateX(-60px) translateY(-40px) rotate(-90deg);
  }

  50% {
    transform: translateX(-100px) translateY(0px) rotate(-180deg);
  }

  75% {
    transform: translateX(-60px) translateY(40px) rotate(-270deg);
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(-360deg);
  }
}

@keyframes orbit3 {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateX(-50px) translateY(-70px) rotate(90deg);
  }

  50% {
    transform: translateX(-100px) translateY(0px) rotate(180deg);
  }

  75% {
    transform: translateX(-50px) translateY(70px) rotate(270deg);
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg);
  }
}

@keyframes orbit4 {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateX(50px) translateY(-80px) rotate(90deg);
  }

  50% {
    transform: translateX(90px) translateY(0px) rotate(180deg);
  }

  75% {
    transform: translateX(50px) translateY(80px) rotate(270deg);
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg);
  }
}

@keyframes orbit5 {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateX(70px) translateY(-50px) rotate(90deg);
  }

  50% {
    transform: translateX(100px) translateY(0px) rotate(180deg);
  }

  75% {
    transform: translateX(70px) translateY(50px) rotate(270deg);
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(360deg);
  }
}

@keyframes orbit6 {
  0% {
    transform: translateX(0px) translateY(0px) rotate(0deg);
  }

  25% {
    transform: translateX(-40px) translateY(-60px) rotate(-90deg);
  }

  50% {
    transform: translateX(-70px) translateY(0px) rotate(-180deg);
  }

  75% {
    transform: translateX(-40px) translateY(60px) rotate(-270deg);
  }

  100% {
    transform: translateX(0px) translateY(0px) rotate(-360deg);
  }
}

@keyframes ringRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes ringRotate3D {
  0% {
    transform: translate(-50%, -50%) rotateX(60deg) rotateY(0deg) rotateZ(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotateX(60deg) rotateY(0deg) rotateZ(360deg);
  }
}

@keyframes nebulaFloat1 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  25% {
    transform: translate(30px, -20px) scale(1.1);
  }

  50% {
    transform: translate(60px, 0) scale(0.9);
  }

  75% {
    transform: translate(30px, 20px) scale(1.05);
  }
}

@keyframes nebulaFloat2 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  33% {
    transform: translate(-25px, -30px) scale(1.15);
  }

  66% {
    transform: translate(25px, -30px) scale(0.85);
  }
}

@keyframes nebulaFloat3 {

  0%,
  100% {
    transform: translate(0, 0) scale(1);
  }

  20% {
    transform: translate(-20px, 25px) scale(1.2);
  }

  40% {
    transform: translate(40px, 25px) scale(0.8);
  }

  60% {
    transform: translate(40px, -25px) scale(1.1);
  }

  80% {
    transform: translate(-20px, -25px) scale(0.9);
  }
}

/* Flow Animations */
@keyframes shimmerFlow {
  0% {
    left: -100%;
  }

  100% {
    left: 100%;
  }
}

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

  100% {
    left: 100%;
  }
}

@keyframes packetFlow {
  0% {
    left: 0;
  }

  100% {
    left: 100%;
  }
}

/* Mobile Responsiveness */
@media (max-width: 768px) {
  .enhanced-flow-visualization {
    flex-direction: row;
    gap: 0.5rem;
    padding: 1rem 0.5rem;
  }

  .enhanced-connection-line {
    transform: rotate(90deg);
    width: 3px;
    height: 40px;
    margin: 8px 0;
  }

  .enhanced-step-node {
    width: 56px;
    height: 56px;
    font-size: 1.25rem;
  }

  .enhanced-differentiator-card {
    padding: 24px 20px;
  }

  .enhanced-feature-benefits {
    grid-template-columns: 1fr;
  }

  .enhanced-stats-container {
    padding: 1.5rem 1rem;
  }

  .enhanced-stat-number {
    font-size: 1.75rem;
  }
}

@media (max-width: 480px) {
  .enhanced-differentiator-card {
    padding: 20px 16px;
  }

  .enhanced-step-node {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }

  .enhanced-step-label {
    font-size: 0.75rem;
  }

  .enhanced-differentiator-title {
    font-size: 1.25rem;
  }

  .enhanced-stat-number {
    font-size: 1.5rem;
  }
}

/* Detailed Features Content Section */
.feature-details-section {
  margin-top: 3rem;
  margin-bottom: 2rem;
}

.features-detailed-container {
  max-width: 1200px;
  margin: 0 auto;
}

.feature-detail-card {
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.detail-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.detail-icon {
  width: 50px;
  height: 50px;
  border-radius: 12px;
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 20px;
  flex-shrink: 0;
}

.backup-details .detail-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.email-details .detail-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.detail-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #171717;
  margin: 0;
  line-height: 1.3;
}

.detail-description {
  font-size: 1rem;
  color: #525252;
  line-height: 1.6;
  margin-bottom: 2rem;
}

.detail-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.detail-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1rem;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  position: relative;
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease forwards;
}

.detail-feature-item:nth-child(1) {
  animation-delay: 0.1s;
}

.detail-feature-item:nth-child(2) {
  animation-delay: 0.2s;
}

.detail-feature-item:nth-child(3) {
  animation-delay: 0.3s;
}

.detail-feature-item:nth-child(4) {
  animation-delay: 0.4s;
}

.detail-feature-item:hover {
  background: rgba(255, 255, 255, 0.9);
  transform: translateX(4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.backup-details .feature-icon-wrapper {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  color: #059669;
}

.email-details .feature-icon-wrapper {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  color: #1d4ed8;
}

.detail-feature-item:hover .feature-icon-wrapper {
  transform: scale(1.1);
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.2);
}

/* Animation for progressive reveal */
.feature-detail-card {
  opacity: 0;
  transform: translateY(30px);
  animation: revealCard 0.8s ease forwards;
}

.feature-detail-card .card-title {
  margin-top: 2rem;
}

.feature-detail-card .card-description {
  color: #d9d9d9;
}

.backup-details {
  animation-delay: 0.2s;
}

.email-details {
  animation-delay: 0.4s;
}

@keyframes revealCard {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

/* Responsive Design */
@media (max-width: 768px) {
  .feature-details-section {
    margin-top: 2rem;
  }

  .feature-detail-card {
    padding: 1.5rem;
    margin-bottom: 1.5rem;
  }

  .detail-header {
    flex-direction: column;
    text-align: center;
    gap: 0.75rem;
  }

  .detail-icon {
    width: 45px;
    height: 45px;
    font-size: 18px;
  }

  .detail-title {
    font-size: 1.25rem;
  }

  .detail-features {
    gap: 1rem;
  }

  .detail-feature-item {
    padding: 0.75rem;
  }

  .feature-icon-wrapper {
    width: 35px;
    height: 35px;
    font-size: 14px;
  }

  .feature-desc {
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .feature-detail-card {
    padding: 1rem;
  }

  .detail-title {
    font-size: 1.1rem;
  }

  .detail-description {
    font-size: 0.9rem;
  }

  .detail-feature-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0.75rem;
  }
}

/* Hosting Features Section */
.hosting-features-section {
  padding: 80px 0;
  position: relative;
  overflow: hidden;
}

.hosting-features-grid {
  margin-top: 3rem;
  margin-bottom: 3rem;
}

.hosting-feature-card {
  height: 100%;
  padding: 2rem;
  margin-bottom: 2rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  border: none;
  display: flex;
  flex-direction: column;
}

.animated-icon {
  animation: iconFloat 3s ease-in-out infinite;
}

.feature-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: #171717;
  text-align: center;
  line-height: 1.4;
}

.feature-card-description {
  color: #393939;
  font-size: 1.05rem;
  margin-bottom: 1.5rem;
  text-align: left;
  flex: 1;
}

.feature-status {
  display: flex;
  align-items: center;
  justify-content: left;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  background: rgb(30 30 30 / 10%);
  border-radius: 20px;
  font-size: 0.85rem;
  font-weight: 500;
  width: fit-content;
}

.feature-status i {
  font-size: 0.8rem;
}

/* Features Summary Section */
.features-summary-section {
  margin-top: 4rem;
  padding-top: 3rem;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.features-summary-container {
  text-align: center;
}

.summary-header {
  margin-bottom: 3rem;
}

.summary-title {
  font-size: 2rem;
  font-weight: 700;
  color: #171717;
  margin-bottom: 1rem;
}

.summary-description {
  font-size: 1.1rem;
  color: #737373;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.summary-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.summary-stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  cursor: pointer;
}

.summary-stat-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* Animations */
@keyframes iconFloat {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-5px);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .hosting-features-grid .col-lg-4 {
    margin-bottom: 1rem;
  }

  .summary-stats {
    flex-direction: column;
    gap: 1rem;
  }

  .summary-stat-item {
    justify-content: center;
  }

  .summary-title {
    font-size: 1.5rem;
  }

  .summary-description {
    font-size: 1rem;
  }
}

@media (max-width: 576px) {
  .hosting-features-section {
    padding: 60px 0;
  }

  .hosting-feature-card {
    padding: 1.5rem;
  }

  .feature-icon {
    width: 50px;
    height: 50px;
    font-size: 20px;
  }

  .feature-card-title {
    font-size: 1.1rem;
  }

  .feature-card-description {
    font-size: 0.85rem;
  }
}

.hosting-feature-card:hover::before {
  opacity: 1;
}

.feature-icon-container .feature-icon {
  margin-left: 0;
}

/* Stagger animation for cards on scroll */
.hosting-feature-card {
  opacity: 0;
  transform: translateY(20px);
  animation: fadeInUp 0.6s ease-out forwards;
}

.hosting-feature-card:nth-child(1) {
  animation-delay: 0.1s;
}

.hosting-feature-card:nth-child(2) {
  animation-delay: 0.2s;
}

.hosting-feature-card:nth-child(3) {
  animation-delay: 0.3s;
}

.hosting-feature-card:nth-child(4) {
  animation-delay: 0.4s;
}

.hosting-feature-card:nth-child(5) {
  animation-delay: 0.5s;
}

.hosting-feature-card:nth-child(6) {
  animation-delay: 0.6s;
}

.hosting-feature-card:nth-child(7) {
  animation-delay: 0.7s;
}

.hosting-feature-card:nth-child(8) {
  animation-delay: 0.8s;
}

.hosting-feature-card:nth-child(9) {
  animation-delay: 0.9s;
}

.hosting-feature-card:nth-child(10) {
  animation-delay: 1s;
}

.hosting-feature-card:nth-child(11) {
  animation-delay: 1.1s;
}

.hosting-feature-card:nth-child(12) {
  animation-delay: 1.2s;
}

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

/* Elegant Galaxy Background */
.galaxy-background {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
  opacity: 0.8;
}

/* Main Galaxy Center */
.galaxy-center {
  position: absolute;
  width: 250px;
  height: 250px;
  top: 15%;
  left: 10%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(99, 102, 241, 0.25) 0%,
      rgba(168, 85, 247, 0.18) 30%,
      rgba(236, 72, 153, 0.12) 60%,
      rgba(59, 130, 246, 0.08) 80%,
      transparent 100%);
  animation: galaxyPulse 20s ease-in-out infinite;
}

/* Distant Galaxy */
.galaxy-distant {
  position: absolute;
  width: 150px;
  height: 150px;
  top: 65%;
  right: 15%;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(34, 197, 94, 0.2) 0%,
      rgba(59, 130, 246, 0.15) 40%,
      rgba(168, 85, 247, 0.1) 70%,
      rgba(236, 72, 153, 0.05) 85%,
      transparent 100%);
  animation: galaxyPulse 30s ease-in-out infinite reverse;
}

/* Subtle Star Field */
.star-field {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.star-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.6);
  box-shadow: 0 0 4px rgba(99, 102, 241, 0.4);
  animation: starTwinkle 4s ease-in-out infinite;
}

.star-dot:nth-child(1) {
  top: 15%;
  left: 25%;
  animation-delay: 0s;
}

.star-dot:nth-child(2) {
  top: 35%;
  left: 60%;
  animation-delay: 2s;
}

.star-dot:nth-child(3) {
  top: 55%;
  left: 80%;
  animation-delay: 4s;
}

.star-dot:nth-child(4) {
  top: 75%;
  left: 40%;
  animation-delay: 1s;
}

.star-dot:nth-child(5) {
  top: 25%;
  left: 85%;
  animation-delay: 3s;
}

.star-dot:nth-child(6) {
  top: 65%;
  left: 10%;
  animation-delay: 5s;
}

/* Cosmic Dust Clouds */
.cosmic-dust {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at center,
      rgba(168, 85, 247, 0.08) 0%,
      rgba(236, 72, 153, 0.05) 40%,
      transparent 70%);
  animation: dustFloat 25s ease-in-out infinite;
}

.dust-1 {
  width: 120px;
  height: 120px;
  top: 10%;
  left: 70%;
  animation-delay: 0s;
}

.dust-2 {
  width: 80px;
  height: 80px;
  top: 45%;
  left: 30%;
  animation-delay: 10s;
}

.dust-3 {
  width: 60px;
  height: 60px;
  top: 80%;
  left: 60%;
  animation-delay: 20s;
}

/* Elegant Galaxy Animation Keyframes */
@keyframes galaxyPulse {
  0% {
    opacity: 0.7;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    opacity: 0.7;
    transform: scale(1);
  }
}

@keyframes starTwinkle {
  0% {
    opacity: 0.4;
    transform: scale(1);
  }

  50% {
    opacity: 1;
    transform: scale(1.3);
  }

  100% {
    opacity: 0.4;
    transform: scale(1);
  }
}

@keyframes dustFloat {
  0% {
    opacity: 0.6;
    transform: translateY(0px) scale(1);
  }

  50% {
    opacity: 1;
    transform: translateY(-15px) scale(1.15);
  }

  100% {
    opacity: 0.6;
    transform: translateY(0px) scale(1);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .galaxy-background {
    opacity: 0.2;
  }

  .galaxy-center {
    width: 120px;
    height: 120px;
    top: 25%;
    left: 10%;
  }

  .galaxy-distant {
    width: 60px;
    height: 60px;
    top: 70%;
    right: 15%;
  }

  .star-dot {
    opacity: 0.6;
  }

  .cosmic-dust {
    opacity: 0.5;
  }

  .dust-1 {
    width: 80px;
    height: 80px;
  }

  .dust-2 {
    width: 60px;
    height: 60px;
  }

  .dust-3 {
    width: 40px;
    height: 40px;
  }
}

@media (max-width: 480px) {
  .galaxy-background {
    opacity: 0.15;
  }

  .galaxy-center {
    width: 80px;
    height: 80px;
    top: 30%;
    left: 5%;
  }

  .galaxy-distant {
    width: 40px;
    height: 40px;
    top: 75%;
    right: 10%;
  }

  .star-dot {
    opacity: 0.4;
  }

  .cosmic-dust {
    opacity: 0.3;
  }

  .dust-1 {
    width: 60px;
    height: 60px;
  }

  .dust-2 {
    width: 40px;
    height: 40px;
  }

  .dust-3 {
    width: 30px;
    height: 30px;
  }
}

.hosting-features-section .container {
  position: relative;
  z-index: 2;
}

/* Enhanced Support Section Styles */
/* Success Metrics */
.success-metrics {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.metric-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.metric-content {
  display: flex;
  flex-direction: column;
}

/* Enhanced Contact Section */
.support-contact.enhanced {
  margin: 4rem 0;
}

.contact-section-title {
  text-align: center;
  font-size: 1.75rem;
  font-weight: 700;
  color: #171717;
  margin-bottom: 2rem;
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.contact-item.phone::before {
  background: linear-gradient(90deg, #0070f3, #00a8ff);
}

.contact-item.chat::before {
  background: linear-gradient(90deg, #7c3aed, #a855f7);
}

.contact-item.ticket::before {
  background: linear-gradient(90deg, #f59e0b, #f97316);
}

.contact-item.callback::before {
  background: linear-gradient(90deg, #059669, #10b981);
}

.contact-item:hover::before {
  transform: scaleX(1);
}

.contact-status {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  font-size: 0.875rem;
  font-weight: 500;
}

.status-indicator.online {
  background: #10b981;
}

.status-indicator.processing {
  background: #f59e0b;
}

.support-cta-container {
  max-width: 650px;
}

.cta-features {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
  position: relative;
  z-index: 2;
}

.cta-feature {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
}

.cta-feature i {
  font-size: 1rem;
  opacity: 0.9;
}

.btn.enhanced {
  padding: 1rem 2rem;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.hero-btn-secondary.enhanced:hover {
  background: white;
  color: #0070f3;
  border-color: white;
  transform: translateY(-2px);
}

.cta-trust-indicators {
  display: flex;
  justify-content: center;
  gap: 2rem;
  position: relative;
  z-index: 2;
}

@keyframes supportPacketFlow {
  0% {
    left: 0;
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    left: 100%;
    opacity: 1;
  }
}

@keyframes pulseFlow {
  0% {
    left: 0;
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }

  100% {
    left: 100%;
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes statusPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@keyframes floatCTA {

  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }

  33% {
    transform: translateY(-20px) rotate(120deg);
  }

  66% {
    transform: translateY(10px) rotate(240deg);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .success-metrics {
    flex-direction: column;
    gap: 1rem;
  }

  .support-journey-visual {
    flex-direction: column;
    gap: 1rem;
  }

  .journey-connection {
    width: 2px;
    height: 30px;
    flex-direction: column;
    margin: 0.5rem 0;
  }

  .journey-connection .connection-line {
    width: 2px;
    height: 20px;
  }

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

  .flow-layer.primary {
    flex-direction: column;
    gap: 1.5rem;
  }

  .alternative-support-paths {
    grid-template-columns: 1fr;
  }

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

  .contact-grid {
    grid-template-columns: 1fr;
  }

  .cta-features {
    flex-direction: column;
    gap: 1rem;
  }

  .cta-trust-indicators {
    flex-direction: column;
    gap: 1rem;
  }

  .cta-title {
    font-size: 1.75rem;
  }
}

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

  .support-cta-container {
    padding: 2rem 1rem;
  }

  .cta-title {
    font-size: 1.5rem;
  }
}

.node-features,
.website-features {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 15px;
}

.node-features span,
.website-features span {
  font-size: 0.9rem;
  color: #64748b;
  font-weight: 500;
}

.website-features span {
  color: #10b981;
  font-weight: 600;
}

/* Node Status */
.node-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin-bottom: 10px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  animation: statusPulse 2s ease-in-out infinite;
}

.status-dot.active {
  background: #10b981;
}

.status-dot.protected {
  background: #0070f3;
}

.node-status span {
  font-size: 12px;
  font-weight: 600;
  color: #10b981;
  text-transform: uppercase;
}

.website-node .node-status span {
  color: #0070f3;
}

/* Node Description */
.node-description {
  margin-top: 10px;
}

.node-description small {
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.4;
  font-style: italic;
}

/* Security Process Explanation */
.process-header {
  text-align: center;
  margin-bottom: 40px;
}

.process-header h4 {
  font-size: 28px;
  font-weight: 700;
  color: #0f172a;
  margin-bottom: 10px;
}

.process-header p {
  font-size: 16px;
  color: #64748b;
  margin: 0;
}

.process-steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.process-step {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  padding: 20px;
  border-radius: 16px;
  background: #f8fafc;
  transition: all 0.3s ease;
}

.process-step:hover {
  background: #e2e8f0;
  transform: translateY(-2px);
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #0070f3, #0051cc);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  flex-shrink: 0;
}

/* Security Statistics Summary */
.security-stats-summary {
  border-radius: 16px;
  padding: 25px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 30px;
}

.security-stats-summary .stat-value {
  color: #000;
}

/* Security Card Enhancements */
.security-card,
.comprehensive-feature-card {
  position: relative;
  overflow: hidden;
  background: #ffffff0d;
  border-radius: 12px;
  margin: 25px 0;
  border: 1px solid #4f4f4f;
}

.security-card .card-description,
.comprehensive-feature-card .feature-description {
  color: #5a5a5a;
}

.comprehensive-feature-card .feature-icon {
  height: auto !important;
  width: auto !important;
}

.security-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  text-align: left;
}

.indicator-light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #fbbc04;
  animation: indicatorBlink 2s ease-in-out infinite;
}

.reseller-feature-card .feature-icon {
  color: #fff;
}

.reseller-feature-card .feature-description {
  color: #d4d4d4;
}

@keyframes indicatorBlink {

  0%,
  50% {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0.3;
  }
}

.bg-white {
  background-color: #fff;
}

.bg-dark {
  background-color: #1b1b1b;
}

.bg-light {
  background-color: #f5f8fb;
}

.bg-blue {
  background-color: #4286f5;
}

.border-12 {
  border-radius: 12px;
}

.line-box {
  padding: 1.5rem;
  border-radius: 12px;
  margin-bottom: 2rem;
}

.line-box p {
  font-size: 1.1rem;
  color: #393939;
}

.feature-card-title {
  text-align: left;
}

.indicator-text {
  color: #fbbc04;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.security-features {
  margin-top: 20px;
}

.security-features .feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1rem;
  color: #c3c2c2;
  padding: 5px;
}

.security-features .feature-item i {
  font-size: 0.8rem;
}

/* Trust & Transparency Section */
.trust-transparency-section {
  border-radius: 20px;
  padding: 30px;
  margin: 35px 0;
}

.trust-title {
  text-align: center;
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 40px;
}

.trust-content {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

.trust-icon {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: #272727;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
}

.trust-details h4 {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 8px;
  color: #1e293b;
}

.trust-details p {
  color: #64748b;
  margin-bottom: 10px;
  font-size: 14px;
}

.trust-link {
  color: #0070f3;
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
}

.trust-link:hover {
  color: #0051cc;
}

.trust-badge {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: #dcfce7;
  color: #16a34a;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Security CTA Section */
.security-cta-section {
  background: linear-gradient(135deg, #0070f3, #0051cc);
  border-radius: 20px;
  padding: 50px;
  text-align: center;
  color: white;
  margin-top: 50px;
}

.security-cta-section .cta-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 15px;
}

.security-cta-section .cta-description {
  font-size: 18px;
  margin-bottom: 30px;
  opacity: 0.9;
}

/* Responsive Design */
@media (max-width: 768px) {
  .security-network-container {
    padding: 40px 20px;
  }

  .security-network-title {
    font-size: 28px;
  }

  .security-network-subtitle {
    font-size: 16px;
  }

  .security-network-flow {
    flex-direction: column;
    align-items: center;
    gap: 5px;
  }

  .network-connection {
    transform: rotate(90deg);
    margin: 15px 0;
  }

  .network-node {
    min-width: 250px;
    max-width: 300px;
  }

  .process-steps {
    grid-template-columns: 1fr;
  }

  .process-step {
    flex-direction: column;
    text-align: center;
    gap: 15px;
  }

  .security-stats-summary {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 20px;
  }

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

  .cta-actions .btn-modern {
    width: 100%;
    max-width: 300px;
  }
}

@media (max-width: 480px) {
  .security-network-container {
    padding: 30px 15px;
  }

  .security-network-title {
    font-size: 24px;
  }

  .security-network-subtitle {
    font-size: 15px;
  }

  .node-content h4 {
    font-size: 16px;
  }

  .node-features span,
  .website-features span {
    font-size: 12px;
  }

  .security-stats-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }

  .process-header h4 {
    font-size: 24px;
  }

  .process-header p {
    font-size: 14px;
  }
}

/* Feature Categories Navigation */
.feature-categories-nav {
  color: #575757;
  background: linear-gradient(to left,
      rgb(66, 133, 244) 25%,
      rgb(52, 168, 83) 75%);
  border-bottom: 1px solid #cfdeff;
}

.category-navigation {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0 20px;
}

/* Feature Category Content */
.feature-category-content {
  display: none;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.5s ease;
}

.feature-category-content.active {
  display: block;
  opacity: 1;
  transform: translateY(0);
  padding-top: 2rem;
}

/* Enhanced Feature Cards */
.enhanced-feature-card {
  background: linear-gradient(45deg, #fff, #fff);
  border-radius: 5px;
  backdrop-filter: blur(20px);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
}

.enhanced-feature-card:hover::before {
  transform: scaleX(1);
}

/* Feature Headers */
.feature-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.feature-header .feature-icon {
  margin: 0;
}

.enhanced-feature-card:hover .feature-icon {
  transform: scale(1.1) rotate(5deg);
}

.feature-badge {
  padding: 5px 12px;
  border-radius: 20px;
  background: var(--gradient-black);
  color: white;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* Feature Benefits */
.feature-benefits {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.feature-benefits h4 {
  font-size: 1.15rem;
}

/* Server Architecture Flow */
.server-architecture-flow {
  margin-bottom: 32px;
}

/* Innovation Timeline */
.innovation-timeline {
  display: grid;
  gap: 20px;
  padding: 24px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 16px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.timeline-item.active {
  opacity: 1;
}

.timeline-icon {
  width: 35px;
  height: 35px;
  border-radius: 12px;
  background: var(--gradient-black);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  transition: all 0.3s ease;
}

.timeline-item.active .timeline-icon {
  transform: scale(1.2);
  box-shadow: 0 8px 25px rgb(11 11 11 / 30%);
}

.timeline-content {
  text-align: center;
  padding-left: 20px;
}

.timeline-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.timeline-desc {
  font-size: 12px;
  color: #6b7280;
}

.timeline-connection {
  width: 40px;
  height: 2px;
  background: linear-gradient(90deg, #0070f3, #7928ca);
  border-radius: 1px;
}

/* Resource Scaling Flow */
.resource-scaling-flow {
  margin-bottom: 32px;
}

.scaling-visualization {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 24px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 16px;
}

.resource-category {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: white;
  border-radius: 12px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.resource-category:hover {
  border-color: rgba(0, 112, 243, 0.3);
}

.resource-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--bg-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  color: white;
}

.resource-label {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
  color: #374151;
}

.resource-scale {
  display: flex;
  gap: 8px;
}

.scale-step {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #e5e7eb;
  transition: all 0.3s ease;
}

.scale-step.active {
  background: var(--bg-inverse);
  transform: scale(1.2);
}

.resource-toggle {
  position: relative;
  width: 48px;
  height: 24px;
  background: #e5e7eb;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.toggle-switch {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.toggle-switch.active {
  transform: translateX(24px);
  background: var(--bg-inverse);
}

.resource-toggle:has(.toggle-switch.active) {
  background: rgba(0, 112, 243, 0.2);
}

/* Migration Process Flow */
.migration-process-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 20px;
  padding: 35px 0;
  margin-bottom: 35px;
  flex-wrap: wrap;
}

.migration-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  max-width: 200px;
}

.enhanced-feature-card:hover .migration-step .step-circle {
  transform: scale(1.1) rotate(5deg);
}

.migration-step .step-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}

.migration-step .step-content p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

.migration-connection {
  position: relative;
  width: 60px;
  height: 2px;
  background: linear-gradient(90deg, #0070f3, #7928ca);
  border-radius: 1px;
}

.migration-packet {
  position: absolute;
  top: -3px;
  left: 0;
  width: 8px;
  height: 8px;
  background: #0070f3;
  border-radius: 50%;
  animation: migrationFlow 3s ease-in-out infinite;
}

/* Migration Features Grid */
.migration-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  margin-top: 32px;
}

.migration-feature-item .feature-content h5 {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}

.migration-feature-item .feature-content p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

/* Security Layers Flow */
.security-layers-flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 32px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 20px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}

.security-layer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  text-align: center;
  transition: all 0.3s ease;
}

.layer-shield {
  width: 64px;
  height: 64px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: white;
  transition: all 0.3s ease;
  position: relative;
}

.security-layer[data-layer="1"] .layer-shield {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.security-layer[data-layer="2"] .layer-shield {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.security-layer[data-layer="3"] .layer-shield {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.security-layer[data-layer="4"] .layer-shield {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.enhanced-feature-card:hover .layer-shield {
  transform: scale(1.1);
  animation: shieldPulse 2s ease-in-out infinite;
}

.layer-content h4 {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}

.layer-content p {
  font-size: 14px;
  color: #6b7280;
}

/* list highlight */
.feature-highlights-2 {
  display: block;
}

.feature-highlights-2 .feature-item {
  font-size: 1.05rem;
  color: #333;
  background: linear-gradient(to left,
      rgb(66 133 244 / 0%) 25%,
      rgb(0 172 255 / 8%) 75%);
  padding: 7px 30px;
  margin: 15px 0;
  margin-left: 15px;
  border-radius: 8px;
}

.feature-highlights-2 .feature-item img {
  position: absolute;
  left: -15px;
  top: 0px;
  width: 40px;
}

.feature-highlights-2 .feature-item span {
  font-size: 1.05rem;
  font-weight: 400;
}

/* Security Features Grid */
.security-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-top: 32px;
}

.security-feature-item {
  display: flex;
  gap: 16px;
  padding: 20px;
  background: white;
  border-radius: 16px;
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.security-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--bg-inverse);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: white;
  flex-shrink: 0;
  margin-top: 15px;
}

.security-content h5 {
  font-size: 16px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 8px;
}

.security-content p {
  font-size: 14px;
  color: #6b7280;
  line-height: 1.4;
}

/* Features Summary Statistics */
.features-summary-stats {
  margin-top: 80px;
}

.stats-container-enhanced {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 30px;
  padding: 20px 35px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 24px;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(0, 112, 243, 0.1);
}

.stats-container-enhanced .stat-item-enhanced {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: 15px;
}

.stat-item-enhanced:hover {
  transform: translateY(-4px);
}

.stat-content {
  flex: 1;
}

/* Animations */
@keyframes speedPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.7;
  }
}

@keyframes migrationFlow {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    transform: translateX(60px);
    opacity: 0;
  }
}

@keyframes shieldPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(0, 112, 243, 0.4);
  }

  50% {
    box-shadow: 0 0 0 20px rgba(0, 112, 243, 0);
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .modern-features-included-section {
    padding: 80px 0;
  }

  .category-navigation {
    gap: 12px;
  }

  .nav-item {
    padding: 16px 20px;
    min-width: 120px;
  }

  .enhanced-feature-card {
    padding: 24px;
    margin-bottom: 24px;
  }

  .feature-title {
    font-size: 20px;
  }

  .architecture-diagram,
  .migration-process-flow,
  .security-layers-flow {
    gap: 20px;
    margin: 0;
    display: block;
  }

  .migration-connection,
  .timeline-connection {
    width: 2px;
    height: 30px;
    background: linear-gradient(180deg, #0070f3, #7928ca);
  }

  .migration-feature-grid,
  .security-features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .stats-container-enhanced {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 24px;
  }

  .stat-item-enhanced {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }

  .migration-flow {
    display: block;
  }
}

@media (max-width: 480px) {
  .category-navigation {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 2fr));
    padding: 20px;
  }

  .nav-item {
    width: 100%;
    max-width: 280px;
  }

  .enhanced-feature-card {
    padding: 20px;
  }

  .storage-comparison,
  .scaling-visualization {
    gap: 12px;
  }

  .storage-type,
  .resource-category {
    flex-wrap: wrap;
    gap: 12px;
  }

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

  .stat-number {
    font-size: 1.2rem;
  }
}

/* End of Enhanced Features Included Section */
/* ==============================================
WORDPRESS DASHBOARD STYLES
============================================== */
/* WordPress Dashboard Container */
.wordpress-dashboard-container {
  background: #f1f1f1;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  margin: 40px 0;
  border: 1px solid #e1e5e9;
  position: relative;
  min-height: 500px;
  animation: dashboardReveal 1s ease-out;
}

/* WordPress Dashboard */
.wp-dashboard {
  display: flex;
  flex-direction: column;
  min-height: 500px;
  background: #f1f1f1;
  border-radius: 16px;
  overflow: hidden;
  position: relative;
  border-top-left-radius: 0;
}

/* WordPress Header */
.wp-header {
  background: #23282d;
  color: #fff;
  padding: 15px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid #32373c;
  position: relative;
  overflow: hidden;
}

.wp-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg,
      rgba(0, 112, 243, 0.1) 0%,
      rgba(121, 40, 202, 0.1) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wordpress-dashboard-container:hover .wp-header::before {
  opacity: 1;
}

.wp-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.wp-logo i {
  width: 24px;
  height: 24px;
  background: #0073aa;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: white;
  animation: wpLogoPulse 2s ease-in-out infinite;
}

.wp-logo span {
  font-size: 16px;
  font-weight: 500;
  color: #fff;
}

.wp-user {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.wp-user span {
  font-size: 14px;
  color: #b4b9be;
}

.wp-avatar {
  width: 32px;
  height: 32px;
  background: var(--gradient-blue);
  border-radius: 50%;
  position: relative;
}

.wp-avatar::before {
  content: ">";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 16px;
}

/* WordPress Dashboard Layout */
.wp-dashboard {
  display: flex;
  flex-direction: row;
}

/* WordPress Sidebar */
.wp-sidebar {
  width: 200px;
  background: #23282d;
  border-right: 1px solid #32373c;
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  padding: 0;
}

.wp-sidebar::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(180deg,
      rgba(0, 112, 243, 0.05) 0%,
      rgba(121, 40, 202, 0.05) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.wordpress-dashboard-container:hover .wp-sidebar::before {
  opacity: 1;
}

.wp-menu-item {
  display: flex;
  text-align: left;
  padding: 10px 16px;
  color: #b4b9be;
  text-decoration: none;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  z-index: 2;
}

.wp-menu-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 0;
  background: linear-gradient(90deg, #0070f3, #7928ca);
  transition: width 0.3s ease;
}

.wp-menu-item:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  transform: translateX(4px);
}

.wp-menu-item.active {
  background: rgba(0, 112, 243, 0.1);
  color: #fff;
}

.wp-menu-item.active::before {
  width: 4px;
}

.wp-menu-item i {
  width: 20px;
  margin-right: 12px;
  text-align: center;
  font-size: 16px;
}

.wp-menu-item span {
  flex: 1;
  font-weight: 400;
}

.wp-notification {
  background: #7f7f7f;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 10px;
  font-weight: 600;
  margin-left: 8px;
  animation: badgeBounce 1s ease-in-out infinite;
}

/* WordPress Main Content */
.wp-main-content {
  flex: 1;
  background: #f1f1f1;
  padding: 24px;
  position: relative;
  overflow: hidden;
}

.wp-main-content::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 80% 20%,
      rgba(0, 112, 243, 0.03) 0%,
      transparent 50%);
  pointer-events: none;
}

/* WordPress Welcome Panel */
.wp-welcome-panel {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  border: 1px solid #e1e5e9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
  animation: panelSlideIn 0.8s ease-out;
}

.wp-welcome-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #0070f3, #7928ca);
  transform: scaleX(0);
  transition: transform 0.5s ease;
}

.wp-welcome-panel h3 {
  font-size: 18px;
  font-weight: 600;
  color: #23282d;
  margin: 0 0 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
}

.wp-welcome-panel h3::before {
  content: ">";
  font-size: 20px;
}

.wp-welcome-panel p {
  color: #666;
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 16px;
}

/* WordPress Widgets Row */
.wp-widgets-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
  margin-bottom: 24px;
  position: relative;
  z-index: 2;
}

.wp-widget {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #e1e5e9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  transition: all 0.3s ease;
  animation: widgetFadeIn 1s ease-out;
}

.wp-widget:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.wp-widget-header {
  padding: 10px 20px;
  border-bottom: 1px solid #e1e5e9;
  background: rgba(248, 250, 252, 0.8);
  display: flex;
  align-items: center;
  gap: 8px;
}

.wp-widget-header h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #23282d;
  margin: 0;
  flex: 1;
}

.wp-widget-content {
  padding: 20px;
  position: relative;
}

/* LiteSpeed Cache Widget */
.wp-widget-content .wp-stat-number {
  font-size: 1.75rem;
  font-weight: 700;
  color: #333;
  text-align: center;
  margin-bottom: 8px;
}

.wp-widget-content .wp-stat-label {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin-bottom: 16px;
}

.wp-progress-bar {
  width: 100%;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.wp-progress-fill {
  height: 100%;
  background: var(--color-purple-hover);
  border-radius: 4px;
  transition: width 2s ease;
  animation: progressPulse 2s ease-in-out infinite;
}

/* Staging Widget */
.wp-staging-status {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.staging-indicator {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #10b981;
  animation: statusBlink 2s ease-in-out infinite;
}

.staging-indicator.active {
  background: #10b981;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.2);
}

.wp-staging-status span {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.wp-staging-btn {
  background: var(--bg-inverse);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: deployPulse 2s ease-in-out infinite;
  width: 100%;
}

.wp-staging-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(121, 40, 202, 0.3);
}

/* Security Widget */
.wp-security-status {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.wp-security-status i {
  font-size: 18px;
  color: #10b981;
}

.wp-security-status span {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.wp-security-features {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.security-item {
  font-size: 13px;
  color: #666;
  display: flex;
  align-items: center;
  gap: 8px;
}

.security-item::before {
  content: ">";
  color: #10b981;
  font-weight: bold;
}

/* Performance Panel */
.wp-performance-panel {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e1e5e9;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  position: relative;
  overflow: hidden;
}

.wp-performance-panel h4 {
  font-size: 18px;
  font-weight: 600;
  color: #23282d;
  margin: 0 0 20px 0;
  text-align: center;
}

.wp-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 20px;
}

.wp-metric {
  text-align: center;
  padding: 16px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  border: 1px solid #e1e5e9;
}

.metric-trend {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  display: inline-block;
}

.metric-trend.up {
  background: rgba(16, 185, 129, 0.1);
  color: #10b981;
}

.metric-trend.stable {
  background: rgba(0, 112, 243, 0.1);
  color: #0070f3;
}

/* Floating WordPress Features */
.wp-floating-features {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.wp-feature-bubble {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(0, 112, 243, 0.2);
  border-radius: 50px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  backdrop-filter: blur(10px);
  animation: floatBubble 6s ease-in-out infinite;
}

.wp-feature-bubble i {
  color: #0070f3;
  font-size: 14px;
}

.bubble-1 {
  top: 15%;
  left: 15%;
  animation-delay: 0s;
}

.bubble-2 {
  top: 25%;
  right: 15%;
  animation-delay: 1.5s;
}

.bubble-3 {
  bottom: 25%;
  left: 20%;
  animation-delay: 3s;
}

.bubble-4 {
  bottom: 15%;
  right: 20%;
  animation-delay: 4.5s;
}

/* LiteSpeed Cache Widget */
.litespeed-widget .wp-widget-title i {
  color: #f39c12;
}

.cache-performance {
  text-align: center;
  margin-bottom: 20px;
}

.performance-circle {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: conic-gradient(#10b981 0deg 342deg, #e5e7eb 342deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  position: relative;
  animation: performanceRotate 3s ease-in-out infinite;
}

.performance-circle::before {
  content: "";
  position: absolute;
  width: 60px;
  height: 60px;
  background: #fff;
  border-radius: 50%;
}

.performance-text {
  position: absolute;
  font-size: 16px;
  font-weight: 700;
  color: #10b981;
  z-index: 2;
}

.performance-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

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

.cache-metric {
  text-align: center;
  padding: 12px;
  background: rgba(16, 185, 129, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(16, 185, 129, 0.1);
}

/* Staging Environment Widget */
.staging-widget .wp-widget-title i {
  color: #7928ca;
}

.staging-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: rgba(121, 40, 202, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(121, 40, 202, 0.1);
  margin-bottom: 16px;
}

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

.staging-icon {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #7928ca, #6366f1);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
}

.staging-details h4 {
  font-size: 14px;
  font-weight: 600;
  color: #23282d;
  margin: 0 0 4px 0;
}

.staging-details p {
  font-size: 12px;
  color: #666;
  margin: 0;
}

.staging-action {
  background: linear-gradient(135deg, #7928ca, #6366f1);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: deployPulse 2s ease-in-out infinite;
}

.staging-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(121, 40, 202, 0.3);
}

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

.staging-features li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 0;
  font-size: 13px;
  color: #666;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.staging-features li:last-child {
  border-bottom: none;
}

.staging-features li i {
  color: #10b981;
  font-size: 14px;
}

/* WordPress Optimization Widget */
.optimization-widget .wp-widget-title i {
  color: #0070f3;
}

.optimization-score {
  text-align: center;
  margin-bottom: 20px;
}

.score-display {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(#0070f3 0deg 324deg, #e5e7eb 324deg 360deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  position: relative;
  animation: scoreRotate 4s ease-in-out infinite;
}

.score-display::before {
  content: "";
  position: absolute;
  width: 75px;
  height: 75px;
  background: #fff;
  border-radius: 50%;
}

.score-text {
  position: absolute;
  font-size: 20px;
  font-weight: 700;
  color: #0070f3;
  z-index: 2;
}

.optimization-items {
  list-style: none;
  padding: 0;
  margin: 0;
}

.optimization-items li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  font-size: 13px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.optimization-items li:last-child {
  border-bottom: none;
}

.optimization-status {
  display: flex;
  align-items: center;
  gap: 6px;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: statusBlink 2s ease-in-out infinite;
}

.status-dot.warning {
  background: #f59e0b;
}

.status-dot.error {
  background: #ef4444;
}

/* Plugin Updates Widget */
.updates-widget .wp-widget-title i {
  color: #f59e0b;
}

.updates-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: rgba(245, 158, 11, 0.05);
  border-radius: 8px;
  border: 1px solid rgba(245, 158, 11, 0.1);
  margin-bottom: 16px;
}

.updates-count {
  font-size: 24px;
  font-weight: 700;
  color: #f59e0b;
}

.updates-label {
  font-size: 14px;
  color: #666;
  font-weight: 500;
}

.update-action {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}

.update-action:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
}

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

.updates-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 13px;
  color: #666;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.updates-list li:last-child {
  border-bottom: none;
}

.plugin-name {
  font-weight: 500;
  color: #23282d;
}

.version-info {
  font-size: 11px;
  color: #999;
}

/* Animations */
@keyframes dashboardReveal {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

@keyframes wpLogoPulse {

  0%,
  100% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.1);
  }
}

@keyframes notificationPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 1;
  }

  50% {
    transform: scale(1.2);
    opacity: 0.8;
  }
}

@keyframes badgeBounce {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-2px);
  }
}

@keyframes panelSlideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }

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

@keyframes optimizationGlow {

  0%,
  100% {
    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
  }

  50% {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
  }
}

@keyframes widgetFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

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

@keyframes performanceRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(5deg);
  }
}

@keyframes scoreRotate {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(-5deg);
  }
}

@keyframes deployPulse {

  0%,
  100% {
    box-shadow: 0 0 0 0 rgba(121, 40, 202, 0.4);
  }

  50% {
    box-shadow: 0 0 0 8px rgba(121, 40, 202, 0);
  }
}

@keyframes statusBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

@keyframes progressPulse {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.8;
  }
}

@keyframes floatBubble {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-10px);
  }
}

/* Responsive Design for WordPress Dashboard */
@media (max-width: 768px) {
  .wordpress-dashboard-container {
    margin: 20px 0;
  }

  .wp-dashboard {
    flex-direction: column;
  }

  .wp-sidebar {
    width: 100%;
    order: 2;
    display: flex;
    flex-wrap: wrap;
  }

  .wp-menu-item {
    flex: 1;
    min-width: 120px;
    text-align: center;
    padding: 10px 8px;
    font-size: 12px;
  }

  .wp-menu-item span {
    display: none;
  }

  .wp-main-content {
    order: 1;
    padding: 16px;
  }

  .wp-widgets-row {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .wp-user span {
    display: none;
  }

  .wp-welcome-panel {
    padding: 16px;
  }

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

  .wp-floating-features {
    display: none;
  }
}

@media (max-width: 480px) {
  .wp-header {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    padding: 12px 16px;
  }

  .wp-logo,
  .wp-user {
    justify-content: center;
  }

  .wp-welcome-panel h3 {
    font-size: 16px;
  }

  .wp-widget-header {
    padding: 12px 16px;
  }

  .wp-widget-content {
    padding: 16px;
  }

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

  .wp-staging-status {
    flex-direction: column;
    gap: 8px;
    text-align: center;
  }

  .wp-menu-item {
    min-width: 80px;
    padding: 8px 4px;
  }

  .wp-menu-item i {
    margin-right: 0;
  }
}

/* WordPress Platform Excellence Section - Vercel Style */
.wordpress-platform-section {
  background: #000;
  padding: 95px 0;
  position: relative;
  overflow: hidden;
  color: #fff;
}

.wordpress-platform-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 25% 25%,
      rgba(0, 112, 243, 0.1) 0%,
      transparent 50%),
    radial-gradient(circle at 75% 75%,
      rgba(121, 40, 202, 0.1) 0%,
      transparent 50%);
  pointer-events: none;
  z-index: 0;
}

.wordpress-platform-section .step-label {
  color: #fff;
}

/* Galaxy Background Elements */
.wordpress-platform-section::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    /* Distant stars */
    radial-gradient(2px 2px at 20px 30px,
      rgba(255, 255, 255, 0.5),
      transparent),
    radial-gradient(1px 1px at 40px 70px,
      rgba(255, 255, 255, 0.4),
      transparent),
    radial-gradient(2px 2px at 90px 40px,
      rgba(255, 255, 255, 0.5),
      transparent),
    radial-gradient(1px 1px at 130px 80px,
      rgba(255, 255, 255, 0.4),
      transparent),
    radial-gradient(2px 2px at 160px 30px,
      rgba(255, 255, 255, 0.5),
      transparent),
    radial-gradient(1px 1px at 200px 60px,
      rgba(255, 255, 255, 0.4),
      transparent),
    radial-gradient(2px 2px at 250px 90px,
      rgba(255, 255, 255, 0.5),
      transparent),
    radial-gradient(1px 1px at 300px 20px,
      rgba(255, 255, 255, 0.4),
      transparent),
    radial-gradient(2px 2px at 350px 70px,
      rgba(255, 255, 255, 0.5),
      transparent),
    radial-gradient(1px 1px at 400px 40px,
      rgba(255, 255, 255, 0.4),
      transparent),
    radial-gradient(2px 2px at 450px 80px,
      rgba(255, 255, 255, 0.5),
      transparent),
    radial-gradient(1px 1px at 500px 50px,
      rgba(255, 255, 255, 0.4),
      transparent),
    /* Nebula clouds */
    radial-gradient(ellipse 600px 150px at 10% 20%,
      rgba(0, 112, 243, 0.05),
      transparent),
    radial-gradient(ellipse 500px 120px at 90% 80%,
      rgba(121, 40, 202, 0.05),
      transparent),
    radial-gradient(ellipse 400px 100px at 50% 10%,
      rgba(255, 255, 255, 0.03),
      transparent);
  background-size:
    400px 400px,
    400px 400px,
    400px 400px,
    400px 400px,
    400px 400px,
    400px 400px,
    400px 400px,
    400px 400px,
    400px 400px,
    400px 400px,
    400px 400px,
    400px 400px,
    100% 100%,
    100% 100%,
    100% 100%;
  animation:
    galaxyDrift 80s linear infinite,
    starTwinkle 4s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

/* Galaxy Animation */
@keyframes galaxyDrift {
  0% {
    transform: translateX(0) translateY(0);
  }

  25% {
    transform: translateX(-8px) translateY(-4px);
  }

  50% {
    transform: translateX(-4px) translateY(-8px);
  }

  75% {
    transform: translateX(4px) translateY(-4px);
  }

  100% {
    transform: translateX(0) translateY(0);
  }
}

/* Subtle Galaxy Glow */
.wordpress-platform-section .galaxy-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1000px;
  height: 500px;
  background: radial-gradient(ellipse at center,
      rgb(198 197 197 / 34%) 0%,
      rgb(121 40 202 / 9%) 50%,
      #00000033 100% 100%);
  transform: translate(-50%, -50%);
  animation: galaxyPulse 25s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes galaxyPulse {

  0%,
  100% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.4;
  }

  50% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 0.8;
  }
}

/* Floating Cosmic Particles */
.wordpress-platform-section .cosmic-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 2;
}

.wordpress-platform-section .cosmic-particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: cosmicFloat 12s ease-in-out infinite;
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.4);
}

.wordpress-platform-section .cosmic-particle:nth-child(1) {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 15s;
}

.wordpress-platform-section .cosmic-particle:nth-child(2) {
  top: 25%;
  right: 20%;
  animation-delay: 3s;
  animation-duration: 12s;
}

.wordpress-platform-section .cosmic-particle:nth-child(3) {
  bottom: 35%;
  left: 25%;
  animation-delay: 6s;
  animation-duration: 18s;
}

.wordpress-platform-section .cosmic-particle:nth-child(4) {
  bottom: 25%;
  right: 30%;
  animation-delay: 9s;
  animation-duration: 10s;
}

.wordpress-platform-section .cosmic-particle:nth-child(5) {
  top: 65%;
  left: 75%;
  animation-delay: 2s;
  animation-duration: 14s;
}

.wordpress-platform-section .cosmic-particle:nth-child(6) {
  top: 85%;
  right: 45%;
  animation-delay: 5s;
  animation-duration: 11s;
}

@keyframes cosmicFloat {

  0%,
  100% {
    transform: translateY(0) translateX(0);
    opacity: 0.6;
  }

  25% {
    transform: translateY(-15px) translateX(8px);
    opacity: 1;
  }

  50% {
    transform: translateY(-8px) translateX(-12px);
    opacity: 0.7;
  }

  75% {
    transform: translateY(-20px) translateX(4px);
    opacity: 0.9;
  }
}

@keyframes starTwinkle {

  0%,
  100% {
    opacity: 0.8;
  }

  50% {
    opacity: 1;
  }
}

/* Ensure content is above galaxy elements */
.wordpress-platform-section .container {
  position: relative;
  z-index: 10;
}

/* Platform Introduction */
.platform-intro {
  margin-top: 55px;
  margin-bottom: 128px;
}

/* Tools Animation - Vercel Style */
.tools-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 48px;
  position: relative;
}

.tool-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  opacity: 0;
  transform: translateY(20px);
  animation: toolReveal 0.8s ease forwards;
  position: relative;
}

.tool-item[data-tool="1"] {
  animation-delay: 0.2s;
}

.tool-item[data-tool="2"] {
  animation-delay: 0.4s;
}

.tool-item[data-tool="3"] {
  animation-delay: 0.6s;
}

.tool-icon {
  width: 72px;
  height: 72px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.tool-icon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.tool-item:hover .tool-icon::before {
  opacity: 0.2;
}

.tool-item:hover .tool-icon {
  transform: scale(1.05);
  border-color: rgba(0, 112, 243, 0.5);
  box-shadow: 0 8px 32px rgba(0, 112, 243, 0.3);
}

.tool-label {
  font-size: 1rem;
  font-weight: 500;
  color: #e5e7eb;
  text-align: center;
}

.tool-connection {
  position: relative;
  width: 40px;
  height: 2px;
  margin: 0 20px;
}

.tool-connection .connection-line {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.3),
      transparent);
  position: relative;
  overflow: hidden;
}

.wordpress-platform-section .tool-connection .connection-line::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, #0070f3, transparent);
  animation: connectionFlow 2s linear infinite;
}

.tool-connection .connection-line::after {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.6),
      transparent);
  animation: connectionFlow 2s infinite;
}

/* Management Feature - Vercel Style */
.management-feature {
  margin-bottom: 95px;
  align-items: center;
}

.wordpress-platform-section .feature-content {
  padding: 0 40px;
}

.wordpress-platform-section .feature-title {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 20px;
  color: #fff;
  line-height: 1.2;
}

.wordpress-platform-section .feature-description {
  font-size: 1.125rem;
  color: #9ca3af;
  line-height: 1.6;
  margin-bottom: 32px;
}

.wordpress-platform-section .feature-benefits {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.wordpress-platform-section .benefit-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1rem;
  color: #d1d5db;
}

.wordpress-platform-section .benefit-item i {
  color: #10b981;
  font-size: 1.1rem;
  padding: 3px;
  background: transparent;
}

/* Dashboard Mockup - Vercel Style */
.feature-visual {
  position: relative;
}

.dashboard-mockup {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
  position: relative;
}

.dashboard-mockup::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%,
      rgba(0, 112, 243, 0.1) 0%,
      transparent 70%);
  pointer-events: none;
}

.dashboard-mockup:hover {
  border-color: rgba(0, 112, 243, 0.3);
  box-shadow: 0 16px 48px rgba(0, 112, 243, 0.2);
}

.dashboard-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: #fff;
}

.dashboard-logo i {
  font-size: 1.2rem;
  color: #0070f3;
}

.dashboard-stats {
  display: flex;
  gap: 20px;
}

.dashboard-content {
  padding: 24px;
}

.site-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.site-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
}

.site-item:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(0, 112, 243, 0.3);
  transform: translateX(4px);
}

.site-item.active {
  background: rgba(0, 112, 243, 0.1);
  border-color: rgba(0, 112, 243, 0.3);
}

.site-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #333;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.site-info h4 {
  margin: 0 0 4px 0;
  font-size: 1rem;
  font-weight: 600;
  color: #fff;
}

.site-status {
  font-size: 0.8rem;
  padding: 4px 8px;
  border-radius: 12px;
  font-weight: 500;
}

.site-status.online {
  background: rgba(16, 185, 129, 0.2);
  color: #10b981;
}

.site-status.staging {
  background: rgba(245, 158, 11, 0.2);
  color: #f59e0b;
}

.action-btn {
  background: rgba(255, 255, 255, 0.1);
  color: #e5e7eb;
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-btn:hover {
  background: rgba(0, 112, 243, 0.2);
  border-color: rgba(0, 112, 243, 0.3);
  color: #fff;
  transform: translateY(-1px);
}

/* Advanced Features - Vercel Style */
.wordpress-platform-section .advanced-features {
  margin-bottom: 128px;
}

.wordpress-platform-section .advanced-feature-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  text-align: center;
  backdrop-filter: blur(10px);
}

.wordpress-platform-section .advanced-feature-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%,
      rgba(0, 112, 243, 0.1) 0%,
      transparent 70%);
  pointer-events: none;
}

.wordpress-platform-section .advanced-feature-card .feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
  line-height: 1.3;
}

.wordpress-platform-section .advanced-feature-card .feature-description {
  font-size: 1rem;
  color: #9ca3af;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Performance Metrics - Vercel Style */
.performance-metrics {
  display: flex;
  justify-content: center;
  gap: 32px;
  margin-top: 24px;
}

.metric-item {
  text-align: center;
}

/* Staging Features - Vercel Style */
.staging-features {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 24px;
}

.staging-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #d1d5db;
}

.staging-item i {
  color: #10b981;
}

/* Additional Features - Vercel Style */
.wordpress-platform-section .additional-features {
  margin-bottom: 95px;
}

.wordpress-platform-section .additional-feature-card {
  border-radius: 16px;
  padding: 25px;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  text-align: center;
  backdrop-filter: blur(10px);
}

.wordpress-platform-section .additional-feature-card .feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: #fff;
  line-height: 1.3;
}

.wordpress-platform-section .additional-feature-card .feature-description {
  font-size: 1rem;
  color: #9ca3af;
  line-height: 1.6;
  margin-bottom: 24px;
}

.step-node.performance-request {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.step-node.performance-cache {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.step-node.performance-result {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.step-node.staging-live {
  background: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
}

.step-node.staging-clone {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.step-node.staging-push {
  background: linear-gradient(135deg, #06b6d4 0%, #0891b2 100%);
}

/* Section CTA - Vercel Style */
.wordpress-platform-section .section-cta {
  text-align: center;
}

.wordpress-platform-section .cta-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 50%,
      rgba(0, 112, 243, 0.1) 0%,
      transparent 70%);
  pointer-events: none;
}

.wordpress-platform-section .cta-content {
  position: relative;
  z-index: 2;
}

.wordpress-platform-section .cta-title {
  font-size: 2.25rem;
  font-weight: 700;
  margin-bottom: 16px;
  color: #fff;
  line-height: 1.2;
}

.wordpress-platform-section .cta-description {
  font-size: 1.125rem;
  color: #9ca3af;
  line-height: 1.6;
  margin-bottom: 32px;
}

.wordpress-platform-section .cta-actions {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
}

/* Animations */
@keyframes toolReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

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

  100% {
    left: 100%;
  }
}

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

  100% {
    left: 100%;
  }
}

@keyframes packetFlow {
  0% {
    left: 0;
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }

  100% {
    left: 100%;
    opacity: 1;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .wordpress-platform-section {
    padding: 80px 0;
  }

  .intro-card {
    padding: 0 24px;
  }

  .intro-title {
    font-size: 1.5rem;
  }

  .intro-description {
    font-size: 1rem;
  }

  .tools-animation {
    gap: 20px;
  }

  .tool-connection {
    width: 20px;
  }

  .wordpress-platform-section .feature-content {
    padding: 0 20px;
    margin-bottom: 40px;
  }

  .wordpress-platform-section .feature-title {
    font-size: 1.5rem;
  }

  .wordpress-platform-section .feature-description {
    font-size: 1rem;
  }

  .dashboard-mockup {
    transform: none;
  }

  .dashboard-header {
    padding: 12px 16px;
  }

  .dashboard-content {
    padding: 16px;
  }

  .site-item {
    padding: 12px;
  }

  .performance-metrics {
    gap: 20px;
  }

  .metric-value {
    font-size: 1.5rem;
  }

  .staging-features {
    gap: 16px;
  }

  .wordpress-platform-section .advanced-feature-card,
  .wordpress-platform-section .additional-feature-card {
    padding: 24px 16px;
  }

  .performance-flow-visualization,
  .staging-flow-visualization {
    gap: 12px;
  }

  .step-node {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }

  .connection-line.animated {
    width: 30px;
  }

  .wordpress-platform-section .cta-card {
    padding: 25px 20px;
    background: transparent;
  }

  .wordpress-platform-section .cta-title {
    font-size: 1.5rem;
  }

  .wordpress-platform-section .cta-description {
    font-size: 1rem;
  }

  .wordpress-platform-section .cta-actions {
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .tools-animation {
    flex-direction: row;
    gap: 0;
  }

  .tool-connection {
    width: 2px;
    height: 20px;
    transform: rotate(90deg);
  }

  .performance-metrics {
    flex-direction: column;
    gap: 16px;
  }

  .staging-features {
    flex-direction: column;
    gap: 12px;
  }

  .performance-flow-visualization,
  .staging-flow-visualization {
    flex-direction: row;
    gap: 16px;
  }

  .flow-connection-animated {
    transform: rotate(90deg);
  }

  .wordpress-platform-section .cta-actions {
    flex-direction: column;
    gap: 12px;
  }
}

/* ==============================================
RESELLER BUSINESS FLOW VISUALIZATION
============================================== */
/* Container and Layout */
.reseller-ecosystem-container {
  position: relative;
  padding: 60px 0;
  background: linear-gradient(135deg, #fafafa 0%, #f5f5f5 100%);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 40px;
}

.reseller-ecosystem-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background:
    radial-gradient(circle at 20% 20%,
      rgba(0, 112, 243, 0.05) 0%,
      transparent 50%),
    radial-gradient(circle at 80% 80%,
      rgba(121, 40, 202, 0.05) 0%,
      transparent 50%);
  pointer-events: none;
}

.reseller-business-flow {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 40px;
  z-index: 2;
}

/* Flow Stage Base */
.flow-stage {
  position: relative;
  padding: 30px;
  background: #fff;
  border-radius: 16px;
  border: 1px solid #eaeaea;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.flow-stage:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

.stage-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.stage-number {
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 1.125rem;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.stage-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #333;
  margin: 0;
}

/* Infrastructure Stage */
.infrastructure-stage {
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border-color: #cbd5e0;
}

.infrastructure-cloud {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.server-rack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.server-unit {
  background: #2d3748;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 200px;
  transition: all 0.3s ease;
}

.server-unit:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(45, 55, 72, 0.3);
}

.server-lights {
  display: flex;
  gap: 4px;
}

.light {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #48bb78;
  box-shadow: 0 0 8px rgba(72, 187, 120, 0.6);
}

.server-label {
  color: #e2e8f0;
  font-weight: 500;
  font-size: 0.875rem;
}

.infrastructure-features {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sidebar-item {
  padding: 12px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #64748b;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.sidebar-item:hover {
  background: #e2e8f0;
  color: #334155;
}

.sidebar-item.active {
  background: #0ea5e9;
  color: #fff;
}

.whm-main {
  flex: 1;
  padding: 20px;
}

.account-creation-panel {
  background: #f8fafc;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.panel-header h4 {
  margin: 0;
  color: #1e293b;
  font-weight: 600;
}

.usage-meter {
  text-align: right;
}

.meter-label {
  font-size: 0.875rem;
  color: #64748b;
  margin-bottom: 4px;
}

.meter-bar {
  width: 120px;
  height: 6px;
  background: #e2e8f0;
  border-radius: 3px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #7928ca85 0%, #7928ca 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.form-field {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-sm);
}

.form-field label {
  width: 80px;
  font-weight: var(--font-weight-medium);
  color: var(--text-primary);
  margin: 0;
}

.form-field input,
.form-field select {
  flex: 1;
  font-size: var(--font-size-md);
}

.btn-create {
  background: linear-gradient(135deg,
      var(--color-green) 0%,
      var(--color-green-dark) 100%);
  color: var(--text-inverse);
  border: 1px solid var(--color-green);
  padding: var(--spacing-xs) var(--spacing-lg);
  border-radius: var(--radius-md);
  font-weight: var(--font-weight-medium);
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  cursor: pointer;
  transition:
    transform var(--transition-standard),
    box-shadow var(--transition-standard),
    border-color var(--transition-standard);
}

.btn-create:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-medium);
}

/* Multi-Connection Hub */
.multi-connection {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 30px 0;
}

.connection-hub {
  position: relative;
  width: 200px;
  height: 200px;
}

.hub-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.5rem;
  box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}

.client-branch {
  position: absolute;
  width: 80px;
  height: 2px;
  background: linear-gradient(90deg, #667eea 0%, #00d4aa 100%);
  transform-origin: left center;
}

.branch-1 {
  top: 30%;
  left: 60px;
  transform: rotate(-30deg);
}

.branch-2 {
  top: 50%;
  left: 60px;
  transform: rotate(0deg);
}

.branch-3 {
  top: 70%;
  left: 60px;
  transform: rotate(30deg);
}

.branch-line {
  position: relative;
  width: 100%;
  height: 100%;
}

.branch-flow {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #00d4aa;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 212, 170, 0.6);
  left: 0;
  top: -2px;
}

/* cPanel Stage */
.cpanel-stage {
  background: linear-gradient(135deg, #fef3c7 0%, #fed7aa 100%);
  border-color: #f59e0b;
}

.cpanel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.cpanel-account {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.cpanel-account:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.cpanel-window {
  height: 100%;
}

.cpanel-header {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  padding: 12px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.cpanel-logo {
  display: flex;
  align-items: center;
  gap: 8px;
  color: white;
  font-weight: 600;
}

.cpanel-status {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 500;
}

.cpanel-status.online {
  background: rgba(16, 185, 129, 0.8);
}

.cpanel-dashboard {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dashboard-widget {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.dashboard-widget:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.widget-icon {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
}

.widget-info {
  flex: 1;
}

.widget-title {
  font-weight: 500;
  color: #374151;
  margin: 0 0 2px 0;
  font-size: 0.875rem;
}

.widget-value {
  font-weight: 600;
  color: #1f2937;
  font-size: 0.875rem;
}

/* Revenue Stage */
.revenue-stage {
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border-color: #10b981;
}

.revenue-dashboard {
  max-width: 800px;
  margin: 0 auto;
}

.revenue-summary {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  margin-bottom: 30px;
}

.revenue-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e5e7eb;
  display: flex;
  align-items: center;
  gap: 16px;
  transition: all 0.3s ease;
}

.revenue-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.revenue-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
}

.revenue-details {
  flex: 1;
}

.revenue-label {
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 4px;
  font-size: 0.875rem;
}

.revenue-amount {
  font-weight: 700;
  color: #1f2937;
  font-size: 1.25rem;
  margin-bottom: 2px;
}

.revenue-count {
  font-size: 0.75rem;
  color: #9ca3af;
}

.total-revenue {
  background: #fff;
  border-radius: 16px;
  padding: 30px;
  text-align: center;
  border: 2px solid #10b981;
  box-shadow: 0 8px 24px rgba(16, 185, 129, 0.1);
}

.total-label {
  font-weight: 500;
  color: #6b7280;
  margin-bottom: 8px;
}

.total-amount {
  font-weight: 800;
  color: #10b981;
  font-size: 2.5rem;
  margin-bottom: 8px;
}

.growth-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  color: #10b981;
  font-weight: 500;
  font-size: 0.875rem;
}

/* Business Metrics */
.business-metrics {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 20px;
  margin-top: 40px;
  padding: 30px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 16px;
  border: 1px solid #e5e7eb;
}

.metric-info {
  text-align: center;
}

/* Animations */
@keyframes dataStreamFlow {
  0% {
    transform: translateY(0);
    opacity: 1;
  }

  50% {
    transform: translateY(30px);
    opacity: 0.7;
  }

  100% {
    transform: translateY(60px);
    opacity: 0;
  }
}

@keyframes arrowPulse {

  0%,
  100% {
    transform: scale(1);
    opacity: 0.7;
  }

  50% {
    transform: scale(1.1);
    opacity: 1;
  }
}

@keyframes branchFlow {
  0% {
    transform: translateX(0);
    opacity: 1;
  }

  100% {
    transform: translateX(80px);
    opacity: 0;
  }
}

@keyframes serverBlink {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.6;
  }
}

/* Responsive Design */
@media (max-width: 768px) {
  .reseller-ecosystem-container {
    padding: 40px 20px;
  }

  .reseller-business-flow {
    gap: 30px;
  }

  .flow-stage {
    padding: 20px;
  }

  .stage-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .stage-title {
    font-size: 1.25rem;
  }

  .infrastructure-cloud {
    flex-direction: column;
    gap: 20px;
  }

  .whm-content {
    flex-direction: column;
  }

  .whm-sidebar {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid #e2e8f0;
  }

  .cpanel-grid {
    grid-template-columns: 1fr;
  }

  .revenue-summary {
    grid-template-columns: 1fr;
  }

  .business-metrics {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    padding: 20px;
  }

  .total-amount {
    font-size: 2rem;
  }
}

@media (max-width: 480px) {
  .flow-stage {
    padding: 16px;
  }

  .stage-number {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .stage-title {
    font-size: 1.125rem;
  }

  .server-unit {
    min-width: 160px;
    padding: 12px;
  }

  .whm-window {
    margin: 0 -16px;
  }

  .business-metrics {
    grid-template-columns: 1fr;
  }

  .metric-item {
    padding: 0;
    display: block;
  }

  .metric-value {
    font-size: 1.25rem;
  }

  .total-amount {
    font-size: 1.75rem;
  }
}

/* ==============================================
VERCEL-STYLE GRID FEATURES SECTION
============================================== */
.vercel-grid-section {
  position: relative;
  background: #fafafa;
}

.vercel-features-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 5px;
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
}

.grid-background-lines {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image:
    linear-gradient(to right, #e5e7eb 1px, transparent 1px),
    linear-gradient(to bottom, #e5e7eb 1px, transparent 1px);
  background-size: 320px 100px;
  pointer-events: none;
  z-index: 1;
}

.feature-grid-item {
  position: relative;
  background: #fff;
  padding: 25px;
  transition: all 0.2s ease;
  border: none;
  z-index: 2;
}

/* Automatic light background colors for feature grid items - cycles through 12 colors */
.vercel-features-grid .feature-grid-item:nth-child(12n + 1) {
  background: #f0fdf4;
  /* Light red/pink */
}

.vercel-features-grid .feature-grid-item:nth-child(12n + 3) {
  background: #f0f9ff;
  /* Light green */
}

.vercel-features-grid .feature-grid-item:nth-child(12n + 5) {
  background: #f5f3ff;
  /* Light purple */
}

.vercel-features-grid .feature-grid-item:nth-child(12n + 7) {
  background: #f0fdfa;
  /* Light teal */
}

.vercel-features-grid .feature-grid-item:nth-child(12n + 8) {
  background: #fef2f2;
  /* Light rose */
}

.vercel-features-grid .feature-grid-item:nth-child(12n + 9) {
  background: #eff6ff;
  /* Light indigo */
}

.vercel-features-grid .feature-grid-item:nth-child(12n + 10) {
  background: #f9fafb;
  /* Light gray */
}

.vercel-features-grid .feature-grid-item:nth-child(12n + 11) {
  background: #fdf4ff;
  /* Light violet */
}

.vercel-features-grid .feature-grid-item:nth-child(12n + 12) {
  background: #ecfdf5;
  /* Light emerald */
}

.feature-icon-minimal {
  width: 40px;
  height: 40px;
  background: var(--bg-inverse);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  transition: all 0.2s ease;
}

.feature-icon-minimal i {
  color: white;
  font-size: 1.125rem;
}

.feature-title-minimal {
  font-size: 1.2rem;
  font-weight: 600;
  color: #111827;
  margin: 0 0 12px 0;
  line-height: 1.4;
}

.feature-description-minimal {
  font-size: 1.05rem;
  color: #575757;
  margin: 0;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .vercel-features-grid {
    grid-template-columns: 1fr;
    gap: 1px;
    margin-top: 32px;
  }

  .grid-background-lines {
    background-size: 100% 100px;
  }

  .feature-grid-item {
    padding: 24px 20px;
  }

  .feature-title-minimal {
    font-size: 1rem;
  }

  .feature-description-minimal {
    font-size: 0.8125rem;
  }
}

@media (max-width: 480px) {
  .feature-grid-item {
    padding: 20px 16px;
  }

  .feature-icon-minimal {
    width: 36px;
    height: 36px;
    margin-bottom: 12px;
  }

  .feature-icon-minimal i {
    font-size: 1rem;
  }

  .feature-title-minimal {
    font-size: 0.9375rem;
    margin-bottom: 8px;
  }
}

/* ==============================================
COMPREHENSIVE FEATURES SECTION
============================================== */
.comprehensive-features-section {
  position: relative;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
}

/* cPanel WHM Management Flow */
.cpanel-whm-management-flow {
  text-align: center;
}

.cpanel-grid {
  display: grid;
  gap: 12px;
}

.cpanel-account-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
}

.cpanel-account-item:hover {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.account-icon {
  width: 32px;
  height: 32px;
  background: var(--bg-inverse);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
}

.account-info {
  flex: 1;
  text-align: left;
}

.account-status {
  font-size: 0.85rem;
  color: #6b7280;
  display: inline;
}

/* Custom Packages Flow */
.custom-packages-flow {
  text-align: center;
}

.builder-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #374151;
  font-weight: 600;
}

.package-options {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.package-option {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.option-control {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-weight: 500;
  font-size: 0.875rem;
}

.option-slider {
  flex: 1;
  max-width: 120px;
}

.slider-track {
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.slider-fill {
  height: 100%;
  background: linear-gradient(90deg, #7928ca82 0%, #7928ca 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

/* Scalable Growth Flow */
.scalable-growth-flow {
  text-align: center;
}

.chart-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #374151;
  font-weight: 600;
}

.growth-bars {
  display: flex;
  align-items: end;
  justify-content: center;
  gap: 8px;
  height: 80px;
}

.growth-bar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  max-width: 40px;
}

.bar-label {
  font-size: 0.75rem;
  color: #6b7280;
  font-weight: 500;
}

/* Revenue Growth Flow */
.revenue-growth-flow {
  text-align: center;
}

.revenue-items {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.revenue-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.item-icon {
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #4d4d4d;
  font-size: 0.875rem;
}

.item-icon img {
  width: 28px;
  margin-top: 1rem;
}

.item-details {
  flex: 1;
  text-align: left;
}

.item-name,
.account-name {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
  margin-bottom: 2px;
}

.item-revenue {
  font-weight: 700;
  color: #333;
  font-size: 0.875rem;
}

/* Nameservers Flow */
.nameservers-flow {
  text-align: center;
}

.dns-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #374151;
  font-weight: 600;
}

.nameserver-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.nameserver-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.ns-icon {
  width: 32px;
  height: 32px;
  background: var(--bg-inverse);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
}

.ns-details {
  flex: 1;
  text-align: left;
}

.ns-name {
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
  margin-bottom: 2px;
}

.ns-status {
  font-size: 0.75rem;
  color: #6b7280;
}

.ns-status.active {
  color: #0070f3;
  font-weight: 500;
  padding: 2px 10px;
  border-radius: 5px;
}

/* WHMCS Integration Flow */
.whmcs-integration-flow {
  text-align: center;
}

.billing-features {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.billing-feature {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.billing-feature .feature-icon {
  width: 32px;
  height: 32px;
  background: var(--bg-inverse);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 0.875rem;
}

.feature-label {
  font-size: 0.75rem;
  color: #374151;
  font-weight: 500;
  text-align: center;
}

/* Resource Boost Flow */
.resource-boost-flow {
  text-align: center;
}

.boost-dashboard {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  border: 1px solid #e2e8f0;
}

.resource-controls {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.resource-control {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.control-header {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #374151;
  font-weight: 500;
  font-size: 0.875rem;
}

.control-boost {
  display: flex;
  align-items: center;
  gap: 8px;
}

.boost-meter {
  width: 80px;
  height: 6px;
  background: #e5e7eb;
  border-radius: 3px;
  overflow: hidden;
}

.meter-fill {
  height: 100%;
  background: linear-gradient(90deg, #7928ca78 0% 0%, #7928cabf 100% 100%);
  border-radius: 3px;
  transition: width 0.3s ease;
}

.boost-label {
  font-size: 0.75rem;
  color: #333;
  font-weight: 600;
}

/* Passion Journey Flow */
.passion-journey-flow {
  text-align: center;
}

.timeline-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: 16px;
  color: #374151;
  font-weight: 600;
}

.journey-steps {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.journey-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.step-year {
  font-weight: 700;
  color: #667eea;
  font-size: 0.875rem;
  min-width: 40px;
}

.step-milestone {
  flex: 1;
  text-align: left;
  font-weight: 500;
  color: #374151;
  font-size: 0.875rem;
}

/* Responsive Design */
@media (max-width: 768px) {
  .comprehensive-feature-card {
    padding: 24px 20px;
    margin-bottom: 24px;
  }

  .feature-flow-container {
    margin-bottom: 20px;
  }

  .feature-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .feature-icon {
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
  }

  .feature-title {
    font-size: 1.25rem;
  }

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

  .growth-bars {
    height: 60px;
  }

  .resource-controls {
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .comprehensive-feature-card {
    padding: 20px 16px;
  }

  .feature-title {
    font-size: 1.125rem;
  }

  .feature-description {
    font-size: 0.875rem;
  }

  .package-option,
  .resource-control {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .option-slider,
  .control-boost {
    width: 100%;
    max-width: none;
  }
}

/* ==============================================
UPGRADE NOTE COMPONENT
============================================== */
.upgrade-note {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, #0070f30d 0%, #0070f300 100%);
  border: 1px solid #0070f3;
  border-radius: 12px;
  padding: 12px 15px;
  margin: 20px 0;
}

.upgrade-icon {
  width: 35px;
  height: 35px;
  background: #1671ff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.125rem;
  flex-shrink: 0;
}

.upgrade-text {
  flex: 1;
  font-size: 0.85rem;
  line-height: 1.5;
  color: #0f172a;
}

.upgrade-text strong {
  color: #0070f3;
  font-weight: 600;
}

@media (max-width: 768px) {
  .upgrade-note {
    padding: 12px;
    margin: 16px 0;
  }

  .upgrade-icon {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }

  .upgrade-text {
    font-size: 0.75rem;
  }
}

/* ==============================================
ENHANCED FEATURE FLOWS
============================================== */
/* Global Network Flow */
.global-network-flow {
  text-align: center;
}

.network-globe-container {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  padding: 20px;
  border: 1px solid #e2e8f0;
  overflow: hidden;
  position: relative;
}

.network-globe-container::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 50% 30%,
      rgba(102, 126, 234, 0.1) 0%,
      transparent 70%);
  pointer-events: none;
}

.network-globe-container svg {
  position: relative;
  z-index: 1;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.1));
}

/* Security & Performance Flow */
.security-performance-flow {
  text-align: center;
}

.security-layers {
  display: flex;
  gap: 16px;
  background: #fff;
  border-radius: 8px;
}

.security-performance-flow .security-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
  position: relative;
}

.security-layer:hover {
  background: #f1f5f9;
  border-color: #cbd5e0;
  transform: translateY(-2px);
}

.layer-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1rem;
  transition: all 0.3s ease;
}

.security-box:nth-child(1) .layer-icon {
  background: #3b82f6;
}

.security-box:nth-child(2) .layer-icon {
  background: #10b981;
}

.security-box:nth-child(3) .layer-icon {
  background: #f59e0b;
}

.security-box:nth-child(4) .layer-icon {
  background: #ef4444;
}

.layer-label {
  font-size: 1rem;
  color: #374151;
  font-weight: 600;
  text-align: center;
  line-height: 1.2;
}

/* Migration Process Flow */
.migration-process-flow {
  text-align: center;
}

.migration-timeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  background: #fff;
  border-radius: 8px;
  padding: 20px;
  border: 1px solid #e2e8f0;
}

.migration-connection {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
}

.migration-packet {
  position: absolute;
  top: -2px;
  left: -10px;
  width: 10px;
  height: 6px;
  background: #667eea;
  border-radius: 2px;
  animation: migrationFlow 3s ease-in-out infinite;
}

@keyframes migrationFlow {
  0% {
    left: -10px;
    opacity: 0;
  }

  20% {
    opacity: 1;
  }

  80% {
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes statusPulse {

  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }

  50% {
    opacity: 0.7;
    transform: scale(1.2);
  }
}

@media (max-width: 768px) {
  .security-layers {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .security-layer {
    padding: 12px 10px;
  }

  .layer-icon {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }

  .layer-label {
    font-size: 0.75rem;
  }

  .migration-timeline {
    flex-direction: column;
    gap: 20px;
    margin: 0;
  }

  .migration-connection {
    transform: rotate(90deg);
    width: 20px;
    height: 40px;
  }

  .network-globe-container {
    padding: 16px;
  }

  .network-globe-container svg {
    height: 100px;
  }
}

/* ==============================================
MODERN SPECIFICATIONS SECTION
============================================== */
/* Modern Specifications Section */
.modern-specifications-section {
  padding: 80px 0 40px;
  position: relative;
}

.modern-specifications-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(0, 112, 243, 0.02) 0%,
      rgba(121, 40, 202, 0.02) 50%,
      rgba(16, 185, 129, 0.02) 100%);
  border-top: 1px solid #f6f4f4;
  pointer-events: none;
}

/* Specifications Navigation */
.specifications-navigation {
  margin-bottom: 60px;
}

.nav-tabs-container {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  padding: 0 20px;
}

.nav-tab {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px 32px;
  background: rgba(255, 255, 255, 0.8);
  border: 2px solid transparent;
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  min-width: 220px;
  user-select: none;
}

.nav-tab:hover {
  background: rgba(255, 255, 255, 0.95);
  border-color: rgba(0, 112, 243, 0.2);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 112, 243, 0.1);
}

.nav-tab.active {
  background: linear-gradient(135deg, #000 0%, #333 100%);
  border-color: transparent;
  color: white;
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.2);
}

.nav-tab.active .nav-icon {
  color: #00d4aa;
}

.nav-tab.active .nav-title {
  color: white;
}

.nav-tab.active .nav-subtitle {
  color: rgba(255, 255, 255, 0.8);
}

.nav-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
  border-radius: 12px;
  color: white;
  font-size: 20px;
  transition: all 0.3s ease;
}

.nav-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.nav-title {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  transition: color 0.3s ease;
}

.nav-subtitle {
  font-size: 14px;
  color: #666;
  transition: color 0.3s ease;
}

/* Modern Specifications Content */
.modern-specifications-content {
  padding: 0 0 80px;
  background: #fafafa;
}

.migration-info-card .feature-benefits li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 0;
  font-size: 0.9rem;
  color: #555;
}

.migration-info-card .feature-benefits li i {
  color: #00d4aa;
  font-size: 16px;
}

.migration-cta {
  margin-top: 24px;
}

/* Specifications Table Card */
.specifications-table-card {
  background: #186ff314;
  backdrop-filter: blur(20px);
  border-radius: 12px;
}

.specs-table-container {
  padding: 0;
}

.specs-section {
  margin-bottom: 40px;
}

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

.specs-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 1.15rem;
  font-weight: 600;
  color: #333;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
}

.spec-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  border: 1px solid rgba(0, 112, 243, 0.08);
  transition: all 0.3s ease;
}

.spec-row:hover {
  background: rgba(0, 112, 243, 0.05);
  border-color: rgba(0, 112, 243, 0.2);
  transform: translateX(4px);
}

.specifications-table-card .spec-label {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.9rem;
  font-weight: 500;
  color: #555;
}

.spec-label i {
  font-size: 16px;
  width: 20px;
  text-align: center;
}

/* Standard Features Card */
.standard-features-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
}

.features-header {
  text-align: center;
  margin-bottom: 48px;
}

.features-title {
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.features-title i {
  color: #0070f3;
  font-size: 30px;
}

.features-subtitle {
  font-size: 18px;
  color: #666;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.feature-category {
  background: rgba(248, 250, 252, 0.6);
  border-radius: 16px;
  padding: 32px;
  border: 1px solid rgba(0, 112, 243, 0.1);
  transition: all 0.3s ease;
}

.feature-category:hover {
  background: rgba(255, 255, 255, 0.8);
  border-color: rgba(0, 112, 243, 0.2);
  transform: translateY(-4px);
  box-shadow: 0 12px 35px rgba(0, 112, 243, 0.1);
}

.category-title {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  color: #333;
  margin-bottom: 24px;
  padding-bottom: 12px;
  border-bottom: 2px solid rgba(0, 112, 243, 0.1);
}

.category-title i {
  color: #0070f3;
  font-size: 22px;
}

.feature-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* FAQ Card */
.faq-card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
}

.faq-header {
  text-align: center;
  margin-bottom: 48px;
}

.faq-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  font-size: 28px;
  font-weight: 700;
  color: #333;
  margin-bottom: 16px;
}

.faq-title i {
  color: #0070f3;
  font-size: 30px;
}

.faq-subtitle {
  font-size: 18px;
  color: #666;
  line-height: 1.6;
  max-width: 600px;
  margin: 0 auto;
}

.faq-content {
  max-width: 920px;
  margin: 0 auto;
}

.faq-item.active {
  border-color: rgb(0 0 0 / 30%);
  box-shadow: 0 8px 25px rgb(7 7 7 / 15%);
}

.faq-question h4 {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin: 0;
  flex: 1;
  line-height: 1.4;
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s ease;
  background: rgba(255, 255, 255, 0.9);
}

.faq-answer p {
  margin: 0;
  font-size: 1rem;
  color: #666;
  line-height: 1.6;
}

/* Responsive Design */
@media (max-width: 1200px) {
  .features-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 24px;
  }
}

@media (max-width: 768px) {
  .modern-specifications-section {
    padding: 60px 0 30px;
  }

  .nav-tabs-container {
    flex-direction: column;
    gap: 12px;
    padding: 0 16px;
  }

  .nav-tab {
    min-width: auto;
    padding: 16px 24px;
  }

  .nav-icon {
    width: 40px;
    height: 40px;
    font-size: 18px;
  }

  .nav-title {
    font-size: 15px;
  }

  .nav-subtitle {
    font-size: 13px;
  }

  .modern-specifications-content {
    padding: 0 0 60px;
  }

  .migration-info-card .feature-title {
    font-size: 20px;
  }

  .features-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .feature-category {
    padding: 24px;
  }

  .features-title {
    font-size: 24px;
  }

  .features-subtitle {
    font-size: 16px;
  }

  .faq-title {
    font-size: 24px;
  }

  .faq-subtitle {
    font-size: 16px;
  }

  .faq-question {
    padding: 10px 15px;
  }

  .faq-question h4 {
    font-size: 16px;
  }

  .faq-answer p {
    padding-top: 15px;
  }

  .spec-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 16px;
  }

  .spec-value {
    text-align: left;
    width: 100%;
  }
}

@media (max-width: 480px) {
  .nav-tab {
    padding: 12px 16px;
  }

  .migration-info-card {
    padding: 24px 20px;
  }

  .specifications-table-card {
    padding: 24px 20px;
  }

  .standard-features-card {
    padding: 24px 20px;
  }

  .faq-card {
    padding: 24px 20px;
  }
}

/* ==============================================
EMAIL MARKETING PLATFORM STYLES
============================================== */
/* Email Marketing Workflow Animation */
.email-marketing-workflow-container {
  position: relative;
  margin-top: 60px;
  padding: 40px 20px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.workflow-header {
  text-align: center;
  margin-bottom: 40px;
}

.workflow-title {
  font-size: 1.8rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8px;
}

.workflow-subtitle {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 0;
}

.email-workflow-steps {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-bottom: 40px;
  flex-wrap: wrap;
  gap: 20px;
}

.email-connection-network {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 1;
}

.email-flow-line {
  position: absolute;
  height: 2px;
  background: linear-gradient(90deg, #3b82f6, #8b5cf6);
  border-radius: 2px;
  overflow: hidden;
}

.email-flow-line.line-1 {
  left: 25%;
  width: 20%;
  animation: flowPulse 2s ease-in-out infinite;
}

.email-flow-line.line-2 {
  left: 50%;
  width: 20%;
  animation: flowPulse 2s ease-in-out infinite 0.5s;
}

.email-flow-line.line-3 {
  left: 75%;
  width: 20%;
  animation: flowPulse 2s ease-in-out infinite 1s;
}

.email-packet {
  position: absolute;
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
  animation: packetMove 3s linear infinite;
}

.email-workflow-step {
  position: relative;
  z-index: 2;
  flex: 1;
  min-width: 200px;
  max-width: 240px;
}

.email-workflow-step .step-card {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 24px;
  text-align: center;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
}

.email-workflow-step.active .step-card {
  background: rgba(59, 130, 246, 0.2);
  border-color: #3b82f6;
  transform: scale(1.05);
}

.email-workflow-step.completed .step-card {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
}

.email-workflow-step .step-glow {
  position: absolute;
  top: -2px;
  left: -2px;
  right: -2px;
  bottom: -2px;
  background: linear-gradient(45deg, #3b82f6, #8b5cf6);
  border-radius: 14px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}

.email-workflow-step.active .step-glow {
  opacity: 0.3;
  animation: glowPulse 2s ease-in-out infinite;
}

.email-workflow-step .step-icon-container {
  position: relative;
  margin-bottom: 16px;
}

.email-workflow-step .step-icon {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
  font-size: 20px;
  color: #ffffff;
}

.email-workflow-step .step-status {
  position: absolute;
  top: -4px;
  right: -4px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #ffffff;
}

.email-workflow-step .step-status.completed {
  background: #22c55e;
}

.email-workflow-step .step-status.active {
  background: #3b82f6;
}

.email-workflow-step .step-status.pending {
  background: #6b7280;
}

.email-workflow-step .loading-spinner {
  width: 12px;
  height: 12px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top: 2px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

.email-workflow-step .pending-dot {
  width: 6px;
  height: 6px;
  background: #ffffff;
  border-radius: 50%;
  animation: pulse 2s ease-in-out infinite;
}

.email-workflow-step .step-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 4px;
}

.email-workflow-step .step-description {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}

.email-workflow-step .step-metrics .metric {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}

.email-workflow-step .metric-value {
  font-size: 0.9rem;
  font-weight: 600;
  color: #ffffff;
}

.email-workflow-step .metric-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Email Campaign Preview */
.email-campaign-preview {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.email-campaign-preview .preview-header {
  background: rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.email-campaign-preview .preview-controls {
  display: flex;
  gap: 8px;
}

.email-campaign-preview .control-btn {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #ef4444;
}

.email-campaign-preview .control-btn.maximize {
  background: #f59e0b;
}

.email-campaign-preview .preview-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  color: #ffffff;
  font-weight: 500;
}

.email-campaign-preview .preview-status {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.8);
}

.email-campaign-preview .status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #22c55e;
}

.email-campaign-preview .status-indicator.active {
  animation: pulse 2s ease-in-out infinite;
}

.email-campaign-preview .preview-content {
  padding: 20px;
}

.email-campaign-preview .email-subject {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.9);
  margin-bottom: 16px;
}

.email-campaign-preview .email-preview-body {
  background: rgba(255, 255, 255, 0.9);
  border-radius: 8px;
  padding: 16px;
  color: #1f2937;
  min-height: 120px;
}

.email-campaign-preview .email-header h3 {
  color: #1f2937;
  margin-bottom: 12px;
  font-size: 1.1rem;
}

.email-campaign-preview .email-content p {
  color: #6b7280;
  margin-bottom: 16px;
  font-size: 0.9rem;
}

.email-campaign-preview .email-button {
  display: inline-block;
  background: #3b82f6;
  color: #ffffff;
  padding: 8px 16px;
  border-radius: 6px;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 500;
}

.email-campaign-preview .campaign-stats {
  display: flex;
  justify-content: space-around;
  padding: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.email-campaign-preview .campaign-stats .stat-item {
  text-align: center;
}

.email-campaign-preview .campaign-stats .stat-icon {
  color: rgba(255, 255, 255, 0.7);
  font-size: 1.2rem;
  margin-bottom: 4px;
}

.email-campaign-preview .campaign-stats .stat-value {
  display: block;
  font-size: 1rem;
  font-weight: 600;
  color: #ffffff;
}

.email-campaign-preview .campaign-stats .stat-label {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.7);
}

/* Email Marketing Specific Animations */
@keyframes flowPulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 1;
  }
}

@keyframes packetMove {
  0% {
    left: 0;
    opacity: 1;
  }

  100% {
    left: 100%;
    opacity: 0;
  }
}

@keyframes glowPulse {

  0%,
  100% {
    opacity: 0.3;
  }

  50% {
    opacity: 0.6;
  }
}

/* Responsive Design for Email Marketing */
@media (max-width: 768px) {
  .email-workflow-steps {
    flex-direction: column;
    gap: 30px;
  }

  .email-connection-network {
    display: none;
  }

  .email-workflow-step {
    max-width: 100%;
  }

  .workflow-title {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .email-marketing-workflow-container {
    padding: 20px 16px;
  }
}

/* Email Marketing Platform Specific Styles */
/* Email Services Showcase */
.email-services-showcase {
  margin-top: 60px;
  padding: 40px 0;
}

.email-services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  margin-bottom: 48px;
}

.campaigns-card .service-icon {
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
}

.smtp-card .service-icon {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
}

.analytics-card .service-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
}

.automation-card .service-icon {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

.service-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #000;
  margin-bottom: 8px;
}

.service-description {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 20px;
  line-height: 1.5;
}

.service-stats {
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.service-stats .stat-item {
  flex: 1;
}

.service-stats .stat-number {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #000;
  margin-bottom: 4px;
}

.service-stats .stat-label {
  font-size: 0.8rem;
  color: #666;
  font-weight: 500;
}

/* Responsive Design for Email Services */
@media (max-width: 768px) {
  .email-services-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .campaign-overview {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .interface-header {
    flex-direction: column;
    gap: 12px;
    text-align: center;
  }

  .interface-content {
    padding: 20px;
  }
}

@media (max-width: 480px) {
  .email-services-showcase {
    margin-top: 40px;
    padding: 20px 0;
  }

  .service-stats {
    flex-direction: column;
    gap: 12px;
  }

  .overview-item {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .activity-item {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }
}

/* Email Hero Section */
.email-hero-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #ffffff;
  padding: 120px 0 80px;
  position: relative;
  overflow: hidden;
}

.email-hero-section::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(0, 112, 243, 0.1) 0%,
      rgba(121, 40, 202, 0.1) 50%,
      rgba(16, 185, 129, 0.1) 100%);
  pointer-events: none;
}

.email-hero-content {
  position: relative;
  z-index: 2;
}

.email-hero-title {
  font-size: 3.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 24px;
  line-height: 1.1;
}

.email-hero-subtitle {
  font-size: 1.25rem;
  color: rgba(255, 255, 255, 0.9);
  max-width: 600px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

.email-hero-features {
  margin-bottom: 48px;
}

.email-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
  max-width: 800px;
  margin: 0 auto;
}

.email-feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255, 255, 255, 0.1);
  padding: 16px 20px;
  border-radius: 12px;
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  transition: all 0.3s ease;
}

.email-feature-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
}

.email-feature-item i {
  font-size: 1.5rem;
  color: #ffffff;
}

.email-feature-item span {
  font-size: 0.9rem;
  font-weight: 500;
  color: #ffffff;
}

.email-hero-actions {
  margin-bottom: 48px;
}

.email-hero-actions .btn {
  margin: 0 8px;
  padding: 16px 32px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 12px;
  transition: all 0.3s ease;
}

.email-hero-trust {
  margin-top: 32px;
}

.email-trust-stats {
  display: flex;
  justify-content: center;
  gap: 32px;
  flex-wrap: wrap;
}

.email-trust-stat {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.9rem;
}

.email-trust-stat strong {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 4px;
}

/* Email Feature Cards */
.email-features-grid {
  margin-bottom: 64px;
}

.email-feature-card {
  position: relative;
  overflow: hidden;
}

.email-feature-icon-container {
  text-align: center;
  margin-bottom: 24px;
  position: relative;
}

.email-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
  transition: all 0.3s ease;
}

.email-feature-icon i {
  font-size: 1.5rem;
  color: #ffffff;
}

.email-feature-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #f59e0b;
  color: #ffffff;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
  transform: rotate(15deg);
}

.email-feature-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 16px;
  text-align: center;
}

.email-feature-description {
  color: #6b7280;
  line-height: 1.6;
  margin-bottom: 24px;
  text-align: center;
}

.email-feature-stats {
  background: #f8fafc;
  border-radius: 12px;
  padding: 20px;
  margin: 24px 0;
  display: flex;
  justify-content: space-around;
  text-align: center;
}

.email-stat-item {
  flex: 1;
}

.email-stat-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 4px;
}

.email-stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.email-feature-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}

.email-highlight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: #4b5563;
}

.email-highlight-item i {
  color: #22c55e;
  font-size: 0.875rem;
  width: 16px;
}

/* Email Additional Features */
.email-additional-features {
  margin-top: 48px;
}

.email-feature-highlight-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 16px;
  padding: 32px;
  margin-bottom: 24px;
  transition: all 0.3s ease;
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.email-feature-highlight-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

.email-feature-icon-small {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.email-feature-icon-small i {
  font-size: 1.25rem;
  color: #ffffff;
}

.email-feature-content {
  flex: 1;
}

.email-feature-content .email-feature-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
  text-align: left;
}

.email-feature-content .email-feature-description {
  color: #6b7280;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* Email Customer Stats */
.email-customer-stats {
  margin-bottom: 64px;
}

.email-stat-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 20px;
  padding: 32px 24px;
  margin-bottom: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.email-stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

.email-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #3b82f6, #8b5cf6);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 16px;
}

.email-stat-icon i {
  font-size: 1.25rem;
  color: #ffffff;
}

.email-stat-content {
  margin-top: 16px;
}

.email-stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  line-height: 1;
}

.email-stat-label {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

/* Email Testimonials */
.email-testimonials-grid {
  margin-bottom: 64px;
}

.email-testimonial-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
  position: relative;
}

.email-testimonial-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

.email-testimonial-card.featured {
  border-color: #3b82f6;
  box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
}

.email-testimonial-badge {
  position: absolute;
  top: -8px;
  right: 24px;
  background: #f59e0b;
  color: #ffffff;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 600;
}

.email-testimonial-content {
  position: relative;
  z-index: 2;
}

.email-testimonial-rating {
  margin-bottom: 16px;
}

.email-testimonial-rating i {
  color: #f59e0b;
  margin-right: 4px;
}

.email-testimonial-text {
  font-size: 1.1rem;
  line-height: 1.6;
  color: #374151;
  margin-bottom: 24px;
  font-style: italic;
}

.email-testimonial-author {
  display: flex;
  align-items: center;
  gap: 16px;
}

.email-author-info {
  flex: 1;
}

.email-author-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.email-author-title {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* Responsive Design for Email Marketing */
@media (max-width: 768px) {
  .email-hero-title {
    font-size: 2.5rem;
  }

  .email-hero-subtitle {
    font-size: 1.1rem;
  }

  .email-feature-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .email-trust-stats {
    gap: 16px;
  }

  .email-feature-highlight-card {
    flex-direction: column;
    text-align: center;
  }

  .email-feature-icon-small {
    margin: 0 auto 16px;
  }
}

.feature-card .card-content {
  padding: 0;
}

.feature-card .feature-stats {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.feature-card .stat-item {
  flex: 1;
}

.feature-card .stat-number {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 4px;
}

.feature-card .stat-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.feature-card .feature-highlights {
  list-style: none;
  padding: 0;
  margin: 0;
}

.feature-card .highlight-item {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  font-size: 0.9rem;
  color: #4b5563;
}

.feature-card .highlight-item i {
  color: #22c55e;
  font-size: 0.875rem;
  width: 16px;
}

/* Social Proof Section Styles */
.social-proof-section .customer-stats .stat-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 20px;
  padding: 32px 24px;
  margin-bottom: 30px;
  text-align: center;
  transition: all 0.3s ease;
}

.social-proof-section .stat-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

.social-proof-section .stat-card .stat-content {
  margin-top: 16px;
}

.social-proof-section .stat-card .stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: 8px;
  line-height: 1;
}

.social-proof-section .stat-card .stat-label {
  color: #6b7280;
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
}

.testimonials-grid .testimonial-card .testimonial-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.testimonials-grid .testimonial-card .testimonial-text {
  color: #374151;
  line-height: 1.6;
  margin-bottom: 24px;
  font-style: italic;
  flex: 1;
}

.testimonials-grid .testimonial-card .testimonial-author {
  margin-top: auto;
}

.testimonials-grid .testimonial-card .author-info {
  text-align: left;
}

.testimonials-grid .testimonial-card .author-name {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.testimonials-grid .testimonial-card .author-title {
  font-size: 0.875rem;
  color: #6b7280;
  margin: 0;
}

/* Success Story Cards */
.success-stories .success-story-card {
  background: #fff;
  border: 1px solid #eaeaea;
  border-radius: 20px;
  padding: 32px;
  margin-bottom: 30px;
  transition: all 0.3s ease;
  height: 100%;
}

.success-stories .success-story-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.1);
  border-color: #ddd;
}

.success-stories .success-story-card.featured {
  border-color: #3b82f6;
  background: linear-gradient(135deg, #f0f9ff, #ffffff);
}

.success-stories .success-story-card .story-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.success-stories .success-story-card .story-metrics {
  background: #f8fafc;
  border-radius: 12px;
  padding: 16px;
  margin: 20px 0;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.success-stories .success-story-card .metric-item {
  flex: 1;
}

.success-stories .success-story-card .metric-number {
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  color: #3b82f6;
  margin-bottom: 4px;
}

.success-stories .success-story-card .metric-label {
  font-size: 0.875rem;
  color: #6b7280;
}

.success-stories .success-story-card .story-features {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: auto;
}

.success-stories .success-story-card .feature-tag {
  background: #e0e7ff;
  color: #3730a3;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 0.75rem;
  font-weight: 500;
}

.modern-pricing-section .calculator-container {
  background: #ffffff;
  border: 1px solid #eaeaea;
  border-radius: 20px;
  padding: 40px;
  margin-bottom: 40px;
  position: relative;
  z-index: 1;
}

.calculator-container::before {
  content: "";
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
  border-radius: 24px;
  z-index: -1;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.calculator-container:hover::before {
  opacity: 1;
}

/* Pricing Slider Container */

.form-slider {
  display: block;
  width: 100%;
  margin-bottom: 24px;
}

.form-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 45px;
  height: 45px;
  background: var(--gradient-blue);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.3);
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.form-slider input[type="range"]::-webkit-slider-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 112, 243, 0.4);
}

.form-slider input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  background: var(--gradient-blue);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.3);
  border: none;
  transition: all 0.3s ease;
}

.form-slider input[type="range"]::-moz-range-thumb:hover {
  transform: scale(1.1);
  box-shadow: 0 6px 20px rgba(0, 112, 243, 0.4);
}

.form-slider input[type="range"]::-ms-thumb {
  width: 24px;
  height: 24px;
  background: var(--gradient-blue);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.3);
  border: none;
  transition: all 0.3s ease;
}

.form-slider input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #0070f3 0%, #7928ca 100%);
  border-radius: 4px;
  transition: all 0.3s ease;
}

.form-slider input[type="range"]::-moz-range-track {
  width: 100%;
  height: 8px;
  background: linear-gradient(to right, #0070f3 0%, #7928ca 100%);
  border-radius: 4px;
  border: none;
  transition: all 0.3s ease;
}

.modern-pricing-section .modern-pricing-card {
  border: 1px solid #e5e7eb;
  border-radius: 20px;
}

.modern-pricing-card:hover::after {
  opacity: 0.1;
}

.pricing-plan-name {
  font-size: 1.125rem;
  font-weight: 600;
  color: #6b7280;
  margin-bottom: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.pricing-volume {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0070f3;
  margin-bottom: 24px;
  position: relative;
  display: inline-block;
}

.pricing-volume::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #0070f3, #7928ca);
  border-radius: 1px;
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.modern-pricing-card:hover .pricing-volume::after {
  transform: scaleX(1);
}

.pricing-amount-container {
  margin-bottom: 32px;
}

.modern-pricing-section .pricing-amount {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  margin-bottom: 12px;
}

.modern-pricing-section .pricing-currency {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0070f3;
}

.modern-pricing-section .pricing-price {
  font-size: 3rem;
  font-weight: 800;
  color: #1f2937;
  line-height: 1;
  position: relative;
  overflow: hidden;
  margin-bottom: 10px;
}

.pricing-price::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg,
      transparent,
      rgba(255, 255, 255, 0.4),
      transparent);
  transition: left 0.6s ease;
}

.modern-pricing-card:hover .pricing-price::before {
  left: 100%;
}

.modern-pricing-section .pricing-period {
  font-size: 1.25rem;
  color: #6b7280;
  font-weight: 500;
}

.pricing-savings {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(16, 185, 129, 0.1);
  border-radius: 20px;
  margin: 0 auto;
  max-width: fit-content;
}

.pricing-savings .stat-label-base {
  color: #059669;
  font-weight: 600;
  font-size: 0.875rem;
}

/* Enhanced Pricing Features */
.pricing-features {
  margin-bottom: 32px;
}

.pricing-features .feature-item:last-child {
  border-bottom: none;
}

.pricing-features .feature-item:hover {
  background: rgba(0, 112, 243, 0.05);
  padding-left: 16px;
  border-radius: 8px;
}

.pricing-features .feature-item i {
  width: 20px;
  height: 20px;
  background: #10b981;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  flex-shrink: 0;
}

.pricing-features .feature-item span {
  color: #374151;
  font-weight: 500;
}

/* Enhanced Pricing Actions */
.pricing-actions {
  text-align: center;
}

.pricing-actions .btn-base {
  width: 100%;
  justify-content: center;
  font-size: 1.125rem;
  font-weight: 600;
  padding: 16px 32px;
  margin-bottom: 16px;
  border-radius: 12px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pricing-actions .btn-base:hover {
  transform: translateY(-2px);
}

.pricing-actions .btn-base.primary::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.6s ease;
}

.pricing-actions .btn-base.primary:hover::before {
  left: 100%;
}

.pricing-actions .stat-label-base {
  font-size: 0.875rem;
  color: #6b7280;
}

/* Responsive fixes */
@media (max-width: 768px) {
  .feature-card .feature-stats {
    flex-direction: column;
    gap: 16px;
  }

  .modern-faq-section .category-tabs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    align-items: center;
  }

  .modern-faq-section .category-tab {
    width: 100%;
    max-width: 300px;
    justify-content: center;
  }

  .final-cta-section .cta-title {
    font-size: 2rem;
  }

  .final-cta-section .cta-features {
    flex-direction: column;
    gap: 16px;
  }

  .final-cta-section .cta-actions,
  .cta-feature {
    flex-direction: column;
    align-items: center;
  }

  .final-cta-section .cta-actions .btn {
    width: 100%;
    max-width: 300px;
  }

  /* Enhanced Pricing Responsive */

  .modern-pricing-card {
    padding: 32px 24px;
  }

  .pricing-price {
    font-size: 2.5rem;
  }
}

/* Additional responsive styles for mobile */
@media (max-width: 480px) {
  .modern-pricing-card {
    padding: 24px 16px;
  }

  .pricing-price {
    font-size: 2rem;
  }

  .pricing-features .feature-item {
    padding: 8px 0;
  }

  .pricing-actions .btn-base {
    font-size: 1rem;
    padding: 14px 24px;
  }
}

.policy-item {
  padding: 20px;
  border-radius: 12px;
  border: 2px solid;
  transition: all 0.3s ease;
}

.policy-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.policy-item.allowed {
  background: #f0fdf4;
  border-color: #10b981;
}

.policy-item.not-allowed {
  background: #fef2f2;
  border-color: #ef4444;
}

.policy-icon {
  width: 25px;
  height: 25px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 1rem;
  margin-bottom: 16px;
}

.policy-item.allowed .policy-icon {
  background: #10b981;
}

.policy-item.not-allowed .policy-icon {
  background: #ef4444;
}

.policy-content h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 12px;
  line-height: 1;
}

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

.policy-content li {
  padding: 2px 0;
  color: #4b5563;
  position: relative;
  padding-left: 24px;
  font-size: 0.9rem;
}

.policy-item.allowed .policy-content li:before {
  content: ">";
  position: absolute;
  left: 0;
  color: #10b981;
  font-weight: bold;
}

.policy-item.not-allowed .policy-content li:before {
  content: ">";
  position: absolute;
  left: 0;
  color: #ef4444;
  font-weight: bold;
}

/* Important Note Section */
.important-note {
  background: #fffbeb;
  border: 1px solid #fbbf24;
  border-radius: 12px;
  padding: 24px;
  margin: 32px 0;
}

.note-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}

.note-header i {
  color: #f59e0b;
  font-size: 1.25rem;
}

.note-header h4 {
  color: #92400e;
  font-size: 1.25rem;
  font-weight: 600;
  margin: 0;
}

.important-note p {
  color: #92400e;
  line-height: 1.6;
  margin-bottom: 24px;
}

/* Prohibited Scenarios */
.prohibited-scenarios {
  display: grid;
  gap: 16px;
}

.scenario-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #ef4444;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.875rem;
  flex-shrink: 0;
}

.scenario-content h5 {
  color: #dc2626;
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 4px;
}

.scenario-content p {
  color: #7f1d1d;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.4;
}

/* Content Section - Reusing existing pattern */
.content-section {
  padding: 0;
}

.content-body {
  color: #4b5563;
  line-height: 1.6;
}

/* Hero Visual Adjustments */
.hero-visual img {
  max-width: 100%;
  height: auto;
  opacity: 0.9;
}

/* Responsive Design for Refund Policy */
@media (max-width: 768px) {
  .policy-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .scenario-number {
    margin: 0 auto;
  }

  .important-note {
    padding: 20px;
  }

  .note-header {
    flex-direction: column;
    text-align: center;
    gap: 8px;
  }

  .stat-item {
    margin: auto;
  }
}

@media (max-width: 480px) {
  .policy-item {
    padding: 20px;
  }

  .highlight-item {
    padding: 16px;
  }

  .content-title {
    font-size: 1.25rem;
  }

  .important-note {
    padding: 16px;
  }
}

/* AI Interface Preview */
.ai-interface-preview {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.ticket-preview {
  margin-bottom: 20px;
}

.ticket-item {
  display: flex;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.ticket-item:hover {
  background: #f8fafc;
}

.ticket-item.incoming {
  background: #f0f9ff;
  border-left: 3px solid #3b82f6;
}

.ticket-item.ai-response {
  background: #f0fdf4;
  border-left: 3px solid #10b981;
}

.ticket-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: #fff;
  flex-shrink: 0;
}

.ticket-icon {
  background: #3b82f6;
}

.ticket-icon.ai {
  background: #10b981;
}

.ticket-content {
  flex: 1;
}

.ticket-sender {
  font-weight: 600;
  font-size: 0.875rem;
  color: #1f2937;
  margin-bottom: 4px;
}

.ticket-message {
  font-size: 0.875rem;
  color: #4b5563;
  line-height: 1.5;
  margin-bottom: 4px;
}

.ticket-time {
  font-size: 0.75rem;
  color: #9ca3af;
}

.ai-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.ai-stats .stat-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f8fafc;
  border-radius: 8px;
}

.ai-stats .stat-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  color: #fff;
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.ai-stats .stat-content {
  flex: 1;
}

.ai-stats .stat-number {
  font-weight: 700;
  font-size: 1rem;
  color: #1f2937;
  line-height: 1;
}

.ai-stats .stat-label {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 2px;
}

/* Feature Actions */
.feature-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

.feature-actions .btn-base {
  flex: 1;
  justify-content: center;
}

/* Responsive Design for AI Components */
@media (max-width: 768px) {
  .ai-flow-visualization {
    flex-direction: row;
    gap: 24px;
    padding: 16px;
  }

  .flow-connection-animated {
    transform: rotate(90deg);
    margin: 16px 0;
  }

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

  .feature-actions {
    flex-direction: column;
  }

  .ticket-item {
    flex-direction: column;
    gap: 8px;
  }

  .ticket-icon {
    align-self: flex-start;
  }
}

/* True Masonry Gallery Layout */
.gallery-masonry-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

.gallery-masonry-grid {
  columns: 3;
  column-gap: 24px;
  column-fill: balance;
}

.gallery-card-wrapper {
  break-inside: avoid;
  margin-bottom: 24px;
  display: block;
  width: 100%;
  page-break-inside: avoid;
}

.gallery-card {
  height: auto;
  min-height: auto;
}

.gallery-card {
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  border: 1px solid #e5e7eb;
}

.gallery-card:hover {
  transform: translateY(-8px);
  box-shadow:
    0 20px 25px -5px rgba(0, 0, 0, 0.1),
    0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

.gallery-image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16/9;
}

.gallery-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

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

.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
      rgba(0, 0, 0, 0.8) 0%,
      rgba(0, 0, 0, 0.6) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: all 0.3s ease;
}

.gallery-card:hover .gallery-overlay {
  opacity: 1;
}

.overlay-content {
  text-align: center;
  color: #fff;
  padding: 24px;
}

.overlay-content h4 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #fff;
}

.overlay-content p {
  font-size: 0.875rem;
  margin-bottom: 16px;
  opacity: 0.9;
}

.overlay-content .btn-base:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  color: #fff;
}

.gallery-caption {
  padding: 20px;
  background: #fff;
}

.gallery-caption h5 {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 8px;
}

.gallery-caption p {
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  margin: 0;
}

/* Responsive columns for masonry */
@media (max-width: 1024px) {
  .gallery-masonry-grid {
    columns: 2;
    column-gap: 20px;
  }

  .gallery-card-wrapper {
    margin-bottom: 20px;
  }
}

@media (max-width: 768px) {
  .gallery-masonry-grid {
    columns: 1;
    column-gap: 0;
  }

  .gallery-masonry-container {
    padding: 0 16px;
  }

  .gallery-card-wrapper {
    margin-bottom: 16px;
  }

  .gallery-caption {
    padding: 16px;
  }

  .gallery-caption h5 {
    font-size: 1rem;
  }

  .overlay-content {
    padding: 16px;
  }

  .overlay-content h4 {
    font-size: 1.125rem;
  }
}

@media (max-width: 480px) {
  .gallery-masonry-container {
    margin-top: 24px;
  }

  .gallery-masonry-grid {
    gap: 12px;
  }

  .gallery-caption {
    padding: 12px;
  }

  .gallery-caption h5 {
    font-size: 0.875rem;
  }

  .gallery-caption p {
    font-size: 0.75rem;
  }

  .module-badge {
    font-size: 0.7rem;
    padding: 3px 10px;
  }
}

/* Image Modal Styles */
.image-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: all 0.3s ease;
}

.image-modal.active {
  opacity: 1;
  visibility: visible;
}

.modal-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(5px);
}

.modal-content {
  position: relative;
  background: transparent;
  max-width: 90vw;
  max-height: 90vh;
  overflow: hidden;
  transform: scale(0.8);
  transition: transform 0.3s ease;
}

.image-modal.active .modal-content {
  transform: scale(1);
}

.modal-img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain;
  max-height: 90vh;
  border-radius: 8px;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.3);
}

/* Gallery Modal Trigger Styles */
.gallery-modal-trigger {
  cursor: pointer;
  transition: all 0.3s ease;
}

.gallery-modal-trigger:hover {
  transform: scale(1.02);
}

/* Responsive Modal */
@media (max-width: 768px) {
  .modal-content {
    max-width: 95vw;
    max-height: 95vh;
    margin: 10px;
  }

  .modal-img {
    max-height: 95vh;
  }
}

@media (max-width: 480px) {
  .modal-content {
    max-width: 98vw;
    max-height: 98vh;
    margin: 5px;
  }

  .modal-img {
    max-height: 98vh;
  }
}

/* ==============================================
VPS PAGE SPECIFIC STYLES
============================================== */
/* VPS Infrastructure Visualization */
.vps-infrastructure-container {
  background: rgba(255, 255, 255, 0.05);
  min-height: 450px;
  max-width: 980px;
  margin: auto;
  border-radius: 15px;
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* Galaxy Background for VPS Features */
.galaxy-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  overflow: hidden;
}

.galaxy-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  background: radial-gradient(circle,
      rgba(0, 112, 243, 0.1) 0%,
      transparent 70%);
  border-radius: 50%;
  animation: galaxyRotate 20s linear infinite;
}

.galaxy-distant {
  position: absolute;
  top: 20%;
  right: 10%;
  width: 150px;
  height: 150px;
  background: radial-gradient(circle,
      rgba(121, 40, 202, 0.08) 0%,
      transparent 70%);
  border-radius: 50%;
  animation: galaxyFloat 15s ease-in-out infinite;
}

.star-field {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.star-dot {
  position: absolute;
  width: 2px;
  height: 2px;
  background: rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  animation: starTwinkle 3s ease-in-out infinite;
}

.star-dot:nth-child(1) {
  top: 20%;
  left: 15%;
  animation-delay: 0s;
}

.star-dot:nth-child(2) {
  top: 30%;
  right: 20%;
  animation-delay: 1s;
}

.star-dot:nth-child(3) {
  bottom: 25%;
  left: 25%;
  animation-delay: 2s;
}

.star-dot:nth-child(4) {
  bottom: 35%;
  right: 30%;
  animation-delay: 0.5s;
}

.star-dot:nth-child(5) {
  top: 50%;
  left: 10%;
  animation-delay: 1.5s;
}

.star-dot:nth-child(6) {
  top: 60%;
  right: 15%;
  animation-delay: 2.5s;
}

.cosmic-dust {
  position: absolute;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 70%);
  border-radius: 50%;
  animation: dustFloat 25s ease-in-out infinite;
}

.dust-1 {
  top: 10%;
  left: 20%;
  animation-delay: 0s;
}

.dust-2 {
  top: 70%;
  right: 15%;
  animation-delay: 8s;
}

.dust-3 {
  bottom: 20%;
  left: 60%;
  animation-delay: 16s;
}

@keyframes galaxyRotate {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  100% {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes galaxyFloat {

  0%,
  100% {
    transform: translateY(0px);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes dustFloat {

  0%,
  100% {
    transform: translateX(0px) translateY(0px) scale(1);
    opacity: 0.3;
  }

  33% {
    transform: translateX(30px) translateY(-15px) scale(1.1);
    opacity: 0.6;
  }

  66% {
    transform: translateX(-20px) translateY(25px) scale(0.9);
    opacity: 0.4;
  }
}

/* VPS Metric Cards */
.vps-metric-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  padding: 16px 20px;
  border-radius: 12px;
  text-align: center;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.vps-metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 112, 243, 0.2);
}

/* Modern CTA Section */

.cta-feature i {
  color: #10b981;
  font-size: 1rem;
}

/* Modern VPS Hero Visual Styles */
/* Background Grid */
.vps-background-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  opacity: 0.1;
  pointer-events: none;
}

.grid-line {
  position: absolute;
  background: #000;
}

.grid-line.horizontal {
  width: 100%;
  height: 1px;
}

.grid-line.horizontal:nth-child(1) {
  top: 20%;
}

.grid-line.horizontal:nth-child(2) {
  top: 50%;
}

.grid-line.horizontal:nth-child(3) {
  top: 80%;
}

.grid-line.vertical {
  height: 100%;
  width: 1px;
}

.grid-line.vertical:nth-child(4) {
  left: 20%;
}

.grid-line.vertical:nth-child(5) {
  left: 50%;
}

.grid-line.vertical:nth-child(6) {
  left: 80%;
}

/* Floating Elements */
.floating-elements {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.float-dot {
  position: absolute;
  width: 8px;
  height: 8px;
  background: rgba(0, 112, 243, 0.6);
  border-radius: 50%;
  animation: floatDot 6s ease-in-out infinite;
}

.dot-1 {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.dot-2 {
  top: 25%;
  right: 15%;
  animation-delay: 1.5s;
}

.dot-3 {
  bottom: 30%;
  left: 20%;
  animation-delay: 3s;
}

.dot-4 {
  bottom: 20%;
  right: 25%;
  animation-delay: 4.5s;
}

@keyframes floatDot {

  0%,
  100% {
    transform: translateY(0px);
    opacity: 0.6;
  }

  50% {
    transform: translateY(-15px);
    opacity: 1;
  }
}

/* Central Dashboard */
.central-dashboard {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 400px;
  z-index: 10;
}

.modern-vps-container .nav-item {
  background: 10px 20px;
  padding-bottom: 10px;
  font-size: 0.9rem;
  border-bottom: 2px solid transparent;
  color: #64748b;
}

.modern-vps-container .nav-item.active {
  color: #0070f3;
  border-bottom-color: #0070f3;
}

.dashboard-window {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  width: 100%;
  max-width: 600px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.dashboard-window:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

/* Dashboard Navigation */
.dashboard-nav {
  display: flex;
  padding: 16px 20px 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  gap: 24px;
  /* margin-bottom: 10px; */
}

/* Dashboard Content */
.dashboard-content {
  padding: 20px;
}

.instance-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: rgba(248, 250, 252, 0.8);
  border-radius: 12px;
  margin-bottom: 12px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.instance-row:hover {
  background: rgba(248, 250, 252, 1);
  transform: translateX(4px);
  border-color: rgba(0, 112, 243, 0.2);
}

.instance-status {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  animation: statusPulse 2s ease-in-out infinite;
}

.instance-status.online {
  background: #10b981;
  box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.7);
}

.instance-info {
  flex: 1;
}

.instance-name {
  font-size: 0.875rem;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.instance-specs {
  font-size: 0.75rem;
  color: #6b7280;
  font-family: "Monaco", "Menlo", monospace;
}

.instance-actions {
  flex-shrink: 0;
}

.action-btn {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.action-btn.primary {
  background: #0070f3;
  color: white;
}

.action-btn.primary:hover {
  background: #0060df;
  transform: translateY(-1px);
}

.action-btn.secondary {
  background: rgba(0, 112, 243, 0.1);
  color: #0070f3;
  border: 1px solid rgba(0, 112, 243, 0.2);
}

.action-btn.secondary:hover {
  background: rgba(0, 112, 243, 0.15);
  transform: translateY(-1px);
}

/* Metrics Overlay */
.metrics-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 5;
}

.metric-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 16px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
  gap: 12px;
  transition: all 0.3s ease;
  animation: metricFloat 4s ease-in-out infinite;
}

.metric-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

.metric-1 {
  top: 10%;
  left: 5%;
  animation-delay: 0s;
}

.metric-2 {
  top: 15%;
  right: 5%;
  animation-delay: 1.3s;
}

.metric-3 {
  bottom: 10%;
  left: 10%;
  animation-delay: 2.6s;
}

.metric-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.125rem;
  color: white;
  background: #333;
  flex-shrink: 0;
}

/* Responsive Design for VPS Page */
@media (max-width: 768px) {
  .modern-vps-container {
    min-height: 400px;
    padding: 20px 15px;
  }

  .dashboard-window {
    max-width: 100%;
    margin: 0 10px;
  }

  .window-header {
    padding: 12px 16px;
  }

  .dashboard-nav {
    padding: 12px 16px 0;
    gap: 16px;
  }

  .nav-item {
    padding: 6px 8px;
    font-size: 0.8rem;
  }

  .dashboard-content {
    padding: 16px;
  }

  .instance-row {
    padding: 12px;
  }

  .metric-card {
    padding: 12px;
  }

  .metric-1 {
    top: 5%;
    left: 2%;
  }

  .metric-2 {
    top: 10%;
    right: 2%;
  }

  .metric-3 {
    bottom: 5%;
    left: 5%;
  }

  .cta-title {
    font-size: 2rem;
  }

  .cta-description {
    font-size: 1.125rem;
  }

  .cta-features {
    flex-direction: column;
    gap: 16px;
  }
}

@media (max-width: 480px) {
  .modern-vps-container {
    min-height: 300px;
    padding: 20px 10px;
  }

  .dashboard-nav {
    flex-direction: column;
    gap: 8px;
  }

  .nav-item {
    justify-content: center;
  }

  .instance-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .metric-card {
    padding: 10px;
    gap: 8px;
  }

  .metric-icon {
    width: 32px;
    height: 32px;
    font-size: 1rem;
  }

  .metric-value {
    font-size: 1rem;
  }

  .cta-title {
    font-size: 1.75rem;
  }

  .cta-actions .hero-btn-primary.enhanced,
  .cta-actions .hero-btn-secondary.enhanced {
    padding: 14px 24px;
    font-size: 1rem;
  }
}

/* Enhanced OS Management Features Card */
.os-management-card {
  background: #fff;
  backdrop-filter: blur(10px);
  border-radius: 20px;
  padding: 32px;
  border: 1px solid rgb(7 7 7 / 13%);
  position: relative;
  overflow: hidden;
}

.os-management-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

/* Header Section */
.os-management-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.os-management-header .feature-icon-container {
  flex-shrink: 0;
  font-size: 1.5rem;
}

.os-management-header .icon-base {
  width: 60px;
  height: 60px;
  background: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);
  color: white;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  position: relative;
  overflow: hidden;
}

.os-management-header .icon-base::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg,
      transparent,
      rgba(255, 255, 255, 0.2),
      transparent);
  transform: translateX(-100%);
  animation: iconShine 3s ease-in-out infinite;
}

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

  50% {
    transform: translateX(100%);
  }

  100% {
    transform: translateX(100%);
  }
}

.feature-header-content {
  flex: 1;
}

.feature-subtitle {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

.feature-status-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  border-radius: 20px;
  flex-shrink: 0;
}

.status-indicator {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  animation: statusPulse 2s ease-in-out infinite;
}

.status-text {
  font-size: 0.75rem;
  font-weight: 600;
  color: #10b981;
}

/* Interactive Features Grid */
.os-features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin-bottom: 32px;
}

.os-feature-item {
  background: #fff;
  border: 1px solid rgb(0 0 0 / 14%);
  border-radius: 16px;
  padding: 20px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.os-feature-item::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.os-feature-item:hover::before {
  opacity: 1;
}

.feature-icon-bg {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  border-radius: 12px;
  opacity: 0.1;
  transition: all 0.3s ease;
}

.feature-icon-bg.deployment {
  background: #0070f3;
}

.feature-icon-bg.updates {
  background: #10b981;
}

.feature-icon-bg.scaling {
  background: #8b5cf6;
}

.feature-icon-bg.security {
  background: #f59e0b;
}

.feature-icon-bg.rebuild {
  background: #ef4444;
}

.feature-icon-bg.access {
  background: #06b6d4;
}

.feature-content {
  position: relative;
  z-index: 2;
}

.feature-name {
  font-size: 1.15rem;
}

.email-features .feature-name {
  line-height: 1.05;
  font-size: 1rem;
  padding: 0;
  margin: 0;
}

.feature-metric {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

/* Feature Highlights */
.os-highlights {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.os-highlights .highlight-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: rgb(255 255 255 / 99%);
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
}

.os-highlights .highlight-item:hover {
  background: rgba(255, 255, 255, 0.8);
  transform: translateX(4px);
  border-color: rgba(0, 112, 243, 0.2);
}

.os-highlights .highlight-item i {
  color: #10b981;
  font-size: 1rem;
  flex-shrink: 0;
}

.os-highlights .highlight-item span {
  font-size: 0.875rem;
  color: #374151;
  font-weight: 500;
}

/* Responsive Design for OS Management Card */
@media (max-width: 768px) {
  .os-management-card {
    padding: 24px;
  }

  .os-management-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    text-align: center;
  }

  .os-management-header .icon-base {
    width: 50px;
    height: 50px;
    font-size: 1.25rem;
  }

  .feature-title {
    font-size: 1.25rem;
  }

  .os-features-grid {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-bottom: 24px;
  }

  .os-feature-item {
    padding: 16px;
  }

  .feature-icon-wrapper {
    width: 40px;
    height: 40px;
  }

  .feature-icon-wrapper i {
    font-size: 1.125rem;
  }

  .os-highlights {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

@media (max-width: 480px) {
  .os-management-card {
    padding: 20px;
  }

  .os-management-header {
    gap: 12px;
  }

  .feature-title {
    font-size: 1.125rem;
  }

  .feature-subtitle {
    font-size: 0.8rem;
  }

  .os-feature-item {
    padding: 14px;
  }

  .feature-icon-wrapper i {
    font-size: 1rem;
  }

  .feature-description {
    font-size: 0.8rem;
  }

  .os-highlights .highlight-item {
    padding: 10px 12px;
  }

  .os-highlights .highlight-item span,
  .tool-label {
    font-size: 0.8rem;
  }
}

.oldprice {
  text-decoration: line-through;
  color: #a3a3a3;
  font-size: 0.875rem;
}

/* -----------------------------
   Border
------------------------------ */
.border {
  border: 1px solid rgb(243 241 241) !important;
}

.border-top {
  border-top: 1px solid rgba(17, 17, 17, 0.08) !important;
}

.border-end {
  border-right: 1px solid rgba(17, 17, 17, 0.08) !important;
}

.border-bottom {
  border-bottom: 1px solid rgba(17, 17, 17, 0.08) !important;
}

.border-start {
  border-left: 1px solid rgba(17, 17, 17, 0.08) !important;
}

.border-0 {
  border: 0 !important;
}

.border-top-0 {
  border-top: 0 !important;
}

.border-end-0 {
  border-right: 0 !important;
}

.border-bottom-0 {
  border-bottom: 0 !important;
}

.border-start-0 {
  border-left: 0 !important;
}

/* -----------------------------
   Border Widths
------------------------------ */
.border-1 {
  border-width: 1px !important;
}

.border-2 {
  border-width: 2px !important;
}

.border-3 {
  border-width: 3px !important;
}

.border-4 {
  border-width: 4px !important;
}

.border-5 {
  border-width: 5px !important;
}

/* -----------------------------
   Border Radius
------------------------------ */
.rounded {
  border-radius: 0.25rem !important;
}

.rounded-0 {
  border-radius: 0 !important;
}

.rounded-1 {
  border-radius: 0.2rem !important;
}

.rounded-2 {
  border-radius: 0.25rem !important;
}

.rounded-3 {
  border-radius: 0.3rem !important;
}

.rounded-4 {
  border-radius: 0.5rem !important;
}

.rounded-5 {
  border-radius: 1rem !important;
}

.rounded-top {
  border-top-left-radius: 0.25rem;
  border-top-right-radius: 0.25rem;
}

.rounded-end {
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-bottom {
  border-bottom-left-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
}

.rounded-start {
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}

.rounded-circle {
  border-radius: 50% !important;
}

.rounded-pill {
  border-radius: 50rem !important;
}

/* -----------------------------
   Border Colors
------------------------------ */
.border-primary {
  border-color: #0d6efd !important;
}

.border-secondary {
  border-color: #6c757d !important;
}

.border-success {
  border-color: #198754 !important;
}

.border-danger {
  border-color: #dc3545 !important;
}

.border-warning {
  border-color: #ffc107 !important;
}

.border-info {
  border-color: #0dcaf0 !important;
}

.border-light {
  border-color: #f8f9fa !important;
}

.border-dark {
  border-color: #212529 !important;
}

.border-white {
  border-color: #fff !important;
}

/* -----------------------------
   Optional Border Styles
   (Bootstrap does NOT include these)
------------------------------ */
.border-dashed {
  border-style: dashed !important;
}

.border-dotted {
  border-style: dotted !important;
}

.border-solid {
  border-style: solid !important;
}

.custom-grid-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.custom-grid-card {
  border-radius: 12px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  min-height: 335px;
  position: relative;
  border: 1px solid #e8e8e8;
}

.custom-grid-card-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #001e50;
  margin: 0 0 12px 0;
}

.custom-grid-card-description {
  font-size: 1.1rem;
  color: #575757;
  margin: 0;
  flex: 1;
}

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

.host-rating {
  background: linear-gradient(90deg,
      rgb(224 241 227) 0%,
      rgb(228 242 231 / 29%) 40%,
      rgb(237 238 255 / 29%) 60%,
      rgb(237 238 255) 100%);
  padding: 1.5rem;
  text-align: center;
}

.host-rating-content {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.host-rating-text-group,
.host-rating-stars-group,
.host-rating-logos-group {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.25rem;
}

.host-rating img {
  height: 25px;
}

.inline-divider {
  display: inline-block;
  align-self: stretch;
  width: 1px;
  min-height: 1em;
  background-color: rgb(66 134 244);
  opacity: 0.25;
}

.z-downtime,
.p-hosting,
.domain-options {
  position: absolute;
  top: 70%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 75%;
  height: auto;
}

.p-hosting {
  transform: translate(-10%, -35%);
}

.domain-options {
  width: 220px;
  transform: translate(-5%, -20%);
  filter: grayscale(1);
}

@media (max-width: 768px) {
  .custom-grid-layout {
    grid-template-columns: 1fr;
    overflow: hidden;
  }

  .custom-grid-card {
    min-height: 275px;
    overflow: hidden;
  }

  .custom-grid-card-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #0965f3;
    margin: 0 0 12px 0;
  }

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

  .support-section .support-header {
    min-height: 500px;
  }

  .support-section::before {
    margin-top: 260px;
    background-size: 100%;
    background-position: 0% -50px;
  }

  .host-rating {
    background: linear-gradient(90deg,
        rgb(224 241 227) 0%,
        rgb(228 242 231 / 29%) 40%,
        rgb(237 238 255 / 29%) 60%,
        rgb(237 238 255) 100%);
    padding: 1.5rem;
    text-align: center;
  }

  .host-rating-content {
    flex-direction: column;
    gap: 0.5rem;
  }

  .host-rating-text-group {
    flex-wrap: wrap;
    gap: 0.25rem;
  }

  .host-rating-text-group .inline-divider {
    display: none;
  }

  .host-rating-stars-group {
    margin: 0;
  }

  .host-rating-logos-group {
    gap: 1rem;
  }

  .host-rating-logos-group .inline-divider {
    display: none;
  }

  .host-rating-logos-group img {
    margin: 0 !important;
  }

  .custom-grid-layout .grid-card-span-2 {
    grid-column: span 1;
  }

  .z-downtime,
  .p-hosting,
  .domain-options {
    top: 125% !important;
    left: 50%;
  }

  .p-hosting {
    position: absolute;
    top: 80% !important;
    left: 60%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    height: auto;
  }

  .domain-options {
    top: 85% !important;
    left: 75%;
    transform: translate(-50%, -50%);
    max-width: 100%;
    height: auto;
  }

  .feature-category-content.active {
    padding: 0;
    border: 0;
  }

  .pe-16 {
    padding-right: 6rem !important;
  }
}

/* Plan features toggle */
.plan-features-toggle-wrapper {
  margin-top: 1rem;
  text-align: center;
}

.plan-features-more-container {
  transition:
    opacity 0.3s ease,
    max-height 0.3s ease;
  overflow: visible;
}

.plan-features-more-container.is-expanded {
  display: block !important;
  opacity: 1;
}

.plan-features-toggle-text {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: relative;
  padding-bottom: 4px;
}

.plan-features-toggle-text span,
.plan-features-toggle-text i {
  color: #4386f5;
  font-weight: 600;
}

.plan-features-toggle-text.is-expanded span,
.plan-features-toggle-text.is-expanded i {
  color: rgb(36, 36, 36);
}

.plan-features-toggle-text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background-color: #4386f5;
  transition: width 0.3s ease;
}

.plan-features-toggle-text:hover::after {
  width: 90%;
}

.plan-features-toggle-text:hover {
  color: #059669;
}

.toggle-arrow-icon {
  font-size: 0.85rem;
  transition: transform 0.3s ease;
}

.plan-features-toggle-text.is-expanded .toggle-arrow-icon {
  transform: rotate(180deg) !important;
}

/* Resource Comparison Section */
.resource-comparison-section {
  padding: 80px 0;
  position: relative;
}

.resource-header {
  margin-bottom: 3rem;
}

.plan-card-header {
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.plan-badge {
  display: inline-block;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.875rem;
  font-weight: 600;
  margin-bottom: 1rem;
  letter-spacing: 0.3px;
}

.starter-badge {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fde68a;
}

.plan-card-title {
  font-size: 1.5rem;
  font-weight: 700;
  color: #171717;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.plan-card-subtitle {
  font-size: 1rem;
  color: #737373;
  line-height: 1.5;
  margin: 0;
}

.stat-label {
  font-size: 0.875rem;
  font-weight: 600;
  color: #01abff;
  margin-bottom: 0.5rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.comparison-highlight-card {
  background: #fff;
  padding: 2rem;
  position: relative;
  overflow: hidden;
}

@keyframes pulse {

  0%,
  100% {
    opacity: 0.5;
  }

  50% {
    opacity: 0.8;
  }
}

.highlight-content {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

.highlight-text {
  flex: 1;
}

.highlight-description {
  font-size: 1rem;
  color: #4b5563;
  line-height: 1.7;
  margin: 0;
}

.highlight-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  position: relative;
  z-index: 1;
}

.highlight-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 12px;
  font-size: 0.95rem;
  color: #374151;
  font-weight: 500;
  transition: all 0.3s ease;
}

.highlight-feature-item i {
  color: #10b981;
  font-size: 1.25rem;
  flex-shrink: 0;
}

/* Competitor Comparison Table */
.competitor-comparison-table {
  /* background: #ffffff; */
  /* border-radius: 20px; */
  /* padding: 2.5rem; */
  /* box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); */
  /* border: 1px solid #e5e7eb; */
  margin-bottom: 2rem;
}

.comparison-table-header {
  text-align: center;
  margin-bottom: 2.5rem;
}

.comparison-title {
  font-size: 2rem;
  color: #171717;
  margin-bottom: 0.75rem;
}

.comparison-subtitle {
  font-size: 1.1rem;
  color: #6b7280;
  margin: 0;
}

.comparison-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 1.5rem;
}

.comparison-table thead {
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.comparison-table th {
  padding: 1rem 1rem;
  text-align: center;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: #fff;
  border-top: 1px solid #f3f4f6;
  border-bottom: 1px solid #f3f4f6;
}

.comparison-table th.feature-column {
  text-align: left;
  font-size: 1rem;
  color: #171717;
  padding-left: 2rem;
  width: 25%;
}

.comparison-table th.cyberin-column,
.comparison-table th.hostyindia-column {
  border-left: 1px solid #e6e7eb;
  border-right: 1px solid #e6e7eb;
}

.comparison-table th.competitor-column {
  background: #fff;
}

.provider-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

.provider-header.featured {
  position: relative;
}

.provider-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.75rem;
  border-radius: 12px;
  font-weight: 600;
  margin-top: 0.25rem;
}

.comparison-table tbody tr {
  border-bottom: 1px solid #f3f4f6;
  transition: background-color 0.2s ease;
  background: #fff;
}

.comparison-table tbody tr:hover {
  background-color: #fff;
}

.comparison-table td {
  padding: 1.25rem 0.5rem;
  text-align: center;
  vertical-align: middle;
}

.comparison-table td.feature-name {
  text-align: left;
  font-weight: 600;
  color: #374151;
  font-size: 0.9rem;
  padding-left: 2rem;
}

.comparison-table td.feature-name i {
  margin-right: 0.5rem;
}

.comparison-table td.cyberin-value {
  background: linear-gradient(135deg,
      rgba(240, 249, 255, 0.5) 0%,
      rgba(224, 242, 254, 0.5) 100%);
  border-left: 1px solid #f1f2f2;
  border-right: 1px solid #f1f2f2;
  font-weight: 600;
}

.comparison-table td.competitor-value {
  color: #6b7280;
}

.value-text {
  display: block;
  font-size: 1rem;
  font-weight: 500;
  color: #171717;
  margin-bottom: 0.25rem;
}

.value-label {
  display: block;
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

/* Responsive Design for Resource Comparison Section */
@media (max-width: 768px) {
  .resource-comparison-section {
    padding: 60px 0;
  }

  .plan-card-title {
    font-size: 1.25rem;
  }

  .stat-value {
    font-size: 1.5rem;
  }

  .highlight-content {
    flex-direction: column;
    gap: 1.5rem;
  }

  .highlight-title {
    font-size: 1.5rem;
  }

  .highlight-description {
    font-size: 1rem;
  }

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

  .comparison-highlight-card {
    padding: 2rem 1.5rem;
  }

  .competitor-comparison-table {
    padding: 1.5rem 1rem;
    overflow-x: auto;
  }

  .comparison-table {
    min-width: 800px;
  }

  .comparison-table th,
  .comparison-table td {
    padding: 1rem 0.75rem;
    font-size: 0.875rem;
  }

  .value-text {
    font-size: 1.1rem;
  }

  .comparison-table td.cyberin-value .value-text {
    font-size: 1.25rem;
  }

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

/* ============================================
   PREMIUM cPANEL LICENSES SECTION STYLES
   ============================================ */

.cpanel-licenses-section {
  padding: 60px 0;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
}

.cpanel-licenses-header {
  margin-bottom: 40px;
}

.cpanel-licenses-header .section-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 20px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 16px;
}

.cpanel-licenses-header .section-badge i {
  font-size: 14px;
}

.cpanel-licenses-header .section-title {
  font-size: 36px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 12px;
  line-height: 1.2;
}

.cpanel-licenses-header .section-subtitle {
  font-size: 16px;
  color: #64748b;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Billing Toggle Styles */
.billing-toggle-wrapper {
  margin-bottom: 35px;
}

.billing-toggle {
  display: inline-flex;
  align-items: center;
  background: #f1f5f9;
  border-radius: 50px;
  padding: 5px;
  position: relative;
  box-shadow: inset 0 2px 4px rgba(0,0,0,0.06);
}

.billing-toggle .toggle-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  border: none;
  background: transparent;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  z-index: 2;
}

.billing-toggle .toggle-btn.active {
  color: #1e293b;
}

.billing-toggle .toggle-slider {
  position: absolute;
  left: 5px;
  top: 5px;
  width: calc(50% - 5px);
  height: calc(100% - 10px);
  background: white;
  border-radius: 50px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
}

.billing-toggle.yearly-active .toggle-slider {
  transform: translateX(100%);
}

.toggle-save {
  display: inline-block;
  padding: 3px 8px;
  background: #10b981;
  color: white;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Category Tabs - Horizontal Scrollable */
.license-category-tabs {
  display: flex;
  justify-content: flex-start;
  gap: 10px;
  margin-bottom: 35px;
  flex-wrap: nowrap;
  overflow-x: auto;
  padding: 5px 0;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.license-category-tabs::-webkit-scrollbar {
  display: none;
}

.license-category-tabs .category-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;
  flex-shrink: 0;
}

.license-category-tabs .category-tab:hover {
  border-color: #667eea;
  color: #667eea;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.15);
}

.license-category-tabs .category-tab.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-color: transparent;
  color: white;
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
}

.license-category-tabs .tab-icon {
  font-size: 16px;
}

/* Products Container */
.license-products-container {
  position: relative;
  min-height: 300px;
}

/* Products Grid */
.license-products-grid {
  display: none;
  animation: fadeIn 0.4s ease;
}

.license-products-grid.active {
  display: block;
}

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

/* Horizontal Product Wrapper */
.products-horizontal-wrapper {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  padding: 10px 5px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 #f1f5f9;
}

.products-horizontal-wrapper::-webkit-scrollbar {
  height: 6px;
}

.products-horizontal-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.products-horizontal-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.products-horizontal-wrapper::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Horizontal Product Card */
.product-card-horizontal {
  background: white;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 25px 20px;
  min-width: 280px;
  max-width: 320px;
  flex-shrink: 0;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.product-card-horizontal:hover {
  border-color: #667eea;
  transform: translateY(-5px);
  box-shadow: 0 15px 35px rgba(102, 126, 234, 0.15);
}

.product-card-horizontal.featured {
  border: 2px solid #667eea;
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.2);
}

.product-card-horizontal.featured::before {
  content: "POPULAR";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
  padding: 5px 16px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* Badges */
.product-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
}

.product-badges .badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.badge-bestseller {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: white;
}

.badge-popular {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: white;
}

.badge-stable {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  color: white;
}

/* Product Header */
.product-header {
  margin-bottom: 20px;
  text-align: center;
}

.product-name {
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
  margin-bottom: 6px;
  line-height: 1.3;
}

.product-tagline {
  font-size: 13px;
  color: #64748b;
  line-height: 1.4;
}

/* Product Pricing */
.product-pricing {
  text-align: center;
  margin-bottom: 20px;
  padding: 16px 0;
  border-top: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;
}

.price-display {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  margin-bottom: 6px;
}

.currency-symbol {
  font-size: 24px;
  font-weight: 700;
  color: #667eea;
}

.price-value {
  font-size: 40px;
  font-weight: 800;
  color: #1e293b;
  line-height: 1;
}

.price-value.hidden {
  display: none;
}

.price-period {
  font-size: 16px;
  font-weight: 600;
  color: #94a3b8;
}

.price-save-badge {
  font-size: 12px;
  font-weight: 600;
}

.monthly-save {
  color: #64748b;
}

.yearly-save {
  color: #10b981;
}

.yearly-save.hidden {
  display: none;
}

/* Product Features */
.product-features {
  flex: 1;
  margin-bottom: 20px;
}

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

.feature-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid #f8fafc;
  font-size: 13px;
  color: #475569;
  line-height: 1.4;
}

.feature-list li:last-child {
  border-bottom: none;
}

.feature-list li i {
  color: #10b981;
  font-size: 14px;
  flex-shrink: 0;
}

/* Order Button */
.product-actions {
  margin-top: auto;
}

.btn-order-now {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 24px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.3s ease;
  border: none;
  cursor: pointer;
}

.btn-order-now:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.35);
  color: white;
  text-decoration: none;
}

.btn-order-now i {
  transition: transform 0.3s ease;
}

.btn-order-now:hover i {
  transform: translateX(3px);
}

/* Responsive Styles */
@media (max-width: 991px) {
  .cpanel-licenses-section {
    padding: 50px 0;
  }

  .cpanel-licenses-header .section-title {
    font-size: 28px;
  }

  .license-category-tabs {
    gap: 8px;
  }

  .license-category-tabs .category-tab {
    padding: 10px 18px;
    font-size: 13px;
  }

  .price-value {
    font-size: 32px;
  }
}

@media (max-width: 767px) {
  .cpanel-licenses-header .section-title {
    font-size: 24px;
  }

  .billing-toggle .toggle-btn {
    padding: 8px 16px;
    font-size: 13px;
  }

  .license-category-tabs .category-tab {
    padding: 8px 14px;
    font-size: 12px;
  }

  .license-category-tabs .tab-icon {
    font-size: 14px;
  }

  .product-card-horizontal {
    min-width: 260px;
    max-width: 300px;
    padding: 20px 16px;
  }

  .product-name {
    font-size: 18px;
  }

  .price-value {
    font-size: 28px;
  }
}

/* ============================================
   FAQ TAB STYLES (renamed from .category-tab to avoid
   conflict with license section .category-tab)
   ============================================ */
.faq-tab {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.6);
  color: #000;
  font-weight: 500;
  font-size: 1rem;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
}

.faq-tab:hover {
  background: rgb(255 255 255 / 78%);
}

.faq-tab.active {
  background: linear-gradient(45deg, #000, #000);
  border-color: transparent;
  color: #fff;
  position: relative;
  border: 1px solid transparent;
  border-radius: 50px;
}

.faq-tab i {
  font-size: 0.9rem;
}

.modern-faq-section .faq-tab {
  border-radius: 50px;
  font-size: 0.9rem;
}

@media (max-width: 768px) {
  .faq-tab {
    padding: 8px 16px;
    font-size: 0.85rem;
  }
}

/* ============================================================
   LIC-* STYLES  —  Premium License Section  (theme-matched)
   ============================================================ */

/* Section override — match theme gradient */
#cpanel-licenses.cpanel-licenses-section {
  background: linear-gradient(180deg, #f0f4ff 0%, #ffffff 100%) !important;
  padding: 80px 0 60px;
}

/* Billing Toggle */
.lic-toggle {
  display: inline-flex;
  align-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 50px;
  padding: 4px;
  position: relative;
  box-shadow: 0 2px 12px rgba(245, 158, 11, 0.12);
  margin-bottom: 36px;
}
.lic-tbtn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 32px;
  border: none;
  background: transparent;
  border-radius: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color .25s;
  white-space: nowrap;
  font-family: inherit;
}
.lic-tbtn.active { color: #1e293b; }
.lic-save-chip {
  display: inline-block;
  padding: 2px 9px;
  background: linear-gradient(135deg,#10b981,#059669);
  color: #fff;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.lic-tslider {
  position: absolute;
  top: 4px;
  left: 4px;
  width: calc(50% - 4px);
  height: calc(100% - 8px);
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-radius: 50px;
  box-shadow: 0 3px 12px rgba(245, 158, 11, 0.35);
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1;
  pointer-events: none;
}
.lic-tbtn.active { color: #fff !important; }

/* Category Tabs */
.lic-tabs-outer {
  overflow-x: auto;
  margin-bottom: 36px;
  padding: 4px 0 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.lic-tabs-outer::-webkit-scrollbar { display: none; }

.lic-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: nowrap;
  width: max-content;
  padding: 2px 4px;
}

.lic-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  background: #fff;
  border: 1.5px solid #dde3f0;
  border-radius: 50px;
  font-size: 13px;
  font-weight: 600;
  color: #5a6a8a;
  cursor: pointer;
  transition: all .25s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
  font-family: inherit;
}
.lic-tab:hover {
  border-color: #f59e0b;
  color: #f59e0b;
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(245, 158, 11, 0.18);
}
.lic-tab.active {
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  border-color: transparent;
  color: #fff;
  box-shadow: 0 6px 18px rgba(245, 158, 11, 0.38);
  transform: translateY(-1px);
}
.lic-tab-ico { font-size: 14px; }
.lic-tab-lbl { font-size: 13px; }

/* Grids wrapper */
.lic-grids-wrap { position: relative; min-height: 260px; }

.lic-grid {
  display: none;
  animation: licFadeIn .35s ease;
}
.lic-grid.active { display: block; }

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

/* Cards row — horizontal scroll */
.lic-cards-row {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  padding: 14px 2px 24px;
  scrollbar-width: thin;
  scrollbar-color: #c7d2fe #f0f4ff;
  align-items: stretch;
}
.lic-cards-row::-webkit-scrollbar       { height: 4px; }
.lic-cards-row::-webkit-scrollbar-track { background: #f0f4ff; border-radius: 3px; }
.lic-cards-row::-webkit-scrollbar-thumb { background: #c7d2fe; border-radius: 3px; }

/* Individual Card */
.lic-card {
  background: #fff;
  border: 1.5px solid #e8edfb;
  border-radius: 20px;
  padding: 30px 24px 24px;
  min-width: 275px;
  max-width: 315px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: all .3s ease;
  box-shadow: 0 2px 14px rgba(102,126,234,.07);
}
.lic-card:hover {
  border-color: #f59e0b;
  transform: translateY(-6px);
  box-shadow: 0 18px 40px rgba(245, 158, 11, 0.18);
}
.lic-card--pop {
  border: 2px solid #f59e0b;
  background: linear-gradient(180deg, #fffbf5 0%, #fff 100%);
  box-shadow: 0 8px 28px rgba(245, 158, 11, 0.22);
}

/* Popular ribbon */
.lic-pop-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(135deg,#f59e0b,#d97706);
  color: #fff;
  padding: 4px 18px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .6px;
  white-space: nowrap;
  box-shadow: 0 3px 10px rgba(245,158,11,.35);
}

/* Save badge (yearly only) */
.lic-save-badge {
  display: none;
  background: linear-gradient(135deg,#10b981,#059669);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  padding: 3px 12px;
  border-radius: 20px;
  text-align: center;
  margin-bottom: 10px;
  letter-spacing: .3px;
}

/* Badges */
.lic-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.lic-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
}
.lic-badge--stable  { background: #eff6ff; color: #1d4ed8; border: 1px solid #bfdbfe; }
.lic-badge--popular { background: #ecfdf5; color: #065f46; border: 1px solid #a7f3d0; }
.lic-badge--new     { background: #f5f3ff; color: #5b21b6; border: 1px solid #ddd6fe; }

/* Card name */
.lic-card-name {
  font-size: 18px;
  font-weight: 700;
  color: #1a1f3a;
  margin: 0 0 5px;
  text-align: center;
  line-height: 1.3;
}
.lic-card-tag {
  font-size: 12px;
  color: #64748b;
  text-align: center;
  margin: 0 0 10px;
}

/* Price area */
.lic-price-area {
  text-align: center;
  padding: 16px 0 12px;
  border-top: 1px solid #f0f4ff;
  border-bottom: 1px solid #f0f4ff;
  margin-bottom: 18px;
}
.lic-price-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
  margin-bottom: 5px;
}
.lic-sym  { font-size: 21px; font-weight: 700; color: #f59e0b; line-height: 1; }
.lic-amt  { font-size: 40px; font-weight: 800; color: #1a1f3a; line-height: 1; letter-spacing: -1px; }
.lic-per  { font-size: 14px; font-weight: 600; color: #94a3b8; margin-left: 2px; }
.lic-bill-note { font-size: 12px; font-weight: 600; min-height: 18px; }
.lic-m-lbl { color: #94a3b8; }
.lic-y-lbl { color: #10b981; }
.lic-hidden { display: none !important; }

/* Features list */
.lic-feats {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  flex: 1;
}
.lic-feats li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #f8faff;
  font-size: 13px;
  color: #4a5568;
  line-height: 1.4;
}
.lic-feats li:last-child { border-bottom: none; }
.lic-feats li i { color: #f59e0b; font-size: 13px; flex-shrink: 0; }

/* Order button */
.lic-order-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 20px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff !important;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none !important;
  transition: all 0.3s ease;
  margin-top: auto;
  border: none;
  cursor: pointer;
  letter-spacing: .3px;
}
.lic-order-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4);
}
.lic-order-btn i { transition: transform .3s ease; font-size: 12px; }
.lic-order-btn:hover i { transform: translateX(4px); }

/* Responsive */
@media (max-width: 1199px) {
  .lic-card { min-width: 260px; max-width: 300px; }
}
@media (max-width: 991px) {
  #cpanel-licenses.cpanel-licenses-section { padding: 60px 0 40px; }
  .lic-card { min-width: 250px; max-width: 285px; }
  .lic-amt  { font-size: 34px; }
}
@media (max-width: 767px) {
  #cpanel-licenses.cpanel-licenses-section { padding: 50px 0 30px; }
  .lic-tbtn { padding: 8px 16px; font-size: 13px; }
  .lic-tab  { padding: 8px 14px; font-size: 12px; }
  .lic-tab-ico { font-size: 12px; }
  .lic-card { min-width: 240px; max-width: 270px; padding: 26px 18px 20px; }
  .lic-card-name { font-size: 16px; }
  .lic-amt  { font-size: 28px; }
}