/* products: uses shared design-system components. Add page-specific styles here. */

/*section 1 product start here*/

/* =========================================================
   PRODUCTS HERO
========================================================= */

.products-hero {
  --products-hero-pointer-x: 50%;
  --products-hero-pointer-y: 42%;

  position: relative;

  width: 100%;
  max-width: 100%;

  overflow: hidden;
  isolation: isolate;

  color: var(--white);

  background:
    #090c14;
}


/* =========================================================
   BACKGROUND IMAGE
========================================================= */

.products-hero
  .products-hero-background {
  position: absolute;
  z-index: -8;

  inset: -3%;

  display: block;

  width: 106%;
  height: 106%;

  object-fit: cover;
  object-position: center;

  filter:
    saturate(0.72)
    contrast(1.08)
    brightness(0.7);

  transform:
    scale(1.04);

  animation:
    products-hero-image-breathe
    22s ease-in-out
    infinite alternate;
}


/* =========================================================
   IMAGE OVERLAY
========================================================= */

.products-hero
  .products-hero-overlay {
  position: absolute;
  z-index: -7;

  inset: 0;

  background:
    radial-gradient(
      circle at 50% 43%,
      rgba(30, 20, 55, 0.35),
      transparent 30%
    ),
    linear-gradient(
      90deg,
      rgba(8, 5, 17, 0.93),
      rgba(17, 11, 28, 0.58) 50%,
      rgba(8, 5, 17, 0.93)
    ),
    linear-gradient(
      0deg,
      rgba(8, 5, 17, 0.98),
      rgba(8, 5, 17, 0.18) 48%,
      rgba(8, 5, 17, 0.8)
    );

  pointer-events: none;
}


/* =========================================================
   BLUEPRINT GRID
========================================================= */

.products-hero
  .products-hero-blueprint {
  position: absolute;
  z-index: -6;

  inset: 0;

  opacity: 0.18;

  background-image:
    linear-gradient(
      rgba(155, 77, 255, 0.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(155, 77, 255, 0.18) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(255, 122, 0, 0.11) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 122, 0, 0.11) 1px,
      transparent 1px
    );

  background-size:
    84px 84px,
    84px 84px,
    420px 420px,
    420px 420px;

  pointer-events: none;
}


/* =========================================================
   SCAN
========================================================= */

.products-hero
  .products-hero-scan {
  position: absolute;
  z-index: -5;

  top: 0;
  bottom: 0;
  left: -18%;

  width: 36%;

  background:
    linear-gradient(
      105deg,
      transparent,
      rgba(155, 77, 255, 0.1),
      transparent
    );

  transform:
    skewX(-14deg);

  animation:
    products-hero-scan
    11s ease-in-out infinite;

  pointer-events: none;
}


/* =========================================================
   NOISE
========================================================= */

.products-hero
  .products-hero-noise {
  position: absolute;
  z-index: -4;

  inset: 0;

  opacity: 0.18;

  background-image:
    radial-gradient(
      rgba(255, 255, 255, 0.26) 0.6px,
      transparent 0.7px
    );

  background-size:
    7px 7px;

  pointer-events: none;
}


/* =========================================================
   POINTER LIGHT
========================================================= */

.products-hero
  .products-hero-pointer {
  position: absolute;
  z-index: -2;

  top:
    var(--products-hero-pointer-y);

  left:
    var(--products-hero-pointer-x);

  width:
    min(42vw, 520px);

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(155, 77, 255, 0.16),
      rgba(113, 55, 214, 0.05) 42%,
      transparent 70%
    );

  transform:
    translate(-50%, -50%);

  transition:
    top 450ms ease,
    left 450ms ease;

  pointer-events: none;
}


/* =========================================================
   PARTICLES
========================================================= */

.products-hero
  .products-hero-particles {
  position: absolute;
  z-index: -3;

  inset: 0;

  overflow: hidden;

  pointer-events: none;
}


