/*
 * Global stylesheet for the recreated Lon's My Space website.
 *
 * This design takes inspiration from the original Payhip store but
 * modernises it with clean typography, soft-glass cards and a dark
 * aesthetic. It is completely responsive and uses pure CSS for
 * layout so there are no external dependencies. Feel free to tweak
 * colours and spacing to suit your brand.
 */

/* Reset some default browser styles */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* Root variables for consistent colour palette */
:root {
  /* Updated palette to a brighter neon blue */
  --primary-col: #0095ff;
  --primary-col-light: #66e0ff;
  --background-col: #070c1f;
  --card-bg: rgba(255, 255, 255, 0.05);
  --text-col: #ffffff;
  --muted-col: #cccccc;
  /* Additional colours for review names and hero art */
  --review-name: #66b2ff;
}

body {
  background: var(--background-col);
  color: var(--text-col);
  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
  line-height: 1.6;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Animated background gradient for subtle motion */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  background: linear-gradient(120deg, #0a1931, #0b253e, #001f3f, #0b253e, #0a1931);
  animation: moveBg 40s linear infinite;
  z-index: -1;
  opacity: 0.5;
}

/* Floating particles overlay for subtle depth */
body::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2) 0.5px, rgba(255, 255, 255, 0) 1px) 0 0 / 4px 4px;
  opacity: 0.1;
  animation: moveDots 60s linear infinite;
  z-index: -2;
}

@keyframes moveDots {
  0% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(-1000px, -1000px);
  }
}

@keyframes moveBg {
  0% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(-25%, -25%);
  }
  100% {
    transform: translate(0, 0);
  }
}

/* Top notification bar for discount code */
/*
 * The announcement bar should immediately grab attention.  We invert
 * the colour scheme here: a crisp white bar with black text and a
 * gentle sliding animation that moves the message left and right.
 * On top of that, we add a subtle blue glow to help tie the element
 * into the overall colour palette.  The animation is defined
 * further below.
 */
/*
 * Announcement banner
 *
 * Make the discount message more legible by increasing the font size and weight
 * while preserving the slim look of the bar. Padding is slightly larger to
 * accommodate the bigger type. All other styling (background, shadow, etc.)
 * remains unchanged so the bar still ties into the overall theme.
 */
.banner {
  background: rgba(255, 255, 255, 0.9);
  color: #000000;
  /* Increase the font size and weight for better visibility */
  font-size: 0.9rem;
  font-weight: 600;
  /* Slightly increase vertical padding to balance the larger text */
  padding: 0.3rem 1rem;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  box-shadow: 0 0 15px rgba(102, 178, 255, 0.6), 0 0 30px rgba(102, 178, 255, 0.3);
  text-align: center;
}

/* Small text indicator for billing cycle on subscription products */
.billing-cycle {
  font-size: 0.8rem;
  color: var(--muted-col);
  margin-left: 0.25rem;
}

/* Inner container for banner text to allow scrolling animation */
.banner .banner-content {
  white-space: nowrap;
  display: inline-block;
  /* Bounce the announcement text back and forth across the bar */
  animation: slideText 12s ease-in-out infinite;
  padding-left: 100%;
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 2rem;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  position: sticky;
  top: 0;
  z-index: 100;
}

header .logo {
  font-size: 1.5rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--primary-col);
}

/* Logo emblem icon */
.logo-icon {
  width: 28px;
  height: 28px;
  object-fit: contain;
  display: inline-block;
}

nav a {
  margin-left: 1rem;
  color: #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

nav a:hover {
  color: #66b2ff;
}

/* Container for the hero section that lists products */
.hero {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 3rem 1rem;
}

/* Product card styling */
.card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 0;
  width: 260px;
  text-align: center;
  text-decoration: none;
  color: #ffffff;
  transition: transform 0.3s ease, background 0.3s ease;
  position: relative;
  overflow: hidden;
}

