/*
  AmaGPT AI Listings CSS
  This style sheet uses a dark purple palette with neon accents to evoke a
  futuristic, AI‑centric aesthetic. Components are responsive and accessible,
  with clear typography, generous spacing and subtle hover effects.
*/
/* Variables */
:root {
  --bg-dark: #1f1145;
  --bg-deep: #2d1860;
  --primary: #8e43e7; /* vibrant violet */
  --secondary: #00d0d5; /* teal accent */
  --text-light: #f5f3fa;
  --text-muted: #bfaedc;
  --border-radius: 6px;
  --transition: 0.3s;
  /* Gradient colours for buttons */
  --btn-gradient-start: #8e43e7;
  --btn-gradient-end: #00d0d5;
  /* Additional accent colours for unique hover effects */
  --accent3: #e65aff;
  --accent4: #f5a623;
}
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: 'Poppins', sans-serif;
  color: var(--text-light);
  line-height: 1.6;
  /* Multi-layered radial gradients create soft orbs that glow subtly across the page. A linear base gradient ties the palette together. */
  background:
    radial-gradient(circle at 15% 25%, rgba(142, 67, 231, 0.35), transparent 60%),
    radial-gradient(circle at 80% 10%, rgba(0, 208, 213, 0.3), transparent 65%),
    radial-gradient(circle at 25% 85%, rgba(230, 90, 255, 0.3), transparent 65%),
    radial-gradient(circle at 90% 75%, rgba(245, 166, 35, 0.3), transparent 65%),
    linear-gradient(130deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  background-size: cover;
}
/* Gradient text for section headings */
h2 {
  font-weight: 700;
  color: var(--text-light);
  -webkit-background-clip: initial;
  -webkit-text-fill-color: var(--text-light);
}
/* Ensure in-page anchors scroll below the fixed navbar */
section {
  scroll-margin-top: 80px;
}
h1, h2, h3, h4, h5 {
  font-weight: 600;
  color: var(--text-light);
  line-height: 1.2;
}
p {
  margin-bottom: 1em;
  color: var(--text-muted);
}
a {
  color: var(--secondary);
  text-decoration: none;
  transition: color var(--transition);
}
a:hover,
a:focus {
  color: var(--primary);
}
img {
  display: block;
  max-width: 100%;
  border-radius: var(--border-radius);
}
.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
}
/* Navbar */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 1rem 0;
  background: transparent;
  z-index: 1000;
  transition: background var(--transition);
}
.navbar.scrolled {
  background: rgba(31, 17, 69, 0.95);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.nav-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.brand {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-light);
  margin-right: 2rem;
}
.highlight {
  color: var(--primary);
}
.nav-links {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1.2rem;
}
.nav-links li a {
  color: var(--text-light);
  font-weight: 500;
  font-size: 0.9rem;
  transition: color var(--transition);
}
.nav-links li a:hover {
  color: var(--primary);
}
.btn {
  display: inline-block;
  padding: 0.7rem 1.4rem;
  background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
  color: #fff;
  font-weight: 600;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 15px rgba(0, 208, 213, 0.4);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn:hover {
  background: linear-gradient(135deg, var(--btn-gradient-end), var(--btn-gradient-start));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 208, 213, 0.5);
}
.btn-large {
  padding: 0.9rem 2rem;
  font-size: 1.1rem;
}
/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  cursor: pointer;
  width: 24px;
  height: 18px;
  justify-content: space-between;
}
.hamburger span {
  width: 100%;
  height: 2px;
  background: var(--text-light);
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.hamburger.active span:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
.hamburger.active span:nth-child(2) {
  opacity: 0;
}
.hamburger.active span:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}
/* Hero */
.hero {
  height: 100vh;
  min-height: 600px;
  /* Use multi-layered radial gradients to create a rich, immersive hero background */
  background:
    radial-gradient(circle at 20% 30%, rgba(142, 67, 231, 0.4), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(0, 208, 213, 0.35), transparent 65%),
    radial-gradient(circle at 30% 80%, rgba(230, 90, 255, 0.35), transparent 65%),
    radial-gradient(circle at 85% 85%, rgba(245, 166, 35, 0.35), transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(140deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
  background-attachment: fixed;
  background-size: cover;
  position: relative;
  display: flex;
  align-items: center;
  text-align: center;
  color: #fff;
}
.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
  margin: 0 auto;
  padding-top: 4rem;
}
.hero h1 {
  font-size: 2.6rem;
  margin-bottom: 1rem;
}
.hero p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  color: #e2d7f7;
}
.btn-cta {
  background: var(--secondary);
  color: #1f1145;
}
/* About */
.about {
  background: var(--bg-deep);
  padding: 6rem 0;
}
.about-content {
  display: flex;
  flex-direction: row;
  gap: 3rem;
  align-items: center;
  flex-wrap: wrap;
}
.about-text {
  flex: 1 1 500px;
}
.about-image {
  flex: 1 1 400px;
  display: flex;
  justify-content: center;
}
.about-image img {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}
.stats {
  display: flex;
  gap: 2rem;
  margin-top: 2rem;
}
.stat {
  text-align: center;
}
.stat .number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--secondary);
}
.stat .label {
  margin-top: 0.3rem;
  color: var(--text-muted);
}
/* Features */
.features {
  padding: 5rem 0;
}
.features h2 {
  text-align: center;
  margin-bottom: 3rem;
}
.feature-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.feature-item {
  background: var(--bg-deep);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.feature-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
}
.feature-item .icon {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.8rem;
}
/* Process */
.process {
  background: var(--bg-deep);
  padding: 5rem 0;
}
.process h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.steps {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.step {
  background: var(--bg-dark);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  position: relative;
  padding-top: 3.5rem;
  text-align: center;
}
.step-number {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: #1f1145;
  border-radius: 50%;
  width: 45px;
  height: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 1.2rem;
}
/* Case Studies */
.case-studies {
  padding: 5rem 0;
}
.case-studies h2 {
  text-align: center;
  margin-bottom: 3rem;
}
.case-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
.case {
  background: var(--bg-deep);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.case h3 {
  margin-bottom: 0.7rem;
  color: var(--secondary);
}
/* FAQ */
.faq {
  background: var(--bg-deep);
  padding: 5rem 0;
}
.faq h2 {
  text-align: center;
  margin-bottom: 2.5rem;
}
.faq-item {
  max-width: 800px;
  margin: 0.5rem auto 1.5rem;
  background: var(--bg-dark);
  padding: 1.5rem 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.faq-item h3 {
  margin-bottom: 0.5rem;
  color: var(--primary);
}
/* Contact */
.contact {
  padding: 5rem 0;
  /* Match the hero’s multi-layered gradient for a cohesive call-to-action section */
  background:
    radial-gradient(circle at 20% 30%, rgba(142, 67, 231, 0.4), transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(0, 208, 213, 0.35), transparent 65%),
    radial-gradient(circle at 30% 80%, rgba(230, 90, 255, 0.35), transparent 65%),
    radial-gradient(circle at 85% 85%, rgba(245, 166, 35, 0.35), transparent 65%),
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.05), transparent 70%),
    linear-gradient(140deg, var(--bg-dark) 0%, var(--bg-deep) 100%);
  text-align: center;
  color: var(--text-light);
}
.contact h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
}
.contact p {
  margin-bottom: 2rem;
  font-size: 1.1rem;
  /* Light text for better contrast on dark gradient */
  color: var(--text-light);
}
.note {
  margin-top: 1rem;
  font-size: 0.9rem;
  opacity: 0.8;
  color: var(--text-muted);
}
/* Footer */
.footer {
  background: var(--bg-dark);
  padding: 2rem 0;
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.footer-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.footer .social {
  list-style: none;
  display: flex;
  gap: 1rem;
}
.footer .social a {
  color: var(--text-muted);
  font-size: 1.3rem;
  transition: color var(--transition);
}
.footer .social a:hover {
  color: var(--secondary);
}
/* AI Shopping Revolution */
.revolution {
  background: linear-gradient(180deg, #2d1860 0%, #1f1145 100%);
  padding: 5rem 0;
  text-align: center;
}
.revolution p {
  max-width: 800px;
  margin: 0 auto 1rem;
  color: var(--text-muted);
}
.revolution .btn {
  margin-top: 1.5rem;
}
/* Data & Expertise */
.data-expertise {
  background: linear-gradient(180deg, #1f1145 0%, #2d1860 100%);
  padding: 5rem 0;
  text-align: center;
}
.data-expertise p {
  max-width: 900px;
  margin: 0 auto 1rem;
  color: var(--text-muted);
}
/* Team */
.team {
  padding: 5rem 0;
  background: linear-gradient(180deg, #2d1860 0%, #1f1145 100%);
}
.team-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 3rem;
}
.member {
  text-align: center;
  background: var(--bg-deep);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.member img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid var(--secondary);
}
.member h3 {
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.member p {
  font-size: 0.9rem;
  color: var(--text-muted);
}
/* Pricing */
.pricing {
  background: linear-gradient(180deg, #1f1145 0%, #2d1860 100%);
  padding: 6rem 0;
  text-align: center;
}
.pricing-card {
  background: var(--bg-deep);
  padding: 3rem;
  border-radius: var(--border-radius);
  max-width: 600px;
  margin: 0 auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.pricing-card h3 {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}
/* Ensure pricing section headings remain legible */
.pricing h2 {
  background: none;
  -webkit-text-fill-color: var(--text-light);
  color: var(--text-light);
}
.pricing-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  text-align: left;
}
.pricing-card ul li {
  margin: 0.5rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
}
.pricing-card ul li i {
  color: var(--primary);
}
.pricing-card .guarantee {
  margin-top: 1rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
}
/* Trust */
.trust {
  background: linear-gradient(180deg, #2d1860 0%, #1f1145 100%);
  padding: 5rem 0;
  text-align: center;
}
.trust p {
  max-width: 800px;
  margin: 0 auto 1rem;
  color: var(--text-muted);
}
.badges {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin-top: 2rem;
}
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.badge i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.4rem;
}
.badge span {
  color: var(--text-muted);
}
/* Impact Section */
.impact-stats {
  display: flex;
  justify-content: center;
  gap: 2rem;
  margin: 2rem 0;
  flex-wrap: wrap;
}
.impact-item {
  text-align: center;
}
.impact-item .number {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--secondary);
}
.impact-item p {
  margin-top: 0.3rem;
  color: var(--text-muted);
}
/* Testimonials / Reviews */
.reviews {
  padding: 5rem 0;
}
/* ---------------------------------------------------------------------- */
/* Additional sections and unique hover effects added for enhanced UX      */
/* Methodology section */
.methodology {
  padding: 5rem 0;
  background: var(--bg-deep);
  text-align: center;
}
.methodology h2 {
  margin-bottom: 2.5rem;
}
.method-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.method-item {
  background: var(--bg-dark);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.method-item i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.7rem;
}
.method-item h3 {
  margin-bottom: 0.5rem;
  color: var(--secondary);
}
.method-item p {
  font-size: 0.95rem;
  color: var(--text-muted);
}
/* Team section styling */
.team {
  padding: 5rem 0;
  background: var(--bg-dark);
  text-align: center;
}
.team h2 {
  margin-bottom: 2.5rem;
}
.team-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.member {
  text-align: center;
  background: var(--bg-deep);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.member img {
  border-radius: 50%;
  width: 120px;
  height: 120px;
  object-fit: cover;
  margin-bottom: 1rem;
  border: 3px solid var(--secondary);
}
.member h3 {
  color: var(--secondary);
  margin-bottom: 0.3rem;
}
.member p {
  font-size: 0.85rem;
  color: var(--text-muted);
}
/* Unique hover effects for cards and steps */
/* Value items */
.value-item {
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.value-item:nth-child(1):hover {
  background: rgba(142, 67, 231, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(142, 67, 231, 0.3);
}
.value-item:nth-child(2):hover {
  background: rgba(0, 208, 213, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 208, 213, 0.3);
}
.value-item:nth-child(3):hover {
  background: rgba(230, 90, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(230, 90, 255, 0.3);
}
/* Steps unique hover */
.step {
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.step:nth-child(1):hover {
  background: rgba(142, 67, 231, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(142, 67, 231, 0.3);
}
.step:nth-child(2):hover {
  background: rgba(0, 208, 213, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 208, 213, 0.3);
}
.step:nth-child(3):hover {
  background: rgba(230, 90, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(230, 90, 255, 0.3);
}
/* Method items unique hover */
.method-item:nth-child(1):hover {
  background: rgba(142, 67, 231, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(142, 67, 231, 0.3);
}
.method-item:nth-child(2):hover {
  background: rgba(0, 208, 213, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 208, 213, 0.3);
}
.method-item:nth-child(3):hover {
  background: rgba(230, 90, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(230, 90, 255, 0.3);
}
.method-item:nth-child(4):hover {
  background: rgba(245, 166, 35, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(245, 166, 35, 0.3);
}
/* Team member hover */
.member:hover {
  background: rgba(0, 208, 213, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 208, 213, 0.3);
}
/* ---------------------------------------------------------------------- */
/* Layout utilities and new sections                                       */
/* Hide unused sections from the original template to focus on conversion */
/* Hide unused legacy sections to focus on the streamlined landing page */
/* Hide legacy sections from the original template that are no longer part of the streamlined page. */
.about,
.revolution,
.data-expertise,
.early-adoption,
.features,
.why,
.case-studies,
.process,
.methodology {
  display: none;
}
/* Hero tagline and benefits list */
.hero p.tagline {
  font-size: 1.1rem;
  margin-bottom: 1.2rem;
  color: #e2d7f7;
}
.hero-benefits {
  list-style: none;
  margin: 0 auto 2rem;
  padding: 0;
  max-width: 600px;
  text-align: left;
}
.hero-benefits li {
  margin: 0.4rem 0;
  position: relative;
  padding-left: 1.2rem;
  color: var(--text-light);
}
.hero-benefits li::before {
  content: "\2022";
  position: absolute;
  left: 0;
  color: var(--secondary);
  font-weight: bold;
}
/* ---------------------------------------------------------------------- */
/* Deliverables Section */
.deliverables {
  padding: 5rem 0;
  background: var(--bg-deep);
  text-align: center;
}
.deliverables h2 {
  margin-bottom: 2rem;
}
.deliverables-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.deliverable {
  background: var(--bg-dark);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.deliverable i {
  font-size: 2rem;
  margin-bottom: 0.7rem;
  color: var(--secondary);
}
.deliverable h3 {
  color: var(--secondary);
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}
.deliverable p {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.deliverable:nth-child(1):hover {
  background: rgba(142, 67, 231, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(142, 67, 231, 0.3);
}
.deliverable:nth-child(2):hover {
  background: rgba(0, 208, 213, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 208, 213, 0.3);
}
.deliverable:nth-child(3):hover {
  background: rgba(230, 90, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(230, 90, 255, 0.3);
}
.deliverable:nth-child(4):hover {
  background: rgba(245, 166, 35, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(245, 166, 35, 0.3);
}
.deliverable:nth-child(5):hover {
  background: rgba(102, 126, 234, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(102, 126, 234, 0.3);
}
/* Success Stories Section */
.success-stories {
  padding: 5rem 0;
  background: var(--bg-dark);
  text-align: center;
}
.success-stories h2 {
  margin-bottom: 2rem;
}
.success-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.success-item {
  background: var(--bg-deep);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
}
.success-item h3 {
  color: var(--secondary);
  margin-bottom: 0.4rem;
  font-size: 1.1rem;
}
.success-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
}
.success-item:nth-child(1):hover {
  background: rgba(142, 67, 231, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(142, 67, 231, 0.3);
}
.success-item:nth-child(2):hover {
  background: rgba(0, 208, 213, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 208, 213, 0.3);
}
.success-item:nth-child(3):hover {
  background: rgba(230, 90, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(230, 90, 255, 0.3);
}
/* Unique hover for metrics */
.metric {
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  border-radius: var(--border-radius);
  padding: 1rem 1.2rem;
}
.metric:nth-child(1):hover {
  background: rgba(142, 67, 231, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(142, 67, 231, 0.3);
}
.metric:nth-child(2):hover {
  background: rgba(0, 208, 213, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 208, 213, 0.3);
}
.metric:nth-child(3):hover {
  background: rgba(230, 90, 255, 0.15);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(230, 90, 255, 0.3);
}
/* Unique hover for team members */
.member {
  transition: transform var(--transition), box-shadow var(--transition), background var(--transition);
  padding-bottom: 1.5rem;
}
.member:nth-child(1):hover {
  background: rgba(142, 67, 231, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(142, 67, 231, 0.3);
}
.member:nth-child(2):hover {
  background: rgba(0, 208, 213, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(0, 208, 213, 0.3);
}
.member:nth-child(3):hover {
  background: rgba(230, 90, 255, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(230, 90, 255, 0.3);
}
.member:nth-child(4):hover {
  background: rgba(245, 166, 35, 0.1);
  transform: translateY(-5px);
  box-shadow: 0 8px 20px rgba(245, 166, 35, 0.3);
}
/* Value section styling */
.value-section {
  padding: 5rem 0;
  background: var(--bg-deep);
  text-align: center;
}
.value-section h2 {
  margin-bottom: 2.5rem;
}
.value-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.value-item {
  background: var(--bg-dark);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.value-item h3 {
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.value-item p {
  color: var(--text-muted);
  font-size: 0.95rem;
}
/* Proof & trust section styling */
.proof-section {
  padding: 5rem 0;
  background: var(--bg-dark);
  text-align: center;
}
.proof-section h2 {
  margin-bottom: 2rem;
}
.metrics {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}
.metric {
  text-align: center;
}
.metric .number {
  font-size: 2rem;
  font-weight: 700;
  color: var(--secondary);
}
.metric p {
  color: var(--text-muted);
}
.testimonials {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
  margin: 0 auto 2rem;
}
.testimonials blockquote {
  background: var(--bg-deep);
  border-left: 4px solid var(--primary);
  padding: 1.5rem 2rem;
  margin: 0;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.testimonials blockquote p {
  color: var(--text-light);
  font-style: italic;
}
.testimonials blockquote cite {
  display: block;
  margin-top: 0.5rem;
  color: var(--text-muted);
  font-size: 0.85rem;
}
.proof-section .badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--bg-deep);
  padding: 0.6rem 1rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
.badge i {
  color: var(--primary);
}
.badge span {
  color: var(--text-light);
  font-size: 0.9rem;
}
.reviews .testimonial-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin-top: 2rem;
}
.reviews blockquote {
  background: rgba(15, 17, 69, 0.8);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  position: relative;
}
.reviews blockquote p {
  font-style: italic;
  color: var(--text-muted);
}
.reviews blockquote cite {
  display: block;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--secondary);
}
/* Why Choose Section */
.why-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  margin-top: 3rem;
}
.why-item {
  text-align: center;
  background: rgba(15, 17, 69, 0.8);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  animation: fadeInUp 0.8s ease-out both;
}
.why-item i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 1rem;
}
.why-item h3 {
  margin-bottom: 0.5rem;
  color: var(--secondary);
}
.why-item p {
  color: var(--text-muted);
  font-size: 0.9rem;
}
/* Featured logos row */
.featured {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 2rem;
}
.featured i {
  font-size: 1.5rem;
  color: var(--secondary);
}
.featured-text {
  text-align: center;
  color: var(--text-muted);
  margin-top: 0.5rem;
}
/* Remove explicit backgrounds on sections to allow global overlay */
/* Make backgrounds transparent on legacy sections; exclude contact and pricing so their gradients remain visible */
.about,
.features,
.process,
.case-studies,
.faq,
.revolution,
.data-expertise,
.team,
.trust {
  background: transparent;
}
/* Fade-in-up animation */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}
/* Animate the gradient background across the page */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}
/* Apply animations to content cards */
.feature-item,
.step,
.case,
.member,
.pricing-card {
  animation: fadeInUp 0.8s ease-out both;
}
/* Staggered delays for features */
.feature-item:nth-child(1) {
  animation-delay: 0.1s;
}
.feature-item:nth-child(2) {
  animation-delay: 0.2s;
}
.feature-item:nth-child(3) {
  animation-delay: 0.3s;
}
.feature-item:nth-child(4) {
  animation-delay: 0.4s;
}
/* Staggered delays for steps */
.step:nth-child(1) {
  animation-delay: 0.1s;
}
.step:nth-child(2) {
  animation-delay: 0.2s;
}
.step:nth-child(3) {
  animation-delay: 0.3s;
}
.step:nth-child(4) {
  animation-delay: 0.4s;
}
/* Responsive */
@media (max-width: 768px) {
  .nav-links {
    position: fixed;
    top: 60px;
    right: -100%;
    width: 220px;
    background: var(--bg-dark);
    flex-direction: column;
    gap: 1.5rem;
    padding: 1.5rem;
    border-radius: var(--border-radius);
    transition: right var(--transition);
    z-index: 999;
  }
  .nav-links.open {
    right: 10px;
  }
  .hamburger {
    display: flex;
  }
  .about-content {
    flex-direction: column;
    text-align: center;
  }
  .stats {
    flex-direction: column;
    gap: 1.2rem;
  }
}
/* Decorative gradient overlay for sections (subtle nod to CTA colours) */
section:not(.hero) {
  position: relative;
  /* Semi-transparent dark overlay to allow page gradient to show through */
  background: rgba(15, 17, 69, 0.8);
  overflow: hidden;
}
section:not(.hero)::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, rgba(142, 67, 231, 0.2), rgba(0, 208, 213, 0.1));
  z-index: -1;
}
/* Unique overlays per section orientation */
.overlay-tl::before {
  background: radial-gradient(circle at top left, rgba(142, 67, 231, 0.35), rgba(0, 208, 213, 0));
}
.overlay-tr::before {
  background: radial-gradient(circle at top right, rgba(142, 67, 231, 0.35), rgba(0, 208, 213, 0));
}
.overlay-bl::before {
  background: radial-gradient(circle at bottom left, rgba(142, 67, 231, 0.35), rgba(0, 208, 213, 0));
}
.overlay-br::before {
  background: radial-gradient(circle at bottom right, rgba(142, 67, 231, 0.35), rgba(0, 208, 213, 0));
}
/* ---------------------------------------------------------------------- */
/* Custom sections for the updated landing page                             */
/* Benefits Section */
.benefits {
  padding: 6rem 0;
  text-align: center;
}
.benefit-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.benefit-item {
  background: var(--bg-dark);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition), box-shadow var(--transition);
}
.benefit-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.benefit-item h3 {
  margin-bottom: 0.6rem;
  color: var(--secondary);
}
.benefit-item p {
  color: var(--text-muted);
}
/* How Detail Section */
.how-detail {
  padding: 6rem 0;
  text-align: center;
}
.how-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.how-item {
  background: var(--bg-dark);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  transition: transform var(--transition), box-shadow var(--transition);
  text-align: center;
}
.how-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.how-item i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.8rem;
}
.how-item h3 {
  margin-bottom: 0.5rem;
  color: var(--secondary);
}
.how-item p {
  color: var(--text-muted);
  font-size: 0.95rem;
}
/* Pricing Plans */
.pricing-plans {
  padding: 6rem 0;
  text-align: center;
}
.pricing-plans h2 {
  margin-bottom: 3rem;
}
.plans-grid {
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.plan {
  background: var(--bg-dark);
  padding: 2rem;
  border-radius: var(--border-radius);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: transform var(--transition), box-shadow var(--transition);
}
.plan.featured {
  background: var(--bg-deep);
  border: 1px solid var(--primary);
}
.plan:hover {
  transform: translateY(-5px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.plan h3 {
  font-size: 1.4rem;
  color: var(--secondary);
  margin-bottom: 0.5rem;
}
.plan .price {
  font-size: 2rem;
  color: var(--secondary);
  margin-bottom: 1rem;
}
.plan ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  width: 100%;
  text-align: left;
}
.plan ul li {
  margin: 0.4rem 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
}
.plan ul li i {
  color: var(--primary);
}
.plan a {
  margin-top: auto;
}
/* Secondary Button */
.btn-secondary {
  background: var(--secondary);
  color: #1f1145;
  border-radius: var(--border-radius);
  padding: 0.7rem 1.4rem;
  font-weight: 600;
  box-shadow: 0 4px 15px rgba(0, 208, 213, 0.4);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  display: inline-block;
}
.btn-secondary:hover {
  opacity: 0.9;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 208, 213, 0.5);
}
/* ---------------------------------------------------------------------- */
/* Contact Form 7: Clean dark styling for AmazGPT */
.wpcf7-form {
  max-width: 600px;
  margin: 0 auto;
  background: rgba(31, 17, 69, 0.85);
  padding: 2rem;
  border-radius: 10px;
  box-shadow: 0 0 30px rgba(0, 208, 213, 0.15);
}
.wpcf7-form p {
  margin-bottom: 1.5rem;
}
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 textarea {
  width: 100%;
  padding: 1rem;
  background: rgba(255, 255, 255, 0.05);
  color: #f5f3fa;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  font-size: 1rem;
  transition: all 0.3s ease;
}
.wpcf7 input[type="text"]:focus,
.wpcf7 input[type="email"]:focus,
.wpcf7 textarea:focus {
  outline: none;
  border-color: var(--secondary);
  box-shadow: 0 0 10px rgba(0, 208, 213, 0.3);
}
.wpcf7 textarea {
  min-height: 140px;
  resize: vertical;
}
.wpcf7-submit {
  display: inline-block;
  padding: 0.9rem 2rem;
  background: linear-gradient(135deg, var(--btn-gradient-start), var(--btn-gradient-end));
  color: #fff;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: all 0.3s ease;
}
.wpcf7-submit:hover {
  opacity: 0.9;
  transform: translateY(-2px);
}
/* Optional: form response message styling */
.wpcf7-response-output {
  color: #00d0d5;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  border-left: 3px solid #00d0d5;
  background: rgba(0, 208, 213, 0.05);
  border-radius: 6px;
}

/* ===== Blog & Article Page Styles ===== */
.article-header {
  padding-top: 6rem;
  padding-bottom: 2rem;
  text-align: left;
}
.article-header h1 {
  font-size: 2.2rem;
  margin-bottom: 1rem;
}
.article-body {
  padding-top: 1rem;
  padding-bottom: 3rem;
}

.blog-list p,
.single-post p,
.article-body p,
.entry-content p {
  font-size: 0.9rem !important;
}

.blog-list .benefit-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  /* Force all grid rows to share the same height so that the Read More buttons
     align across cards.  Without this, cards of differing content length
     produce irregular heights and misaligned buttons. */
  grid-auto-rows: 1fr;
}
.blog-list .benefit-item {
  /* Layout: stack content vertically so the Read More button stays at the bottom. */
  display: flex;
  flex-direction: column;
  background: rgba(255, 255, 255, 0.05);
  padding: 1.5rem;
  border-radius: var(--border-radius);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  transition: transform var(--transition), box-shadow var(--transition);
  /* Set a minimum height so cards align neatly.  Adjust this value if you
     significantly change the amount of text on each card. */
  min-height: 22rem;
}
.blog-list .benefit-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.article-body,
.article-header {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.blog-list {
  background: transparent !important;
  position: relative;
  z-index: 1;
}

.blog-list::before {
  display: none !important;
}


.article-body::before,
.article-header::before {
  display: none !important;
}

/* ensure the Read More button appears at the bottom of each blog card */
.blog-list .benefit-item .btn {
  margin-top: auto;
  align-self: flex-start;
}