.products-hero
  .products-hero-particle {
  position: absolute;

  bottom: -24px;

  display: block;

  border-radius: 50%;

  animation:
    products-hero-particle-rise
    linear infinite;
}


.products-hero
  .products-hero-particle--purple {
  background:
    var(--purple);

  box-shadow:
    0 0 12px
    rgba(155, 77, 255, 0.68);
}


.products-hero
  .products-hero-particle--orange {
  background:
    var(--orange);

  box-shadow:
    0 0 12px
    rgba(255, 122, 0, 0.62);
}


/* =========================================================
   ORBITS
========================================================= */

.products-hero
  .products-hero-orbit {
  position: absolute;
  z-index: -2;

  border:
    1px solid
    rgba(155, 77, 255, 0.18);

  border-radius: 50%;

  pointer-events: none;
}


.products-hero
  .products-hero-orbit::before,
.products-hero
  .products-hero-orbit::after {
  position: absolute;

  border: inherit;
  border-radius: inherit;

  content: "";
}


.products-hero
  .products-hero-orbit::before {
  inset: 18px;
}


.products-hero
  .products-hero-orbit::after {
  inset: 43px;

  border-color:
    rgba(255, 122, 0, 0.18);
}


.products-hero
  .products-hero-orbit--one {
  top: 15%;
  right: 7%;

  width: 190px;

  aspect-ratio: 1;

  animation:
    products-hero-orbit-float
    9s ease-in-out infinite;
}


.products-hero
  .products-hero-orbit--two {
  bottom: 18%;
  left: 8%;

  width: 105px;

  aspect-ratio: 1;

  animation:
    products-hero-orbit-float
    7s ease-in-out
    infinite reverse;
}


/* =========================================================
   COORDINATES
========================================================= */

.products-hero
  .products-hero-coordinate {
  position: absolute;
  z-index: 4;

  top: 32px;

  display: flex;
  align-items: center;

  gap: 12px;

  color:
    rgba(255, 255, 255, 0.42);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.18em;
}


.products-hero
  .products-hero-coordinate i {
  display: block;

  width: 46px;
  height: 1px;
}


.products-hero
  .products-hero-coordinate--left {
  left:
    clamp(20px, 3vw, 44px);
}


.products-hero
  .products-hero-coordinate--left i {
  background:
    linear-gradient(
      90deg,
      var(--purple),
      transparent
    );
}


.products-hero
  .products-hero-coordinate--right {
  right:
    clamp(20px, 3vw, 44px);

  flex-direction: row-reverse;
}


.products-hero
  .products-hero-coordinate--right i {
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--orange)
    );
}


/* =========================================================
   HERO INNER
========================================================= */

.products-hero
  .products-hero-inner {
  position: relative;
  z-index: 3;

  display: grid;

  width:
    min(100% - 40px, 1240px);

  min-height: 610px;

  margin-inline: auto;

  padding:
    110px
    0
    78px;

  place-items: center;
}


/* =========================================================
   COPY
========================================================= */

.products-hero
  .products-hero-copy {
  width:
    min(100%, 900px);

  text-align: center;
}


/* =========================================================
   EYEBROW
========================================================= */

.products-hero
  .products-hero-eyebrow {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  margin: 0;

  color:
    rgba(255, 255, 255, 0.78);

  font-size: 10px;
  font-weight: 800;

  letter-spacing: 0.18em;

  text-transform: uppercase;
}


.products-hero
  .products-hero-eyebrow-mark {
  position: relative;

  display: grid;

  width: 23px;

  aspect-ratio: 1;

  place-items: center;

  border:
    1px solid
    rgba(155, 77, 255, 0.42);

  border-radius: 7px;

  background:
    rgba(155, 77, 255, 0.1);

  transform:
    rotate(45deg);
}


.products-hero
  .products-hero-eyebrow-mark i {
  width: 5px;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    var(--orange);

  box-shadow:
    0 0 15px
    var(--orange);

  animation:
    products-hero-point-pulse
    2s ease-in-out infinite;
}