.card:hover {
  transform: translateY(-6px);
  background: rgba(255, 255, 255, 0.12);
  /* Add a soft blue glow on hover */
  box-shadow: 0 0 20px rgba(102, 178, 255, 0.5), 0 0 40px rgba(102, 178, 255, 0.3);
}

/* Card image for product grid */
.card-image {
  width: 100%;
  height: 150px;
  object-fit: cover;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  display: block;
}

.card-content {
  padding: 1.2rem;
}

/* Video overlay shown on hover for cards that have videos */
.video-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

/*
 * Ensure preview videos and YouTube iframes fill their overlays
 *
 * Without explicitly setting width/height and object-fit on the
 * elements themselves the browser may letterbox the preview.  By
 * forcing them to cover the available space and centering their
 * contents we guarantee a consistent, edge‑to‑edge preview on
 * product cards.
 */
.video-overlay video,
.video-overlay iframe {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

/*
 * Grid of product videos on product pages.
 *
 * When multiple media elements are displayed on a single page (for
 * example, the controller/KBM macro page now shows both a local
 * demonstration and a YouTube preview) they are wrapped in a
 * responsive grid.  Each video is constrained to a square shape
 * with equal width and height, and the grid automatically wraps on
 * smaller screens.
 */
.product-video-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
  /*
   * Allow the video grid to occupy space alongside the product details.  Using
   * flex settings similar to .product-image ensures the grid has an initial
   * width of roughly half the page on desktop, but it will shrink and wrap
   * responsively on smaller screens.  Without an explicit flex basis the
   * grid could collapse to zero width when wrapped in a flex container.
   */
  flex: 1 1 45%;
  max-width: 500px;
  min-width: 300px;
}

/* New slider styling for product media on macro page */
.video-slider {
  position: relative;
  width: 100%;
  max-width: 800px;
  margin-bottom: 2rem;
}

.video-slider .slides {
  position: relative;
}

/* Each slide maintains a 16:9 aspect ratio using the padding‑top trick */
.video-slider .slide {
  display: none;
  position: relative;
  width: 100%;
  padding-top: 56.25%; /* 16:9 aspect ratio */
}

/* The embedded video or iframe fills the slide */
.video-slider .slide video,
.video-slider .slide iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* Navigation arrows for the video slider */
.video-slider .prev-slide,
.video-slider .next-slide {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #ffffff;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 1.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.video-slider .prev-slide { left: 10px; }
.video-slider .next-slide { right: 10px; }

/* Review section enhancements */
.reviews {
  margin-top: 4rem;
  position: relative;
}

/* Section title with lines on either side */
.section-title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.section-title::before,
.section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #66b2ff;
  opacity: 0.5;
}

.section-title span {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
}

/* Horizontal slider for reviews */
.reviews-slider {
  position: relative;
  overflow: hidden;
}

.reviews-track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 1rem;
  padding-bottom: 1rem;
}

.reviews-track::-webkit-scrollbar {
  display: none;
}

.review {
  flex: 0 0 300px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  color: #ffffff;
  scroll-snap-align: center;
}

.review .stars {
  color: #ffd700;
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  display: block;
}

.reviews-slider .prev-review,
.reviews-slider .next-review {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.5);
  border: none;
  color: #ffffff;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

.reviews-slider .prev-review { left: 0.5rem; }
.reviews-slider .next-review { right: 0.5rem; }

@media (max-width: 768px) {
  .reviews-slider .prev-review,
  .reviews-slider .next-review {
    display: none;
  }
}

/* Make the plans grid more uniform and side‑by‑side */
.plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  justify-items: center;
}

/*
 * Each video box in the product media grid is designed to be perfectly square
 * on desktop and tablet screens while automatically scaling down on mobile.
 * The width is specified as a percentage of the available container to
 * ensure the boxes sit side‑by‑side when there is room.  Increasing the
 * width from 300 px to a flexible unit makes the previews larger and
 * prevents them from appearing tiny on high‑resolution monitors.
 */
