/* /var/www/relyn/static_src/css/global.css */

:root {
  --page-bg: rgba(14, 6, 34, 0.96);
  --hero-text-color: #ffffff;
  --hero-muted: rgba(255, 255, 255, 0.68);
  --accent-1: #633EB2;
  --accent-2: #A697E0;
  --hero-border: rgba(255, 255, 255, 0.15);

  /* GLOBAL BLUR LAYER (darker) */
  /* ✅ MORE WIDTH (stronger full-bleed spread on ultra-wide screens) */
  --blur-w: 2600px;
  --blur-h: 537px;
  --blur-top: 60%;
  --blur-radius: 48px;

  --blur-blur: 85px;
  --blur-brightness: 0.55;
  --blur-opacity: 0.85;

  --blur-c1: rgba(166, 151, 224, 0.70);
  --blur-c2: rgba(99, 62, 178, 0.82);
  --blur-c3: rgba(14, 6, 34, 0.96);
}

* {
  box-sizing: border-box;
}

html,
body {
  width: 100%;
  overflow-x: hidden; /* ✅ FIX: prevents horizontal scroll globally */
}

body {
  margin: 0;
  padding: 0;
  background-color: var(--page-bg);
  color: var(--hero-text-color);
  font-family: "Urbanist", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

main {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 0;
}

/* Relyn Get Started Button (Global Utility) */
.relyn-cta-btn {
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #FFFFFF;
  background-image: linear-gradient(135deg, #633EB2, #A697E0);
  box-shadow: 0 22px 55px rgba(0, 0, 0, 0.9);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  transition:
    transform 0.18s ease-out,
    box-shadow 0.18s ease-out,
    filter 0.18s ease-out,
    background-image 0.18s ease-out;
}

.relyn-cta-btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.04);
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.98);
  background-image: linear-gradient(135deg, #A697E0, #633EB2);
}

.relyn-cta-btn:active {
  transform: translateY(0);
}


/* -------------------------------------------------------
   GLOBAL BACKGROUND BLUR LAYER (reusable across sections)
   ------------------------------------------------------- */
.relyn-blur-layer,
.ai-design-blur-layer,
.services-blur-layer,
.pricing-blur-layer,
.industry-blur-layer,
.client-stories-blur-layer,
.why-choose-blur-layer,
.projects-sub-blur,
.faq-blur-layer,
.apart-blur-layer {
  position: absolute;

  /* ✅ FIX: clamp the blur layer so it can’t create horizontal overflow */
  width: min(var(--blur-w), 100%);
  height: var(--blur-h);

  left: 50%;
  top: var(--blur-top);
  transform: translate(-50%, -50%);
  border-radius: var(--blur-radius);

  background:
    radial-gradient(circle at center,
      var(--blur-c1) 0%,
      var(--blur-c2) 35%,
      var(--blur-c3) 72%,
      rgba(0, 0, 0, 0.0) 100%);

  filter: blur(var(--blur-blur)) brightness(var(--blur-brightness));
  opacity: var(--blur-opacity);
  pointer-events: none;
  z-index: 0;
}

@media (max-width: 768px) {
  .relyn-blur-layer,
  .ai-design-blur-layer,
  .services-blur-layer,
  .pricing-blur-layer,
  .industry-blur-layer,
  .client-stories-blur-layer,
  .why-choose-blur-layer,
  .projects-sub-blur,
  .faq-blur-layer,
  .apart-blur-layer {
    filter: blur(65px) brightness(var(--blur-brightness));
  }
}