/* =========================================================
   TITLE
   CURRENT STANDARD: 34–39PX
========================================================= */

.products-hero
  .products-hero-title {
  max-width: 800px;

  margin:
    22px
    auto
    18px;

  color: var(--white);

  font-size:
    clamp(34px, 3vw, 39px);

  font-weight: 800;

  line-height: 1.04;
  letter-spacing: -0.04em;

  text-wrap: balance;
}


.products-hero
  .products-hero-title span {
  display: block;

  padding-bottom: 0.04em;

  color: var(--purple);

  background:
    linear-gradient(
      100deg,
      var(--purple-dark) 2%,
      var(--purple) 50%,
      var(--orange) 98%
    );

  background-clip: text;

  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;

  filter:
    drop-shadow(
      0 12px 30px
      rgba(155, 77, 255, 0.16)
    );
}


/* =========================================================
   DESCRIPTION
========================================================= */

.products-hero
  .products-hero-description {
  max-width: 720px;

  margin:
    0
    auto;

  color:
    rgba(235, 232, 244, 0.73);

  font-size:
    clamp(14px, 1vw, 16px);

  line-height: 1.72;

  text-wrap: balance;
}


/* =========================================================
   ACTIONS
========================================================= */

.products-hero
  .products-hero-actions {
  display: flex;
  justify-content: center;

  margin-top: 28px;
}


/* =========================================================
   BUTTON
========================================================= */

.products-hero
  .products-hero-button {
  position: relative;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 16px;

  min-height: 52px;

  overflow: hidden;

  padding:
    12px
    22px;

  border:
    1px solid
    rgba(255, 255, 255, 0.22);

  border-radius: 9px;

  color: var(--white);

  background:
    rgba(255, 255, 255, 0.055);

  backdrop-filter:
    blur(14px);

  font-size: 12px;
  font-weight: 800;

  text-decoration: none;

  transition:
    transform 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease,
    box-shadow 260ms ease;
}


.products-hero
  .products-hero-button::before {
  position: absolute;

  top: 0;
  left: -130%;

  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 255, 255, 0.32),
      transparent
    );

  transform:
    skewX(-24deg);

  transition:
    left 620ms ease;

  content: "";
}


.products-hero
  .products-hero-button:hover::before,
.products-hero
  .products-hero-button:focus-visible::before {
  left: 145%;
}


.products-hero
  .products-hero-button:hover,
.products-hero
  .products-hero-button:focus-visible {
  border-color:
    rgba(255, 122, 0, 0.65);

  outline: none;

  background:
    rgba(113, 55, 214, 0.22);

  box-shadow:
    0 18px 42px
    rgba(113, 55, 214, 0.2);

  transform:
    translateY(-3px);
}


.products-hero
  .products-hero-button:focus-visible {
  outline:
    3px solid
    rgba(255, 122, 0, 0.3);

  outline-offset: 4px;
}


.products-hero
  .products-hero-button svg {
  width: 17px;

  fill: none;

  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}


/* =========================================================
   STRENGTHS
========================================================= */

.products-hero
  .products-hero-strengths {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;

  gap:
    12px
    26px;

  margin-top: 28px;
}


.products-hero
  .products-hero-strengths span {
  display: inline-flex;
  align-items: center;

  gap: 8px;

  color:
    rgba(255, 255, 255, 0.5);

  font-size: 9px;
  font-weight: 800;

  letter-spacing: 0.11em;

  text-transform: uppercase;
}


.products-hero
  .products-hero-strengths i {
  width: 4px;

  aspect-ratio: 1;

  border-radius: 50%;

  background:
    var(--orange);

  box-shadow:
    0 0 9px
    rgba(255, 122, 0, 0.7);
}


/* =========================================================
   CATEGORY BAR
========================================================= */