.product-video-grid .video-box {
  /*
   * Allow two videos to sit side by side inside the media grid.  Using a
   * percentage-based flex-basis ensures that two boxes occupy approximately
   * half of the available space (minus the gap).  On narrower screens the
   * items will stack automatically.  The aspect-ratio property keeps
   * each preview perfectly square regardless of its width.
   */
  flex: 1 1 calc(50% - 0.5rem);
  aspect-ratio: 1 / 1;
  max-width: none;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
}

/*
 * Videos and iframes fill their container completely.  Using absolute
 * positioning with 100% width and height ensures they crop evenly from the
 * centre.  We also specify object‑fit: cover so the video fills the box
 * without letterboxing.
 */
.product-video-grid video,
.product-video-grid iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 10px;
}

/*
 * Extra media container for optional secondary videos on product pages.
 *
 * If only a single embedded video is required this class isn’t used, but
 * when a secondary media element such as a YouTube embed is added after
 * the main details this wrapper centres it on the page and limits its
 * width to avoid overwhelming the layout.
 */
.extra-media {
  margin-top: 1.5rem;
  display: flex;
  justify-content: center;
}

.extra-media iframe {
  width: 100%;
  max-width: 500px;
  height: 281px; /* Maintain a 16:9 aspect ratio */
  border-radius: 10px;
  object-fit: cover;
  object-position: center;
}

.has-video:hover .video-overlay {
  opacity: 1;
}

.has-video:hover .card-image {
  filter: brightness(0.4);
}

.card h3 {
  margin-bottom: 0.5rem;
  font-size: 1.25rem;
}

.card .price {
  color: #999999;
  text-decoration: line-through;
  font-size: 0.9rem;
}

.card .sale-price {
  color: #66b2ff;
  font-size: 1.1rem;
  font-weight: bold;
}

.card .button {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.6rem 1.2rem;
  border-radius: 6px;
  font-weight: bold;
  text-decoration: none;
  color: #ffffff;
  background: #66b2ff;
  transition: background 0.2s ease;
}

.card .button:hover {
  background: #88c7ff;
}

/* Product page layout */
.product-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  padding: 2.5rem 1rem;
}

/*
 * Product image container
 *
 * On the product pages the preview video or static graphic should be wide and
 * cinematic rather than tall.  Changing the padding‑top from the classic
 * 16:9 (56.25%) to a lower value (40%) yields a more letterbox‑like shape
 * that better suits landscape game footage.  Flex settings keep the
 * container responsive while preserving aspect ratio.  Height is kept at
 * zero to allow the padding trick to control vertical space.
 */
.product-image {
  flex: 1 1 45%;
  max-width: 500px;
  min-width: 300px;
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 40%; /* wider 2.5:1 ratio for a more cinematic feel */
  overflow: hidden;
  border-radius: 10px;
}