.products-hero
  .products-hero-categories {
  position: relative;
  z-index: 5;

  border-top:
    1px solid
    rgba(155, 77, 255, 0.22);

  background:
    rgba(8, 5, 17, 0.94);

  backdrop-filter:
    blur(18px);
}


.products-hero
  .products-hero-categories::before {
  position: absolute;

  top: -1px;
  left: -25%;

  width: 28%;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--orange),
      var(--purple),
      transparent
    );

  animation:
    products-hero-category-line
    7s linear infinite;

  content: "";

  pointer-events: none;
}


/* =========================================================
   CATEGORY GRID
========================================================= */

.products-hero
  .products-hero-category-grid {
  display: grid;

  grid-template-columns:
    repeat(6, minmax(0, 1fr));

  width:
    min(100%, 1320px);

  margin-inline: auto;
}


/* =========================================================
   CATEGORY
========================================================= */

.products-hero
  .products-hero-category {
  position: relative;

  display: grid;

  grid-template-columns:
    auto
    minmax(0, 1fr)
    auto;

  align-items: center;

  gap: 10px;

  min-width: 0;
  min-height: 82px;

  padding:
    14px
    13px;

  border-right:
    1px solid
    rgba(255, 255, 255, 0.08);

  color: var(--white);

  background:
    rgba(255, 255, 255, 0.01);

  text-decoration: none;

  transition:
    background 260ms ease,
    transform 260ms ease;
}


.products-hero
  .products-hero-category:last-child {
  border-right: 0;
}


/* =========================================================
   CATEGORY NUMBER
========================================================= */

.products-hero
  .products-hero-category-number {
  color:
    var(--orange);

  font-size: 8px;
  font-weight: 800;

  letter-spacing: 0.08em;
}


/* =========================================================
   CATEGORY TITLE
========================================================= */

.products-hero
  .products-hero-category strong {
  min-width: 0;

  color:
    rgba(255, 255, 255, 0.85);

  font-size: 10.5px;
  font-weight: 700;

  line-height: 1.35;

  transition:
    color 260ms ease;
}


/* =========================================================
   CATEGORY ARROW
========================================================= */

.products-hero
  .products-hero-category-arrow {
  color:
    var(--purple);

  font-size: 14px;

  transition:
    color 260ms ease,
    transform 260ms ease;
}


/* BOTTOM ACCENT */

.products-hero
  .products-hero-category::after {
  position: absolute;

  right: 0;
  bottom: 0;

  width: 17px;
  height: 2px;

  background:
    linear-gradient(
      90deg,
      var(--purple),
      var(--orange)
    );

  opacity: 0.7;

  transition:
    width 300ms ease;

  content: "";
}


/* =========================================================
   CATEGORY HOVER
========================================================= */

.products-hero
  .products-hero-category:hover,
.products-hero
  .products-hero-category:focus-visible {
  outline: none;

  background:
    linear-gradient(
      135deg,
      rgba(113, 55, 214, 0.2),
      rgba(155, 77, 255, 0.1),
      rgba(255, 122, 0, 0.06)
    );

  transform:
    translateY(-3px);
}


.products-hero
  .products-hero-category:hover strong,
.products-hero
  .products-hero-category:focus-visible strong {
  color: var(--white);
}


.products-hero
  .products-hero-category:hover
  .products-hero-category-arrow,
.products-hero
  .products-hero-category:focus-visible
  .products-hero-category-arrow {
  color:
    var(--orange);

  transform:
    translate(3px, -3px);
}


.products-hero
  .products-hero-category:hover::after,
.products-hero
  .products-hero-category:focus-visible::after {
  width: 100%;
}


.products-hero
  .products-hero-category:focus-visible {
  box-shadow:
    inset 0 0 0 2px
    rgba(255, 122, 0, 0.45);
}


/* =========================================================
   JS REVEAL
========================================================= */

.products-hero.products-hero--js
  [data-products-hero-reveal] {
  opacity: 0;

  transform:
    translateY(24px)
    scale(0.99);

  transition:
    opacity 750ms ease,
    transform 750ms
      cubic-bezier(
        0.2,
        0.7,
        0.2,
        1
      );
}


.products-hero.products-hero--js
  [data-products-hero-reveal].products-hero-is-visible {
  opacity: 1;

  transform: none;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 1050px) {

  .products-hero
    .products-hero-inner {
    min-height: 570px;

    padding:
      96px
      0
      70px;
  }


  .products-hero
    .products-hero-title {
    font-size:
      clamp(34px, 4vw, 38px);
  }


  .products-hero
    .products-hero-category-grid {
    grid-template-columns:
      repeat(3, minmax(0, 1fr));
  }


  .products-hero
    .products-hero-category {
    min-height: 76px;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.08);
  }


  .products-hero
    .products-hero-category:nth-child(3n) {
    border-right: 0;
  }


  .products-hero
    .products-hero-category:nth-child(n + 4) {
    border-bottom: 0;
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 760px) {

  .products-hero
    .products-hero-background {
    object-position:
      56% center;
  }


  .products-hero
    .products-hero-pointer,
  .products-hero
    .products-hero-coordinate,
  .products-hero
    .products-hero-orbit--two {
    display: none;
  }


  .products-hero
    .products-hero-overlay {
    background:
      linear-gradient(
        180deg,
        rgba(8, 5, 17, 0.84),
        rgba(12, 8, 21, 0.95) 48%,
        rgba(8, 5, 17, 0.99)
      ),
      radial-gradient(
        circle at 50% 30%,
        rgba(155, 77, 255, 0.14),
        transparent 52%
      );
  }


  .products-hero
    .products-hero-inner {
    width:
      min(100% - 30px, 620px);

    min-height: auto;

    padding:
      92px
      0
      62px;
  }


  .products-hero
    .products-hero-title {
    margin-top: 20px;

    font-size:
      clamp(34px, 8.5vw, 37px);

    line-height: 1.05;
  }


  .products-hero
    .products-hero-description {
    font-size: 14px;

    line-height: 1.68;
  }


  .products-hero
    .products-hero-actions {
    margin-top: 25px;
  }


  .products-hero
    .products-hero-button {
    width: 100%;
  }


  .products-hero
    .products-hero-strengths {
    gap:
      10px
      17px;

    margin-top: 25px;
  }


  .products-hero
    .products-hero-category-grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }


  .products-hero
    .products-hero-category {
    min-height: 70px;

    padding:
      12px
      14px;

    border-right:
      1px solid
      rgba(255, 255, 255, 0.08);

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.08);
  }


  .products-hero
    .products-hero-category:nth-child(3n) {
    border-right:
      1px solid
      rgba(255, 255, 255, 0.08);
  }


  .products-hero
    .products-hero-category:nth-child(2n) {
    border-right: 0;
  }


  .products-hero
    .products-hero-category:nth-child(n + 4) {
    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.08);
  }


  .products-hero
    .products-hero-category:nth-child(n + 5) {
    border-bottom: 0;
  }

}


/* =========================================================
   SMALL MOBILE
========================================================= */

@media (max-width: 440px) {

  .products-hero
    .products-hero-eyebrow {
    font-size: 9px;

    letter-spacing: 0.14em;
  }


  .products-hero
    .products-hero-title {
    font-size: 34px;
  }


  .products-hero
    .products-hero-strengths {
    display: grid;

    justify-content: center;
  }


  .products-hero
    .products-hero-category-grid {
    grid-template-columns:
      minmax(0, 1fr);
  }


  .products-hero
    .products-hero-category,
  .products-hero
    .products-hero-category:nth-child(2n),
  .products-hero
    .products-hero-category:nth-child(3n),
  .products-hero
    .products-hero-category:nth-child(n + 4),
  .products-hero
    .products-hero-category:nth-child(n + 5) {
    min-height: 60px;

    border-right: 0;

    border-bottom:
      1px solid
      rgba(255, 255, 255, 0.08);
  }


  .products-hero
    .products-hero-category:last-child {
    border-bottom: 0;
  }

}