.product-image iframe,
.product-image img,
.product-image video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Placeholder for product images (when no image is provided) */
.placeholder {
  width: 100%;
  height: 200px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

.product-details {
  flex: 1 1 300px;
}

.product-details h1 {
  font-size: 2rem;
  margin-bottom: 0.5rem;
}

.product-details .prices {
  margin: 1rem 0;
  font-size: 1.1rem;
}

.product-details .old-price {
  color: #777777;
  text-decoration: line-through;
  margin-right: 0.5rem;
}

.product-details .sale-price {
  color: #66b2ff;
  font-weight: bold;
}

.product-details .actions a {
  display: inline-block;
  margin-right: 0.75rem;
  margin-bottom: 0.75rem;
  padding: 0.7rem 1.4rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s ease;
}

.product-details .actions .buy {
  background: #66b2ff;
  color: #ffffff;
}

.product-details .actions .buy:hover {
  background: #88c7ff;
}

/* Styling for the secondary Learn More button on product pages */
.product-details .actions .learn-more {
  background: transparent;
  border: 1px solid #66b2ff;
  color: #66b2ff;
}

.product-details .actions .learn-more:hover {
  background: rgba(102, 178, 255, 0.1);
}

.product-details .actions .view {
  background: #ffffff;
  color: #000000;
}

.product-details .actions .view:hover {
  background: #dddddd;
}

/* Subtitles for product page headings */
.subtitle {
  color: #b0c5e7;
  font-size: 1rem;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
  font-weight: normal;
}

/* Additional action button for lifetime purchase */
.product-details .actions .lifetime {
  background: transparent;
  border: 1px solid #66b2ff;
  color: #66b2ff;
}
.product-details .actions .lifetime:hover {
  background: rgba(102, 178, 255, 0.1);
}

/* Media slider on product pages */
.product-media-slider {
  flex: 1 1 45%;
  max-width: 500px;
  min-width: 300px;
  position: relative;
  width: 100%;
  height: 0;
  /* Use a 16:9 aspect ratio for preview media to ensure more of the video is visible
     while still cropping evenly on the sides. This helps pre‑videos like macros
     and PC optimisations appear correctly without cutting off important parts. */
  padding-top: 56.25%;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  border-radius: 10px;
  overflow: hidden;
}

/* Controls for product media slider */
.slider-controls {
  position: relative;
  width: 100%;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  pointer-events: none; /* allow clicks only on buttons */
}
.slider-controls button {
  pointer-events: auto;
  background: rgba(0, 191, 255, 0.4);
  border: none;
  color: #ffffff;
  font-size: 1.5rem;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background 0.2s ease;
}
.slider-controls button:hover {
  background: rgba(0, 191, 255, 0.6);
}
.product-media-slider::-webkit-scrollbar {
  display: none;
}
.product-media-slider .slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  position: relative;
  height: 100%;
}
.product-media-slider video,
.product-media-slider iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 10px;
}

/* Ensure product videos and iframes inside the plain product-image container
   also fill their container while cropping evenly. Without this, some previews
   may appear letterboxed or off‑centre. */
.product-image video,
.product-image iframe {
  object-fit: cover;
  object-position: center;
}

/* Crop video to fill its slide for a better preview while keeping quality */
.product-media-slider video {
  object-fit: cover;
  /* Centre the video within its container so cropping is even on all sides */
  object-position: center;
}

.product-details ul {
  margin-top: 1rem;
  padding-left: 1.2rem;
}

.product-details ul li {
  margin-bottom: 0.5rem;
}

/* Contact page styles */
.contact-wrapper {
  max-width: 600px;
  margin: 3rem auto;
  padding: 2rem;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
}

.contact-wrapper h1 {
  margin-bottom: 1rem;
  font-size: 2rem;
  text-align: center;
}

.contact-wrapper label {
  display: block;
  margin-bottom: 0.3rem;
  font-weight: bold;
}

.contact-wrapper input,
.contact-wrapper textarea {
  width: 100%;
  padding: 0.6rem;
  margin-bottom: 1rem;
  border-radius: 6px;
  border: 1px solid #333333;
  background: #222222;
  color: #ffffff;
}

.contact-wrapper button {
  padding: 0.8rem 1.5rem;
  border: none;
  border-radius: 6px;
  background: #66b2ff;
  color: #ffffff;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.2s ease;
}

.contact-wrapper button:hover {
  background: #88c7ff;
}

/* Terms of service section */
.terms {
  /* Present the terms section as a centred card.  We remove the top border
     and instead wrap the content in a lightly translucent box to
     separate it from the rest of the page.  A narrower width and small
     font size keep the text unobtrusive while still readable. */
  margin: 6rem auto;
  padding: 1.5rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.03);
  font-size: 0.8rem;
  color: #bbbbbb;
  max-width: 700px;
  line-height: 1.5;
  text-align: left;
}

.terms h2 {
  margin-bottom: 0.8rem;
  font-size: 1.2rem;
  color: #ffffff;
}

.terms ul {
  padding-left: 1.2rem;
}

.terms ul li {
  margin-bottom: 0.5rem;
}

/* Simple footer */
footer {
  text-align: center;
  padding: 1rem;
  font-size: 0.8rem;
  color: #777777;
}

/* Landing / hero section styling */
.landing {
  text-align: center;
  padding: 3rem 1rem 2rem;
}

.landing h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
}

.landing p {
  max-width: 600px;
  margin: 0 auto;
  color: #cccccc;
  font-size: 1.1rem;
}

/* Scrolling text within the hero section */
.scroll-text {
  margin: 1rem auto 2rem;
  overflow: hidden;
  white-space: nowrap;
  max-width: 90%;
  color: #88c7ff;
  font-size: 0.95rem;
  line-height: 1.4;
  animation: marquee 30s linear infinite;
}

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

.features-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}

/* Performance comparison styles */
.performance-comparison {
  max-width: 500px;
  margin: 2rem auto 1.5rem;
  text-align: left;
  font-size: 0.9rem;
}

.performance-comparison .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.3rem;
  font-weight: bold;
}

.performance-comparison .fps {
  color: var(--primary-col);
}

.performance-comparison .bar {
  position: relative;
  height: 8px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 0.6rem;
}

.performance-comparison .bar::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: var(--pct, 0%);
  background: linear-gradient(90deg, var(--primary-col), var(--primary-col-light));
  border-radius: 4px;
  transition: width 1s ease;
}

.performance-comparison .bar.without {
  --pct: 60%;
}
.performance-comparison .bar.with {
  --pct: 100%;
}

.performance-comparison .boost {
  text-align: center;
  font-size: 0.8rem;
  color: var(--primary-col-light);
  margin-top: -0.3rem;
  margin-bottom: 0.5rem;
  font-weight: bold;
}

/* Call-to-action buttons */
.cta-buttons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2rem;
}

.btn {
  padding: 0.7rem 1.6rem;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  cursor: pointer;
  display: inline-block;
  transition: all 0.2s ease;
  font-size: 0.9rem;
}

.btn.primary {
  background: linear-gradient(90deg, var(--primary-col), var(--primary-col-light));
  color: #ffffff;
}

.btn.primary:hover {
  filter: brightness(1.15);
}

.btn.secondary {
  border: 1px solid var(--primary-col);
  color: var(--primary-col);
  background: transparent;
}

.btn.secondary:hover {
  background: var(--primary-col);
  color: #ffffff;
}

.feature {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  width: 120px;
  text-align: center;
}

.feature .icon {
  font-size: 1.6rem;
  color: #66b2ff;
  margin-bottom: 0.5rem;
  /* Subtle bounce animation for visual interest */
  animation: bounce 2s infinite ease-in-out alternate;
}

@keyframes bounce {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(-8px);
  }
}

.feature h4 {
  font-size: 1rem;
  font-weight: bold;
}

/* Product grid section overrides */
.product-grid {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.5rem;
  padding: 2rem 1rem 3rem;
}

/* Why choose section */
.why-choose {
  padding: 3rem 1rem;
  text-align: center;
  background: rgba(255, 255, 255, 0.03);
  border-top: 1px solid #111111;
  border-bottom: 1px solid #111111;
}

.why-choose h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

.stats {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 1.5rem;
}

.stat {
  text-align: center;
}

.stat .number {
  font-size: 2rem;
  font-weight: bold;
  color: #66b2ff;
}

.stat .label {
  color: #bbbbbb;
  font-size: 0.9rem;
}

.why-choose p {
  max-width: 700px;
  margin: 0 auto;
  color: #cccccc;
  font-size: 1rem;
}

/* Reviews section */
.reviews {
  padding: 3rem 1rem;
  text-align: center;
  overflow: hidden;
}

.reviews h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
}