/* =========================================================
   TOUCH DEVICES
========================================================= */

@media (hover: none), (pointer: coarse) {

  .products-hero
    .products-hero-category:hover {
    transform: none;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

  .products-hero
    .products-hero-background,
  .products-hero
    .products-hero-scan,
  .products-hero
    .products-hero-orbit,
  .products-hero
    .products-hero-eyebrow-mark i,
  .products-hero
    .products-hero-particle,
  .products-hero
    .products-hero-categories::before {
    animation: none;
  }


  .products-hero.products-hero--js
    [data-products-hero-reveal] {
    opacity: 1;

    transform: none;

    transition: none;
  }


  .products-hero
    .products-hero-category,
  .products-hero
    .products-hero-button {
    transition: none;
  }

}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes products-hero-image-breathe {

  from {
    transform:
      scale(1.04);
  }

  to {
    transform:
      scale(1.09);
  }

}


@keyframes products-hero-scan {

  0%,
  12% {
    opacity: 0;

    transform:
      translateX(-30%)
      skewX(-14deg);
  }

  38%,
  66% {
    opacity: 1;
  }

  88%,
  100% {
    opacity: 0;

    transform:
      translateX(390%)
      skewX(-14deg);
  }

}


@keyframes products-hero-particle-rise {

  0% {
    opacity: 0;

    transform:
      translate3d(
        0,
        20px,
        0
      )
      scale(0.45);
  }

  14% {
    opacity: 0.75;
  }

  76% {
    opacity: 0.3;
  }

  100% {
    opacity: 0;

    transform:
      translate3d(
        28px,
        -760px,
        0
      )
      scale(1.15);
  }

}


@keyframes products-hero-orbit-float {

  50% {
    transform:
      translateY(-18px)
      rotate(7deg);
  }

}


@keyframes products-hero-point-pulse {

  50% {
    box-shadow:
      0 0 0 8px
      rgba(255, 122, 0, 0),
      0 0 18px
      var(--orange);
  }

}


@keyframes products-hero-category-line {

  from {
    left: -30%;
  }

  to {
    left: 105%;
  }

}


/*some bottom for height fix*/

/* =========================================================
   PRODUCT HERO — FULL SCREEN FIX
   Keep this at the END of the Product Hero CSS
========================================================= */

/* DESKTOP + TABLET */

@media (min-width: 761px) {

  .products-hero {
    display: flex;
    flex-direction: column;

    width: 100%;
    max-width: 100%;

    /*
      Fill the visible screen below the main website header.
      72px matches the current Sindybad desktop header closely.
    */
    min-height: calc(100svh - 72px);
  }


  .products-hero
    .products-hero-inner {
    display: grid;

    flex: 1 1 auto;

    width:
      min(100% - 40px, 1240px);

    /*
      IMPORTANT:
      Remove the old fixed 610px / 570px behavior.
    */
    min-height: 0;

    margin-inline: auto;

    padding:
      clamp(90px, 10vh, 125px)
      0
      clamp(62px, 7vh, 90px);

    place-items: center;
  }


  .products-hero
    .products-hero-categories {
    flex: 0 0 auto;
  }

}


/* LARGE DESKTOP */

@media (min-width: 1400px) {

  .products-hero {
    min-height:
      calc(100svh - 72px);
  }


  .products-hero
    .products-hero-inner {
    padding-top:
      clamp(105px, 12vh, 145px);

    padding-bottom:
      clamp(72px, 8vh, 100px);
  }

}


/* MOBILE
   Do not force viewport height on phones.
*/

@media (max-width: 760px) {

  .products-hero {
    display: block;

    min-height: auto;
  }


  .products-hero
    .products-hero-inner {
    min-height: auto;

    padding:
      92px
      0
      62px;
  }

}

/*section 1 product end here*/