/*
 * The testimonials container now uses CSS Grid so that reviews are arranged
 * in neat rows and columns.  On larger screens multiple testimonials will
 * appear side‑by‑side, while on smaller devices the grid automatically
 * stacks them gracefully.  The gap property controls the spacing between
 * cards both horizontally and vertically.
 */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  justify-items: center;
  gap: 2rem;
}

/* When reviews are set up as a carousel, animate them horizontally */
.review-grid.carousel {
  flex-wrap: nowrap;
  /* Speed up the scrolling animation so cards move across the screen faster */
  animation: scrollReviews 35s linear infinite;
}

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

.review {
  /* Reviews are displayed as cards in a horizontally scrolling carousel. */
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  /* Provide ample padding for readability */
  padding: 1.2rem 1.6rem;
  /* Make cards wider and slightly shorter for a more proportionate look */
  /* Make review cards wider and slightly taller for a more balanced, square look */
  /* Increase the width of testimonial cards so longer comments don’t wrap unnecessarily */
  /* Widen testimonial cards so comments have ample room */
  /* Reduce the size of testimonial cards so they sit comfortably side‑by‑side
     on desktop and stack neatly on mobile.  A width around 300 px and a
     minimum height around 220 px creates a balanced, almost square shape. */
  width: 300px;
  min-height: 220px;
  height: auto;
  font-style: normal;
  color: #dddddd;
  /* Show the full testimonial text without internal scrolling */
  overflow-y: visible;
}

/* Sliding animation for banner text */
@keyframes slideText {
  /* Start with the text off to the right, slide left, then return to the start */
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(-50%);
  }
  100% {
    transform: translateX(0);
  }
}

/* Retain pulse animation for any other callouts if needed */
@keyframes pulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(102, 178, 255, 0.5), 0 0 20px rgba(102, 178, 255, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(102, 178, 255, 0.8), 0 0 40px rgba(102, 178, 255, 0.6);
  }
}

/* Ensure video overlays within product cards maintain a proper crop */
.card .video-overlay video,
.card .video-overlay iframe {
  /* Fill the overlay area while cropping excess content */
  object-fit: cover;
  /* Centre the video horizontally and vertically */
  object-position: center;
}

/* Prevent horizontal scrolling on any device */
html, body {
  overflow-x: hidden;
}

/* Rotating neon cube hero art */
.hero-art {
  width: 320px;
  height: 320px;
  margin: 2rem auto;
  position: relative;
  perspective: 800px;
}

@keyframes spinCube {
  from {
    transform: rotateY(0deg) rotateX(0deg);
  }
  to {
    transform: rotateY(360deg) rotateX(360deg);
  }
}

/* 3D cube styles for hero section */
.cube {
  position: absolute;
  width: 80px;
  height: 80px;
  transform-style: preserve-3d;
  animation: spinCube 20s infinite linear;
}
.cube:nth-child(1) {
  top: 40%;
  left: 10%;
  animation-duration: 20s;
}
.cube:nth-child(2) {
  top: 20%;
  left: 45%;
  animation-duration: 25s;
  animation-direction: reverse;
}
.cube:nth-child(3) {
  top: 50%;
  left: 70%;
  animation-duration: 22s;
}
.face {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(102, 178, 255, 0.1);
  border: 1px solid rgba(102, 178, 255, 0.6);
  box-shadow: 0 0 10px rgba(102, 178, 255, 0.6), 0 0 20px rgba(102, 178, 255, 0.4);
}
.face.front  { transform: rotateY(0deg) translateZ(40px); }
.face.back   { transform: rotateY(180deg) translateZ(40px); }
.face.right  { transform: rotateY(90deg) translateZ(40px); }
.face.left   { transform: rotateY(-90deg) translateZ(40px); }
.face.top    { transform: rotateX(90deg) translateZ(40px); }
.face.bottom { transform: rotateX(-90deg) translateZ(40px); }

.reviewer {
  display: block;
  margin-top: 0.8rem;
  font-style: normal;
  font-weight: bold;
  color: #66b2ff;
}

/* ---------------------------------------------------------------------
   Particle canvas and plans pricing styles
   ------------------------------------------------------------------- */

/* Particle canvas sits behind all content and displays subtle mouse‑tracking particles. */
#particle-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Ensure main content sits above the particle canvas */
main {
  position: relative;
  z-index: 1;
}

/* Plans (product comparison) section styles */
.plans-section {
  padding: 3rem 1rem;
  text-align: center;
}
.plans-section h2 {
  font-size: 2rem;
  margin-bottom: 2rem;
}
.plans,
.plans-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
}
.plan,
.plan-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  padding: 2rem 1.5rem;
  width: 300px;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Add a subtle glow on hover for plan cards */
.plan-card:hover {
  box-shadow: 0 0 20px rgba(0, 191, 255, 0.4);
}
/* Highlight tags on plan cards */
.plan .tag,
.plan-card .tag {
  position: absolute;
  top: -0.75rem;
  left: 50%;
  transform: translateX(-50%);
  background: #00bfff;
  color: #0a0a0a;
  padding: 0.25rem 0.75rem;
  border-radius: 8px;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: bold;
}
.plan h3,
.plan-card h3 {
  margin-top: 1rem;
  font-size: 1.4rem;
  color: #ffffff;
}
.plan .price,
.plan-card .price {
  font-size: 2rem;
  font-weight: bold;
  margin: 0.5rem 0;
  color: #00bfff;
}
.plan .old-price,
.plan-card .old-price {
  font-size: 1rem;
  text-decoration: line-through;
  color: #888888;
  margin-right: 0.5rem;
}
.plan ul,
.plan-card ul {
  list-style: none;
  padding: 0;
  margin: 1rem 0;
  text-align: left;
}
.plan ul li,
.plan-card ul li {
  margin: 0.5rem 0;
  font-size: 0.95rem;
  color: #dddddd;
  padding-left: 1.2rem;
  position: relative;
}
.plan ul li::before,
.plan-card ul li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  color: #00bfff;
}
.plan .buttons,
.plan-card .buttons {
  margin-top: auto;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.plan .buttons a,
.plan-card .buttons a {
  display: block;
  text-align: center;
  padding: 0.75rem 1rem;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background 0.2s;
}
.plan .buttons .primary,
.plan-card .buttons .primary {
  background: #00bfff;
  color: #0a0a0a;
}
.plan .buttons .primary:hover,
.plan-card .buttons .primary:hover {
  background: #33ccff;
}
.plan .buttons .secondary,
.plan-card .buttons .secondary {
  background: transparent;
  border: 1px solid #00bfff;
  color: #00bfff;
}
.plan .buttons .secondary:hover,
.plan-card .buttons .secondary:hover {
  background: rgba(0, 191, 255, 0.1);
}

/* Shop hero alignment */
.shop-hero {
  text-align: center;
  /* Add extra top margin so the hero text sits comfortably above the plans grid */
  margin: 4rem auto 2rem;
  max-width: 700px;
}

/* Ensure the plans grid doesn’t collide with the hero text */
.plans-grid {
  margin-top: 1rem;
}

/*
 * Navigation CTA styling
 * Highlight the Shop link in the navigation bar so it stands out as a call‑to‑action.
 */
nav a.cta {
  background: linear-gradient(90deg, #00bcd4, #0097a7);
  color: #ffffff;
  /* Increase padding and font size to make the Shop button more prominent */
  padding: 0.6rem 1.3rem;
  font-size: 1rem;
  border-radius: 8px;
  font-weight: 600;
  margin-left: 1rem;
  box-shadow: 0 2px 8px rgba(0, 188, 212, 0.3);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}
nav a.cta:hover {
  box-shadow: 0 4px 12px rgba(0, 188, 212, 0.6);
  transform: translateY(-2px);
}