/* =========================================================
   CLICKRONIX — FINAL HERO SECTION
   Background image visible
   Dark shading only behind text
   Globe remains above the background
   No large orange background circle
   ========================================================= */

.hero {
  position: relative;
  min-height: 900px;
  padding: 138px 0 76px;
  overflow: hidden;

  /* Fallback shown while image/video loads */
  background: #d4d4d6;
}

/* Lightweight grid texture */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.025) 1px,
      transparent 1px
    );

  background-size: 48px 48px;
  opacity: 0.35;
}

/* Remove the old hero glow/circle */
.hero::after {
  content: none;
}

/* =========================================================
   HERO BACKGROUND IMAGE / VIDEO
   ========================================================= */

.hero-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: #d4d4d6;
}

.hero-media-image,
.hero-media-video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;

  object-fit: cover;

  /*
   * Change this value to move the image:
   * 50% = centered
   * 60% = more image visible on right
   * 40% = more image visible on left
   */
  object-position: 58% center;

  transform: scale(1.01);
}

/* Background image remains clearly visible */
.hero-media-image {
  opacity: 0.84;
  filter:
    saturate(0.92)
    contrast(1.04)
    brightness(0.92);
}

/* Video starts hidden */
.hero-media-video {
  opacity: 0;
  transition: opacity 0.65s ease;
  filter:
    saturate(0.92)
    contrast(1.04)
    brightness(0.88);
}

/* Video displays after loading */
.hero.video-ready .hero-media-video {
  opacity: 0.78;
}

/* Image remains as subtle fallback behind video */
.hero.video-ready .hero-media-image {
  opacity: 0.18;
}

/*
 * Dark overlay only behind the left text.
 * The right side and globe remain clear.
 */
.hero-media-shade {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      rgba(5, 6, 8, 0.94) 0%,
      rgba(5, 6, 8, 0.86) 23%,
      rgba(5, 6, 8, 0.66) 39%,
      rgba(5, 6, 8, 0.30) 54%,
      rgba(5, 6, 8, 0.08) 68%,
      transparent 82%
    );
}

/* Subtle premium grid above the background image */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );

  background-size: 48px 48px;
  opacity: 0.38;
}

/* =========================================================
   HERO GRID
   ========================================================= */

.hero-grid {
  position: relative;
  z-index: 4;

  display: grid;
  grid-template-columns:
    minmax(470px, 0.88fr)
    minmax(560px, 1.12fr);

  align-items: center;
  gap: 55px;
}

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

.hero-copy {
  position: relative;
  z-index: 5;
  padding-top: 28px;
}

.hero h1 {
  max-width: 680px;
  margin: 23px 0 24px;

  font-size: clamp(3.35rem, 4.55vw, 5rem);
  line-height: 1;
  letter-spacing: -0.05em;

  text-shadow:
    0 3px 22px rgba(0, 0, 0, 0.42);
}

.hero h1 span {
  display: block;
}

.hero .line-two {
  text-align: left;
}

.hero-copy .lead {
  max-width: 625px;

  font-size: clamp(1.05rem, 1.25vw, 1.21rem);
  line-height: 1.55;
  color: #d0d0d3;

  text-shadow:
    0 2px 14px rgba(0, 0, 0, 0.52);
}

.hero .button-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 30px;
}

.hero .button-row .btn {
  min-width: 176px;
  min-height: 54px;
  padding: 14px 26px;

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

  border-radius: 12px;
  font-size: 0.97rem;
  line-height: 1;
}

/* =========================================================
   HERO VISUAL / GLOBE
   ========================================================= */

.hero-visual {
  position: relative;
  z-index: 5;
  min-height: 650px;

  display: grid;
  place-items: center;

  isolation: isolate;
}

.globe-stage {
  position: relative;

  width: min(100%, 670px);
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  border-radius: 50%;
  user-select: none;
  touch-action: none;
}

/* Remove large orange circle behind globe */
.globe-stage::before,
.globe-stage::after {
  content: none;
}

.globe {
  position: relative;
  z-index: 2;

  width: 100%;
  height: 100%;
  display: block;

  cursor: grab;
  opacity: 0;

  transition: opacity 0.8s ease;

  filter:
    drop-shadow(0 0 28px rgba(255, 145, 64, 0.26));
}

.globe.ready {
  opacity: 1;
}

.globe:active {
  cursor: grabbing;
}

/* Thin orbit only — no filled orange circle */
.globe-ring {
  position: absolute;
  inset: 10%;
  z-index: 1;

  border: 1px solid rgba(255, 145, 80, 0.20);
  border-radius: 50%;

  pointer-events: none;
  animation: orbit 24s linear infinite;
}

.globe-ring::before,
.globe-ring::after {
  content: "";
  position: absolute;

  border: 1px dashed rgba(255, 163, 97, 0.14);
  border-radius: 50%;
}

.globe-ring::before {
  inset: -10%;
  transform: rotate(62deg);
}

.globe-ring::after {
  inset: 9%;
  transform: rotate(-34deg);
}

/* =========================================================
   LIVE IP LABELS
   ========================================================= */

.globe-label {
  position: absolute;
  z-index: 5;

  display: flex;
  align-items: center;
  gap: 7px;

  padding: 7px 11px;

  background: rgba(18, 18, 21, 0.86);
  border: 1px solid rgba(255, 140, 70, 0.36);
  border-radius: 8px;

  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.30),
    0 0 18px rgba(255, 102, 0, 0.09);

  font:
    600 0.66rem
    ui-monospace,
    SFMono-Regular,
    Menlo,
    monospace;

  white-space: nowrap;
  pointer-events: none;

  transform: translate(-50%, -120%);
  opacity: 0;

  transition:
    opacity 0.2s ease,
    filter 0.2s ease;
}

.globe-label.visible {
  opacity: 1;
}

.globe-label i {
  width: 7px;
  height: 7px;

  border-radius: 50%;
  background: var(--orange);

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

  animation: pulse 1.5s ease-in-out infinite;
}

.globe-label b {
  color: var(--orange);
  font-size: 0.61rem;
  letter-spacing: 0.08em;
}

.globe-label span {
  padding-left: 7px;

  color: #f0f0f2;
  font-weight: 500;

  border-left:
    1px solid rgba(255, 255, 255, 0.16);
}

.globe-status {
  display: none;
}

/* =========================================================
   HERO TRUST ITEMS
   ========================================================= */

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 11px;

  margin-top: 31px;
}

.hero-trust span {
  position: relative;

  padding: 10px 14px 10px 38px;

  color: #d0d0d3;
  font-size: 0.78rem;

  background: rgba(15, 15, 18, 0.38);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;

  backdrop-filter: blur(8px);
}

.hero-trust span::before {
  content: "";
  position: absolute;

  left: 14px;
  top: 50%;

  width: 10px;
  height: 10px;

  transform: translateY(-50%);

  border: 2px solid var(--orange);
  border-radius: 2px;

  box-shadow:
    0 0 10px rgba(255, 102, 0, 0.32);
}

.hero-trust span:nth-child(2)::before {
  border-radius: 50%;
}

.hero-trust span:nth-child(3)::before {
  transform:
    translateY(-50%)
    rotate(45deg);
}

/* =========================================================
   EXISTING HOME SECTIONS
   ========================================================= */

.feature-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-bottom: 22px;
}

.feature-tabs button {
  padding: 9px 14px;

  color: #bbb;
  cursor: pointer;

  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
}

.feature-tabs button.active {
  color: #fff;
  background: var(--orange);
  border-color: var(--orange);
}

.dashboard-shell {
  padding: 18px;

  background: #151518;
  border: 1px solid var(--line);
  border-radius: 24px;

  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.40);
}

.dashboard-shell img {
  width: 100%;
  aspect-ratio: 2 / 1;

  object-fit: cover;
  border-radius: 14px;
}

.traffic-flow {
  position: relative;
  height: 220px;
  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 102, 0, 0.18),
      transparent 52%
    ),
    #151518;

  border: 1px solid var(--line);
  border-radius: 20px;
}

.packet {
  position: absolute;
  left: -20px;

  width: 10px;
  height: 10px;

  border: 1px solid var(--orange);
  border-radius: 50%;

  animation: packet 5s linear infinite;
}

.packet:nth-child(2) {
  top: 42%;
  animation-delay: 1s;
}

.packet:nth-child(3) {
  top: 70%;
  animation-delay: 2.2s;
}

.packet:nth-child(4) {
  top: 25%;
  animation-delay: 3.2s;
}

.shield-center {
  position: absolute;
  left: 50%;
  top: 50%;

  width: 88px;
  height: 105px;

  display: grid;
  place-items: center;

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

  background:
    linear-gradient(
      150deg,
      #ff7f2b,
      #d74612
    );

  clip-path:
    polygon(
      50% 0,
      92% 18%,
      86% 70%,
      50% 100%,
      14% 70%,
      8% 18%
    );

  font-size: 2rem;
}

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

@keyframes pulse {
  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.45;
  }
}

@keyframes orbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes packet {
  0% {
    transform: translateX(0);
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  50% {
    transform: translateX(48vw);
  }

  60% {
    opacity: 0;
  }

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1160px) {
  .hero-grid {
    grid-template-columns:
      minmax(420px, 0.9fr)
      minmax(500px, 1.1fr);

    gap: 30px;
  }

  .hero h1 {
    font-size:
      clamp(3.15rem, 4.6vw, 4.65rem);
  }

  .globe-stage {
    max-width: 600px;
  }
}

@media (max-width: 1020px) {
  .hero {
    min-height: auto;
    padding-top: 112px;
  }

  .hero-grid {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .hero-copy {
    padding-top: 10px;
  }

  .hero h1 {
    max-width: 760px;
  }

  .hero-visual {
    min-height: 560px;
  }

  .globe-stage {
    max-width: 570px;
  }

  /*
   * Stronger shading on tablet because
   * text and globe stack vertically.
   */
  .hero-media-shade {
    background:
      linear-gradient(
        180deg,
        rgba(5, 6, 8, 0.88) 0%,
        rgba(5, 6, 8, 0.72) 42%,
        rgba(5, 6, 8, 0.22) 72%,
        rgba(5, 6, 8, 0.08) 100%
      );
  }
}

@media (max-width: 600px) {
  .hero {
    padding:
      94px 0 48px;
  }

  .hero h1 {
    margin-top: 19px;

    font-size:
      clamp(2.45rem, 10.4vw, 3.4rem);
  }

  .hero-copy .lead {
    font-size: 1rem;
  }

  .hero .button-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }

  .hero .button-row .btn {
    min-width: 0;
    padding-inline: 14px;
  }

  .hero-visual {
    min-height: 420px;
  }

  .globe-stage {
    width: 430px;
    max-width: 118vw;
    margin-left: -9vw;
  }

  .globe-label {
    padding: 6px 8px;
    font-size: 0.54rem;
  }

  .globe-label:nth-of-type(n + 5) {
    display: none;
  }

  .hero-trust {
    margin-top: 24px;
  }

  .hero-trust span {
    padding-left: 34px;
    font-size: 0.72rem;
  }

  .hero-media-image,
  .hero-media-video {
    object-position: 58% center;
  }
}

/* =========================================================
   ACCESSIBILITY
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
  .globe-ring,
  .globe-label i,
  .packet {
    animation: none !important;
  }

  .hero-media-video {
    display: none;
  }

  .hero-media-image {
    opacity: 0.84;
  }
}
/* =========================================================
   CLICKRONIX — HOW IT WORKS SECTION
   ========================================================= */

.clickronix-process-section {
  position: relative;
  overflow: hidden;
}

.clickronix-process-layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1.5fr)
    minmax(360px, 0.7fr);

  align-items: center;
  gap: clamp(40px, 6vw, 90px);
}

.clickronix-process-content {
  min-width: 0;
}

.clickronix-process-section .section-head {
  margin-bottom: 38px;
}

.clickronix-process-timeline {
  position: relative;
  display: grid;
  gap: 20px;
}

.clickronix-process-timeline::before {
  content: "";
  position: absolute;

  top: 16px;
  bottom: 16px;
  left: 25px;

  width: 1px;

  background:
    linear-gradient(
      to bottom,
      transparent,
      rgba(255, 102, 0, 0.8) 12%,
      rgba(255, 102, 0, 0.3) 88%,
      transparent
    );
}

/* =========================================================
   PROCESS CARDS
   ========================================================= */

.clickronix-process-card {
  position: relative;

  min-height: 144px;
  padding: 25px 28px 25px 75px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  background: rgba(255, 255, 255, 0.24);
  border: 1px solid rgba(23, 23, 26, 0.12);
  border-radius: 17px;

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease,
    background 0.35s ease;
}

.clickronix-process-card:hover {
  transform: translateX(7px);

  background: rgba(255, 255, 255, 0.42);
  border-color: rgba(255, 102, 0, 0.4);

  box-shadow:
    0 20px 50px rgba(23, 23, 26, 0.08);
}

.clickronix-process-number {
  position: absolute;

  left: 8px;
  top: 22px;
  z-index: 2;

  width: 35px;
  height: 35px;

  display: grid;
  place-items: center;

  color: #17171a;
  background: #ff6600;

  border-radius: 50%;

  font-size: 0.92rem;
  font-weight: 700;

  box-shadow:
    0 0 0 6px rgba(255, 102, 0, 0.08),
    0 9px 22px rgba(255, 102, 0, 0.2);
}

.clickronix-process-card h3 {
  margin: 0 0 13px;

  color: #17171a;

  font-size: clamp(1.35rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -0.035em;
}

.clickronix-process-card p {
  max-width: 720px;
  margin: 0;

  line-height: 1.65;
}

/* =========================================================
   ORBITAL ANIMATION
   ========================================================= */

.clickronix-orbit-wrap {
  position: relative;

  width: min(100%, 470px);
  aspect-ratio: 1;

  margin-inline: auto;

  display: grid;
  place-items: center;

  isolation: isolate;
}

.clickronix-orbit-wrap::before {
  content: "";
  position: absolute;
  inset: 14%;

  border-radius: 50%;

  background:
    radial-gradient(
      circle,
      rgba(255, 102, 0, 0.1) 0%,
      rgba(255, 102, 0, 0.035) 42%,
      transparent 70%
    );

  filter: blur(2px);

  animation:
    clickronixCoreGlow 3.2s ease-in-out infinite;
}

.clickronix-orbit-ring {
  position: absolute;
  inset: 13%;

  border: 1px solid rgba(23, 23, 26, 0.18);
  border-radius: 50%;

  animation:
    clickronixOrbitRotate 18s linear infinite;
}

.clickronix-orbit-ring::before,
.clickronix-orbit-ring::after {
  content: "";
  position: absolute;

  border-radius: 50%;
  pointer-events: none;
}

.clickronix-orbit-ring::before {
  inset: 13%;

  border:
    1px dashed rgba(23, 23, 26, 0.18);

  animation:
    clickronixOrbitReverse 13s linear infinite;
}

.clickronix-orbit-ring::after {
  inset: -12%;

  border:
    1px dashed rgba(255, 102, 0, 0.2);

  animation:
    clickronixOrbitReverse 24s linear infinite;
}

.clickronix-orbit-axis {
  position: absolute;

  width: 76%;
  height: 30%;

  border: 1px solid rgba(23, 23, 26, 0.12);
  border-radius: 50%;
}

.clickronix-orbit-axis-one {
  transform: rotate(-25deg);
}

.clickronix-orbit-axis-two {
  transform: rotate(38deg);
}

/* =========================================================
   CENTER ORANGE SHIELD
   ========================================================= */

.clickronix-center-shield {
  position: relative;
  z-index: 10;

  width: 102px;
  height: 118px;

  display: grid;
  place-items: center;

  color: #17171a;

  background:
    linear-gradient(
      145deg,
      #ff8a36,
      #ff6600 55%,
      #d94c00
    );

  clip-path:
    polygon(
      50% 0%,
      91% 16%,
      87% 65%,
      73% 83%,
      50% 100%,
      27% 83%,
      13% 65%,
      9% 16%
    );

  filter:
    drop-shadow(
      0 18px 25px rgba(23, 23, 26, 0.18)
    )
    drop-shadow(
      0 0 24px rgba(255, 102, 0, 0.26)
    );

  animation:
    clickronixShieldFloat 3.4s ease-in-out infinite;
}

.clickronix-center-shield::before {
  content: "";
  position: absolute;
  inset: 8px;

  clip-path: inherit;

  border: 1px solid rgba(23, 23, 26, 0.23);

  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.18),
      transparent 55%
    );
}

.clickronix-center-shield svg {
  position: relative;
  z-index: 2;

  width: 42px;
  height: 42px;

  fill: none;
  stroke: #17171a;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clickronix-shield-pulse {
  position: absolute;
  z-index: 1;

  width: 145px;
  height: 145px;

  border:
    1px solid rgba(255, 102, 0, 0.28);

  border-radius: 50%;

  animation:
    clickronixShieldPulse 2.6s ease-out infinite;
}

.clickronix-shield-pulse-delay {
  animation-delay: 1.3s;
}

/* =========================================================
   ORBIT NODES
   ========================================================= */

.clickronix-orbit-node {
  position: absolute;
  inset: 0;
  z-index: 5;

  pointer-events: none;

  animation:
    clickronixNodeOrbit 14s linear infinite;
}

.clickronix-orbit-node span {
  position: absolute;

  top: 50%;
  right: 4%;

  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  color: #ffffff;
  background: #17171a;

  border:
    1px solid rgba(255, 102, 0, 0.45);

  border-radius: 50%;

  box-shadow:
    0 12px 24px rgba(23, 23, 26, 0.18),
    0 0 18px rgba(255, 102, 0, 0.08);

  transform: translateY(-50%);

  animation:
    clickronixNodeCounterRotate 14s linear infinite;
}

.clickronix-orbit-node span::before {
  content: "";
  position: absolute;
  inset: -7px;

  border:
    1px solid rgba(23, 23, 26, 0.1);

  border-radius: inherit;
}

.clickronix-orbit-node svg {
  width: 20px;
  height: 20px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clickronix-node-one {
  transform: rotate(0deg);
  animation-delay: 0s;
}

.clickronix-node-one span {
  animation-delay: 0s;
}

.clickronix-node-two {
  transform: rotate(72deg);
  animation-delay: -2.8s;
}

.clickronix-node-two span {
  animation-delay: -2.8s;
}

.clickronix-node-three {
  transform: rotate(144deg);
  animation-delay: -5.6s;
}

.clickronix-node-three span {
  animation-delay: -5.6s;
}

.clickronix-node-four {
  transform: rotate(216deg);
  animation-delay: -8.4s;
}

.clickronix-node-four span {
  animation-delay: -8.4s;
}

.clickronix-node-five {
  transform: rotate(288deg);
  animation-delay: -11.2s;
}

.clickronix-node-five span {
  animation-delay: -11.2s;
}

/* =========================================================
   SMALL DATA DOTS
   ========================================================= */

.clickronix-data-dot {
  position: absolute;
  z-index: 4;

  width: 7px;
  height: 7px;

  background: #17171a;

  border: 2px solid #ff6600;
  border-radius: 50%;

  box-shadow:
    0 0 12px rgba(255, 102, 0, 0.45);

  animation:
    clickronixDataPulse 2s ease-in-out infinite;
}

.clickronix-dot-one {
  top: 18%;
  left: 28%;
  animation-delay: 0s;
}

.clickronix-dot-two {
  top: 30%;
  right: 14%;
  animation-delay: 0.55s;
}

.clickronix-dot-three {
  right: 27%;
  bottom: 17%;
  animation-delay: 1.1s;
}

.clickronix-dot-four {
  bottom: 27%;
  left: 13%;
  animation-delay: 1.65s;
}

/* =========================================================
   ANIMATION KEYFRAMES
   ========================================================= */

@keyframes clickronixOrbitRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes clickronixOrbitReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes clickronixNodeOrbit {
  to {
    transform: rotate(360deg);
  }
}

@keyframes clickronixNodeCounterRotate {
  to {
    transform:
      translateY(-50%)
      rotate(-360deg);
  }
}

@keyframes clickronixShieldFloat {
  0%,
  100% {
    transform:
      translateY(0)
      rotate(-1deg);
  }

  50% {
    transform:
      translateY(-9px)
      rotate(1deg);
  }
}

@keyframes clickronixShieldPulse {
  0% {
    transform: scale(0.66);
    opacity: 0.65;
  }

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

@keyframes clickronixCoreGlow {
  0%,
  100% {
    transform: scale(0.94);
    opacity: 0.65;
  }

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

@keyframes clickronixDataPulse {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.4;
  }

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1050px) {
  .clickronix-process-layout {
    grid-template-columns:
      minmax(0, 1.3fr)
      minmax(300px, 0.7fr);

    gap: 35px;
  }

  .clickronix-orbit-wrap {
    max-width: 390px;
  }
}

@media (max-width: 820px) {
  .clickronix-process-layout {
    grid-template-columns: 1fr;
  }

  .clickronix-orbit-wrap {
    width: min(100%, 430px);
    margin-top: 15px;
  }
}

@media (max-width: 600px) {
  .clickronix-process-section .section-head {
    margin-bottom: 28px;
  }

  .clickronix-process-card {
    min-height: auto;
    padding: 23px 20px 23px 62px;
  }

  .clickronix-process-timeline::before {
    left: 20px;
  }

  .clickronix-process-number {
    left: 3px;

    width: 35px;
    height: 35px;
  }

  .clickronix-process-card h3 {
    font-size: 1.27rem;
  }

  .clickronix-orbit-wrap {
    max-width: 350px;
  }

  .clickronix-center-shield {
    width: 82px;
    height: 96px;
  }

  .clickronix-orbit-node span {
    width: 40px;
    height: 40px;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .clickronix-orbit-ring,
  .clickronix-orbit-ring::before,
  .clickronix-orbit-ring::after,
  .clickronix-orbit-node,
  .clickronix-orbit-node span,
  .clickronix-center-shield,
  .clickronix-shield-pulse,
  .clickronix-orbit-wrap::before,
  .clickronix-data-dot {
    animation: none !important;
  }
}
/* =========================================================
   CLICKRONIX — SEO TRAFFIC THREAT SECTION
   EXACT STAGGERED LAYOUT + LIGHT ORANGE HOVER
   ========================================================= */

.clickronix-threat-section {
  position: relative;
  overflow: hidden;
  padding: clamp(85px, 8vw, 125px) 0;
  background: #0f0f10;
}

.clickronix-threat-section::before {
  content: "";
  position: absolute;
  top: -260px;
  left: 50%;
  width: 1000px;
  height: 520px;
  pointer-events: none;
  transform: translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(255, 102, 0, 0.07) 0%,
      rgba(255, 102, 0, 0.018) 45%,
      transparent 72%
    );

  filter: blur(30px);
}

.clickronix-threat-section .container {
  position: relative;
  z-index: 2;
  width: min(100% - 40px, 1240px);
  margin-inline: auto;
}

/* =========================================================
   OPTIONAL SECTION HEADING
   ========================================================= */

.clickronix-threat-heading {
  max-width: 900px;
  margin: 0 auto clamp(45px, 6vw, 72px);
  text-align: center;
}

.clickronix-threat-heading .eyebrow {
  margin-bottom: 17px;
}

.clickronix-threat-heading h2 {
  max-width: 900px;
  margin: 0 auto 22px;
  color: #f7f7f8;

  font-size: clamp(2.35rem, 4.4vw, 4.5rem);
  line-height: 0.98;
  letter-spacing: -0.055em;
}

.clickronix-threat-heading h2 span {
  color: var(--orange, #ff5a00);
}

.clickronix-threat-heading p {
  max-width: 760px;
  margin: 0 auto;

  color: #a6a6ad;
  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.75;
}

/* =========================================================
   EXACT DESKTOP GRID
   ========================================================= */

.clickronix-threat-grid {
  display: grid;

  /* Four equal columns create the exact symmetrical layout */
  grid-template-columns: repeat(4, minmax(0, 1fr));

  grid-template-rows:
    minmax(220px, auto)
    minmax(220px, auto)
    minmax(220px, auto);

  grid-template-areas:
    ". card1 card2 ."
    "card3 center center card4"
    ". card5 card6 .";

  gap: 14px;

  width: 100%;
  max-width: 1120px;
  margin: 0 auto;

  align-items: stretch;
  justify-content: center;
}

.clickronix-threat-card-1 {
  grid-area: card1;
}

.clickronix-threat-card-2 {
  grid-area: card2;
}

.clickronix-threat-card-3 {
  grid-area: card3;
}

.clickronix-threat-card-4 {
  grid-area: card4;
}

.clickronix-threat-card-5 {
  grid-area: card5;
}

.clickronix-threat-card-6 {
  grid-area: card6;
}

.clickronix-threat-center {
  grid-area: center;
}

/* =========================================================
   OUTER CARDS
   ========================================================= */

/* =========================================================
   OUTER CARDS
   ========================================================= */

.clickronix-threat-card {
  position: relative;

  min-height: 220px;
  padding: 22px 20px 20px;

  display: flex;
  flex-direction: column;

  /* Keeps icon at top and text at bottom like reference */
  justify-content: space-between;

  overflow: hidden;

  background: #101011;

  border: 1px solid rgba(255, 255, 255, 0.19);
  border-radius: 5px;

  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.02);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}
.clickronix-threat-card-top {
  width: 100%;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
}

.clickronix-threat-card > div:last-child {
  margin-top: auto;
}

.clickronix-threat-card h3 {
  margin: 0 0 11px;

  color: #ffffff;

  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -0.025em;
}

.clickronix-threat-card p {
  margin: 0;

  color: #d0d0d5;

  font-size: 0.72rem;
  line-height: 1.58;
}

.clickronix-threat-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  color: #ff5a00;
}

.clickronix-threat-number {
  color: #ffffff;

  font-size: 0.56rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.11em;
}

/* Orange light appearing from top-left on hover */
.clickronix-threat-card::before {
  content: "";
  position: absolute;

  top: -95px;
  left: -95px;

  width: 240px;
  height: 240px;

  pointer-events: none;
  opacity: 0;

  background:
    radial-gradient(
      circle,
      rgba(255, 116, 40, 0.24) 0%,
      rgba(255, 102, 0, 0.11) 34%,
      rgba(255, 102, 0, 0.035) 55%,
      transparent 74%
    );

  filter: blur(4px);

  transition:
    opacity 0.35s ease,
    transform 0.45s ease;
}

/* Fine orange bottom line */
.clickronix-threat-card::after {
  content: "";
  position: absolute;

  right: 18px;
  bottom: 0;
  left: 18px;

  height: 1px;

  opacity: 0;
  transform: scaleX(0.35);

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 102, 0, 0.8),
      transparent
    );

  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}

.clickronix-threat-card:hover {
  z-index: 5;

  transform: translateY(-5px);

  background:
    linear-gradient(
      145deg,
      rgba(255, 112, 38, 0.075),
      rgba(255, 102, 0, 0.018) 48%,
      rgba(255, 255, 255, 0.005)
    ),
    #111112;

  border-color: rgba(255, 119, 45, 0.58);

  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.34),
    0 0 28px rgba(255, 102, 0, 0.075),
    inset 0 0 24px rgba(255, 102, 0, 0.025);
}

.clickronix-threat-card:hover::before {
  opacity: 1;
  transform: translate(16px, 14px) scale(1.08);
}

.clickronix-threat-card:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

/* =========================================================
   CARD HEADER
   ========================================================= */

.clickronix-threat-card-top {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
}

.clickronix-threat-icon {
  width: 34px;
  height: 34px;

  display: grid;
  place-items: center;

  color: var(--orange, #ff5a00);

  transition:
    transform 0.35s ease,
    filter 0.35s ease,
    color 0.35s ease;
}

.clickronix-threat-card:hover .clickronix-threat-icon {
  color: #ff7a35;
  transform: translateY(-2px) scale(1.08);

  filter:
    drop-shadow(0 0 9px rgba(255, 102, 0, 0.55));
}

.clickronix-threat-icon svg {
  width: 31px;
  height: 31px;

  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.clickronix-threat-number {
  color: #ffffff;

  font:
    700 0.56rem/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  letter-spacing: 0.11em;

  transition: color 0.35s ease;
}

.clickronix-threat-card:hover .clickronix-threat-number {
  color: #ff9a61;
}

/* =========================================================
   CARD CONTENT
   ========================================================= */

.clickronix-threat-card > div:last-child {
  position: relative;
  z-index: 2;
}

.clickronix-threat-card h3 {
  margin: 26px 0 10px;

  color: #ffffff;

  font-size: clamp(0.98rem, 1.2vw, 1.08rem);
  line-height: 1.2;
  letter-spacing: -0.03em;

  transition:
    color 0.35s ease,
    transform 0.35s ease;
}

.clickronix-threat-card:hover h3 {
  color: #fff7f1;
  transform: translateX(2px);
}

.clickronix-threat-card p {
  margin: 0;

  color: #d0d0d5;

  font-size: 0.72rem;
  line-height: 1.62;

  transition: color 0.35s ease;
}

.clickronix-threat-card:hover p {
  color: #e4d8d1;
}

/* =========================================================
   CENTER PANEL
   ========================================================= */

.clickronix-threat-center {
  position: relative;

  min-height: 185px;
  padding: 29px 34px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  overflow: hidden;
  text-align: center;

  background:
    linear-gradient(
      145deg,
      #202021,
      #1b1b1d 58%,
      #19191b
    );

  border: 1px solid rgba(255, 255, 255, 0.055);
  border-radius: 5px;

  box-shadow:
    0 24px 65px rgba(0, 0, 0, 0.24);

  transition:
    transform 0.35s ease,
    border-color 0.35s ease,
    box-shadow 0.35s ease;
}

.clickronix-threat-center::before {
  content: "";
  position: absolute;

  top: -130px;
  left: 50%;

  width: 410px;
  height: 260px;

  transform: translateX(-50%);

  background:
    radial-gradient(
      circle,
      rgba(255, 102, 0, 0.12),
      rgba(255, 102, 0, 0.035) 45%,
      transparent 72%
    );

  filter: blur(12px);
  opacity: 0.55;

  transition:
    opacity 0.35s ease,
    transform 0.45s ease;
}

.clickronix-threat-center::after {
  content: "";
  position: absolute;

  right: 42px;
  bottom: 0;
  left: 42px;

  height: 1px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 112, 38, 0.88),
      transparent
    );

  transition: opacity 0.35s ease;
}

.clickronix-threat-center:hover {
  transform: translateY(-4px);

  border-color: rgba(255, 112, 38, 0.24);

  box-shadow:
    0 28px 75px rgba(0, 0, 0, 0.32),
    0 0 38px rgba(255, 102, 0, 0.055);
}

.clickronix-threat-center:hover::before {
  opacity: 1;
  transform: translateX(-50%) translateY(18px) scale(1.08);
}

.clickronix-threat-center:hover::after {
  opacity: 1;
}

.clickronix-threat-center > * {
  position: relative;
  z-index: 2;
}

/* =========================================================
   CENTER LABEL
   ========================================================= */

.clickronix-threat-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  margin-bottom: 17px;
  padding: 7px 12px;

  color: #ffffff;

  background: rgba(14, 14, 15, 0.76);

  border: 1px solid rgba(255, 102, 0, 0.32);
  border-radius: 999px;

  font:
    700 0.5rem/1
    ui-monospace,
    SFMono-Regular,
    Menlo,
    Monaco,
    Consolas,
    monospace;

  letter-spacing: 0.13em;
  text-transform: uppercase;

  transition:
    color 0.35s ease,
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease;
}

.clickronix-threat-center:hover .clickronix-threat-label {
  color: #fff4ed;
  background: rgba(255, 102, 0, 0.055);
  border-color: rgba(255, 128, 62, 0.55);

  box-shadow:
    0 0 18px rgba(255, 102, 0, 0.08);
}

/* =========================================================
   CENTER TEXT
   ========================================================= */

.clickronix-threat-center h2 {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;

  color: #ffffff;

  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.035em;

  text-align: center;
  text-wrap: balance;
}

.clickronix-threat-center p {
  max-width: 520px;
  margin: 15px auto 0;

  color: #b9b9bf;
  font-size: 0.82rem;
  line-height: 1.65;
}

.clickronix-threat-center .btn {
  min-height: 44px;
  margin-top: 21px;
  padding-inline: 21px;
}

/* Hide optional paragraph/button to match reference image exactly */
.clickronix-threat-center > p,
.clickronix-threat-center > .btn {
  display: none;
}

/* =========================================================
   LARGE TABLETS
   ========================================================= */

@media (max-width: 1120px) {
  .clickronix-threat-grid {
    max-width: 900px;

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

    grid-template-rows: auto;

    grid-template-areas:
      "center center"
      "card1 card2"
      "card3 card4"
      "card5 card6";
  }

  .clickronix-threat-center {
    min-height: 250px;
  }

  .clickronix-threat-card {
    min-height: 210px;
  }
}

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

@media (max-width: 700px) {
  .clickronix-threat-section {
    padding: 75px 0;
  }

  .clickronix-threat-section .container {
    width: min(100% - 28px, 1240px);
  }

  .clickronix-threat-heading {
    margin-bottom: 38px;
    text-align: left;
  }

  .clickronix-threat-heading h2,
  .clickronix-threat-heading p {
    margin-left: 0;
  }

  .clickronix-threat-grid {
    grid-template-columns: 1fr;

    grid-template-areas:
      "center"
      "card1"
      "card2"
      "card3"
      "card4"
      "card5"
      "card6";

    gap: 12px;
  }

  .clickronix-threat-center {
    min-height: auto;
    padding: 38px 24px;

    align-items: flex-start;
    text-align: left;
  }

  .clickronix-threat-center h2 {
    font-size: clamp(1.85rem, 8vw, 2.55rem);
  }

  .clickronix-threat-center p {
    margin-left: 0;
  }

  .clickronix-threat-card {
    min-height: 205px;
    padding: 23px;
  }

  .clickronix-threat-card h3 {
    font-size: 1.08rem;
  }

  .clickronix-threat-card p {
    font-size: 0.78rem;
  }
}

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

@media (max-width: 430px) {
  .clickronix-threat-heading h2 {
    font-size: 2.25rem;
  }

  .clickronix-threat-card {
    min-height: 200px;
  }

  .clickronix-threat-center .btn {
    width: 100%;
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .clickronix-threat-card,
  .clickronix-threat-center,
  .clickronix-threat-icon,
  .clickronix-threat-card h3 {
    transition: none;
  }

  .clickronix-threat-card:hover,
  .clickronix-threat-center:hover {
    transform: none;
  }
}
/* =========================================================
   CLICKRONIX THREAT SECTION — VISIBILITY FIX
   Keeps existing hover exactly as it is
   ========================================================= */

.clickronix-threat-section,
.clickronix-threat-section .container,
.clickronix-threat-heading,
.clickronix-threat-grid,
.clickronix-threat-card,
.clickronix-threat-center {
  opacity: 1 !important;
  visibility: visible !important;
}

.clickronix-threat-card,
.clickronix-threat-center {
  transform: none;
}

/* Keep heading fully visible before hover */
.clickronix-threat-heading .eyebrow {
  color: var(--orange, #ff5a00) !important;
  opacity: 1 !important;
}

.clickronix-threat-heading h2 {
  color: #f7f7f8 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.clickronix-threat-heading h2 span {
  color: var(--orange, #ff5a00) !important;
  opacity: 1 !important;
}

.clickronix-threat-heading p {
  color: #a6a6ad !important;
  opacity: 1 !important;
}

/* Keep card content visible without requiring hover */
.clickronix-threat-card-top,
.clickronix-threat-card > div:last-child {
  opacity: 1 !important;
  visibility: visible !important;
}

.clickronix-threat-icon {
  color: var(--orange, #ff5a00) !important;
  opacity: 1 !important;
}

.clickronix-threat-number {
  color: #ffffff !important;
  opacity: 1 !important;
}

.clickronix-threat-card h3 {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.clickronix-threat-card p {
  color: #d0d0d5 !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep center card content visible */
.clickronix-threat-label {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.clickronix-threat-center h2 {
  color: #ffffff !important;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Neutral starting state only — hover CSS remains untouched */
.clickronix-threat-card:not(:hover) {
  transform: none;
}

.clickronix-threat-center:not(:hover) {
  transform: none;
}
/* =========================================================
   CLICKRONIX — INTERACTIVE MAGNET WORKFLOW
   ========================================================= */

.workflow-magnet-section {
  position: relative;
  overflow: hidden;
  padding: 0px 0;
  background: #d5d5d7;
}

.workflow-magnet-container {
  width: min(100% - 70px, 1340px);
}

/* =========================================================
   ANIMATION STAGE
   ========================================================= */

.workflow-magnet-stage {
  position: relative;
  min-height: 570px;
  padding: 54px 0;
  isolation: isolate;
}

.workflow-logo-field {
  position: absolute;
  inset: 0;
  z-index: 4;
  overflow: hidden;
  pointer-events: none;
}

/* =========================================================
   MAIN CARD
   ========================================================= */

.workflow-magnet-card {
  position: relative;
  z-index: 2;

  min-height: 480px;

  display: grid;
  grid-template-columns:
    minmax(0, 1.08fr)
    minmax(350px, 0.92fr);

  overflow: hidden;

  background: #19191c;
  border: 1px solid rgba(23, 23, 26, 0.72);
  border-radius: 24px;

  box-shadow:
    0 26px 70px rgba(23, 23, 26, 0.14);
}

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

.workflow-magnet-copy {
  padding: 40px 58px;
}

.workflow-magnet-copy .eyebrow {
  margin-bottom: 12px;
}

.workflow-magnet-copy h2 {
  max-width: 560px;
  margin: 0 0 16px;

  color: #ffffff;

  font-size: clamp(2rem, 3vw, 3.2rem);
  line-height: 1.02;
  letter-spacing: -0.05em;
}

.workflow-magnet-copy > p {
  max-width: 650px;
  margin: 0;

  color: #d0d0d5;

  font-size: clamp(0.98rem, 1.15vw, 1.1rem);
  line-height: 1.65;
}

.workflow-magnet-list {
  display: grid;
  gap: 14px;

  margin: 27px 0 31px;
  padding: 0;

  list-style: none;
}

.workflow-magnet-list li {
  position: relative;
  padding-left: 27px;

  color: #fff4ef;

  font-size: 0.96rem;
  line-height: 1.45;
}

.workflow-magnet-list li::before {
  content: "✓";

  position: absolute;
  top: 0;
  left: 0;

  color: var(--orange, #ff6600);
  font-weight: 800;
}

.workflow-magnet-copy .btn {
  align-self: flex-start;
}

/* =========================================================
   RIGHT MAGNET AREA
   ========================================================= */

.workflow-magnet-visual {
  position: relative;

  min-height: 100%;

  display: grid;
  place-items: center;

  background:
    radial-gradient(
      circle at center,
      rgba(255, 102, 0, 0.08),
      transparent 48%
    ),
    linear-gradient(
      145deg,
      #232326,
      #1d1d20
    );

  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.workflow-magnet-visual::before {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  background-image:
    linear-gradient(
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.018) 1px,
      transparent 1px
    );

  background-size: 34px 34px;
}

.workflow-magnet-target {
  position: relative;
  z-index: 3;

  width: min(74%, 340px);
  aspect-ratio: 1;

  display: grid;
  place-items: center;

  border-radius: 50%;

  transition:
    transform 0.3s ease,
    filter 0.3s ease;
}

.workflow-magnet-ring {
  position: absolute;
  inset: 0;

  border: 1px dashed rgba(255, 102, 0, 0.32);
  border-radius: 50%;

  animation:
    workflowMagnetRotate 22s linear infinite;
}

.workflow-magnet-ring::before,
.workflow-magnet-ring::after {
  content: "";

  position: absolute;

  border-radius: 50%;
}

.workflow-magnet-ring::before {
  inset: 11%;

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

.workflow-magnet-ring::after {
  inset: 25%;

  border: 1px dashed rgba(255, 102, 0, 0.22);

  animation:
    workflowMagnetReverse 14s linear infinite;
}

.workflow-magnet-core {
  position: relative;
  z-index: 4;

  width: 132px;
  height: 132px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 9px;

  color: #ffffff;
  cursor: default;

  background: #26262a;

  border: 3px solid rgba(255, 102, 0, 0.82);
  border-radius: 27px;

  box-shadow:
    0 0 0 7px rgba(255, 102, 0, 0.075),
    0 20px 50px rgba(0, 0, 0, 0.3),
    0 0 28px rgba(255, 102, 0, 0.12);

  transition:
    border-color 0.25s ease,
    background 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease;
}

.workflow-magnet-core svg {
  width: 43px;
  height: 43px;

  fill: none;
  stroke: var(--orange, #ff6600);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.workflow-magnet-core span {
  color: #bdbdc3;

  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* Orange active state while logo is near */
.workflow-magnet-target.is-attracting {
  transform: scale(1.04);

  filter:
    drop-shadow(0 0 22px rgba(255, 102, 0, 0.24));
}

.workflow-magnet-target.is-attracting .workflow-magnet-core {
  background:
    linear-gradient(
      145deg,
      rgba(255, 102, 0, 0.24),
      #28282c
    );

  border-color: #ff6600;

  box-shadow:
    0 0 0 10px rgba(255, 102, 0, 0.12),
    0 0 48px rgba(255, 102, 0, 0.38),
    0 20px 50px rgba(0, 0, 0, 0.32);

  transform: scale(1.08);
}

/* =========================================================
   FALLING LOGOS
   ========================================================= */

.workflow-floating-logo {
  position: absolute;
  top: -86px;
  left: var(--start-x);

  z-index: 10;

  width: 62px;
  height: 62px;
  padding: 0;

  display: grid;
  place-items: center;

  pointer-events: auto;
  cursor: grab;
  touch-action: none;
  user-select: none;

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

  border: 1px solid rgba(23, 23, 26, 0.13);
  border-radius: 17px;

  box-shadow:
    0 13px 30px rgba(23, 23, 26, 0.15);

  animation:
    workflowLogoFall
    var(--duration)
    linear
    var(--delay)
    infinite;

  will-change: transform;
}

.workflow-floating-logo:nth-child(even) {
  animation-name: workflowLogoFallReverse;
}

.workflow-floating-logo img {
  width: 70%;
  height: 70%;

  object-fit: contain;

  pointer-events: none;
  user-select: none;
}

.workflow-floating-logo:hover {
  border-color: rgba(255, 102, 0, 0.55);

  box-shadow:
    0 15px 36px rgba(23, 23, 26, 0.19),
    0 0 20px rgba(255, 102, 0, 0.12);
}

.workflow-floating-logo.is-dragging {
  z-index: 30;

  cursor: grabbing;

  animation-play-state: paused;

  border-color: #ff6600;

  box-shadow:
    0 0 0 5px rgba(255, 102, 0, 0.12),
    0 20px 48px rgba(23, 23, 26, 0.26),
    0 0 30px rgba(255, 102, 0, 0.28);
}

/* =========================================================
   ATTACHED LOGOS
   ========================================================= */

.workflow-attached-logos {
  position: absolute;
  inset: 0;

  z-index: 6;

  pointer-events: none;
}

.workflow-attached-logo {
  position: absolute;

  width: 54px;
  height: 54px;

  display: grid;
  place-items: center;

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

  border: 2px solid #ff6600;
  border-radius: 15px;

  box-shadow:
    0 0 0 5px rgba(255, 102, 0, 0.09),
    0 13px 30px rgba(0, 0, 0, 0.24);

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

  animation:
    workflowLogoAttach 0.42s
    cubic-bezier(0.2, 0.8, 0.2, 1.25)
    forwards;
}

.workflow-attached-logo img {
  width: 68%;
  height: 68%;
  object-fit: contain;
}

/* Positions around the magnet */
.workflow-attached-logo:nth-child(1) {
  top: 19%;
  left: 50%;
}

.workflow-attached-logo:nth-child(2) {
  top: 35%;
  left: 78%;
}

.workflow-attached-logo:nth-child(3) {
  top: 69%;
  left: 75%;
}

.workflow-attached-logo:nth-child(4) {
  top: 81%;
  left: 48%;
}

.workflow-attached-logo:nth-child(5) {
  top: 65%;
  left: 21%;
}

.workflow-attached-logo:nth-child(6) {
  top: 32%;
  left: 23%;
}

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

@keyframes workflowLogoFall {
  0% {
    transform:
      translate3d(-15px, -90px, 0)
      rotate(-9deg);
  }

  30% {
    transform:
      translate3d(28px, 170px, 0)
      rotate(7deg);
  }

  65% {
    transform:
      translate3d(-24px, 410px, 0)
      rotate(-5deg);
  }

  100% {
    transform:
      translate3d(16px, 680px, 0)
      rotate(9deg);
  }
}

@keyframes workflowLogoFallReverse {
  0% {
    transform:
      translate3d(20px, -100px, 0)
      rotate(8deg);
  }

  35% {
    transform:
      translate3d(-24px, 185px, 0)
      rotate(-6deg);
  }

  70% {
    transform:
      translate3d(25px, 430px, 0)
      rotate(5deg);
  }

  100% {
    transform:
      translate3d(-18px, 690px, 0)
      rotate(-8deg);
  }
}

@keyframes workflowMagnetRotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes workflowMagnetReverse {
  to {
    transform: rotate(-360deg);
  }
}

@keyframes workflowLogoAttach {
  0% {
    opacity: 0;

    transform:
      translate(-50%, -50%)
      scale(0.35)
      rotate(-18deg);
  }

  100% {
    opacity: 1;

    transform:
      translate(-50%, -50%)
      scale(1)
      rotate(0);
  }
}

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

@media (max-width: 980px) {
  .workflow-magnet-container {
    width: min(100% - 40px, 1340px);
  }

  .workflow-magnet-card {
    grid-template-columns: 1fr;
  }

  .workflow-magnet-copy {
    padding: 54px 48px;
  }

  .workflow-magnet-visual {
    min-height: 400px;

    border-top:
      1px solid rgba(255, 255, 255, 0.07);

    border-left: 0;
  }

  .workflow-magnet-stage {
    min-height: 940px;
  }
}

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

@media (max-width: 600px) {
  .workflow-magnet-section {
    padding: 60px 0;
  }

  .workflow-magnet-container {
    width: min(100% - 24px, 1340px);
  }

  .workflow-magnet-stage {
    min-height: 870px;
    padding-block: 38px;
  }

  .workflow-magnet-card {
    border-radius: 18px;
  }

  .workflow-magnet-copy {
    padding: 42px 25px;
  }

  .workflow-magnet-copy h2 {
    font-size: clamp(2.1rem, 10vw, 3rem);
  }

  .workflow-magnet-list li {
    font-size: 0.88rem;
  }

  .workflow-magnet-visual {
    min-height: 350px;
  }

  .workflow-magnet-target {
    width: min(75%, 285px);
  }

  .workflow-magnet-core {
    width: 110px;
    height: 110px;
  }

  .workflow-floating-logo {
    width: 50px;
    height: 50px;
    border-radius: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .workflow-floating-logo,
  .workflow-magnet-ring,
  .workflow-magnet-ring::after {
    animation: none !important;
  }

  .workflow-floating-logo {
    display: none;
  }
}

/* =========================================================
   WORKFLOW MAGNET — FINAL GUTTER + RETURN-DRAG FIX
   ========================================================= */

.workflow-magnet-section {
  position: relative;
  overflow: hidden;
  background: #d5d5d7;
}

.workflow-magnet-container {
  width: min(100% - 24px, 1540px);
}

.workflow-magnet-stage {
  --workflow-gutter: clamp(120px, 12vw, 210px);
  position: relative;

  min-height: 560px;
  padding: 32px var(--workflow-gutter);

  overflow: hidden;
  isolation: isolate;
}

/* Main card occupies only the center, leaving true white gutters. */
.workflow-magnet-card {
  position: relative;
  z-index: 5;
  width: 100%;
  min-height: 430px;
}

/* Falling layer covers the whole stage, but each lane is clipped to white only. */
.workflow-logo-field {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: visible;
  pointer-events: none;
}

.workflow-logo-lane {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--workflow-gutter);
  overflow: hidden;
  pointer-events: none;
}

.workflow-logo-lane-left {
  left: 0;
}

.workflow-logo-lane-right {
  right: 0;
}

.workflow-logo-lane .workflow-floating-logo {
  left: var(--lane-x) !important;
  pointer-events: auto;
}

/* Keep idle/falling logos under the black card. */
.workflow-floating-logo {
  z-index: 2;
}

/* While grabbed, logo may cross above the card. */
.workflow-floating-logo.is-dragging {
  z-index: 100;
  pointer-events: auto;
}

.workflow-magnet-stage.is-dragging-logo {
  overflow: visible;
}

/* Connected logo is the only logo shown inside the magnet. */
.workflow-attached-logos,
.workflow-attached-logo {
  display: none !important;
}

.workflow-connected-logo {
  width: 58px;
  height: 58px;
  margin-bottom: 7px;
  object-fit: contain;
  cursor: grab;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}

.workflow-connected-logo:active {
  cursor: grabbing;
}

.workflow-magnet-core.has-connection .workflow-magnet-default-icon {
  display: none;
}

.workflow-magnet-core.has-connection {
  border-color: #ff6600;
  background: linear-gradient(145deg, rgba(255, 102, 0, 0.17), #26262a);
  box-shadow:
    0 0 0 8px rgba(255, 102, 0, 0.10),
    0 0 34px rgba(255, 102, 0, 0.28),
    0 20px 50px rgba(0, 0, 0, 0.30);
}

.workflow-magnet-core.has-connection #workflow-magnet-status {
  color: #ffffff;
}

#workflow-copy-title {
  color: #ffffff !important;
}

.workflow-magnet-copy.is-changing {
  animation: workflowContentSwap 0.38s ease;
}

@keyframes workflowContentSwap {
  from {
    opacity: 0.25;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 1100px) {
  .workflow-magnet-stage {
    --workflow-gutter: clamp(76px, 9vw, 112px);
    padding-inline: var(--workflow-gutter);
  }
}

@media (max-width: 900px) {
  .workflow-magnet-stage {
    --workflow-gutter: 62px;
    min-height: 1060px;
  }
}

@media (max-width: 600px) {
  .workflow-magnet-stage {
    --workflow-gutter: 44px;
    min-height: 950px;
    padding: 54px var(--workflow-gutter);
  }

  .workflow-floating-logo {
    width: 42px;
    height: 42px;
    border-radius: 12px;
  }
}
/* =========================================================
   REMOVE PROCESS TIMELINE ORANGE LINE
   ========================================================= */

.clickronix-process-timeline::before {
  display: none !important;
  content: none !important;
}

/* =========================================================
   MAGNET — SHOW CONNECTED IMAGE ONLY
   ========================================================= */

/* Hide the magnet icon after connecting */
.workflow-magnet-core.has-connection .workflow-magnet-default-icon {
  display: none !important;
}

/* Hide WooCommerce Connected / WordPress Connected text */
.workflow-magnet-core.has-connection #workflow-magnet-status {
  display: none !important;
}

/* Remove spacing inside the magnet after connection */
.workflow-magnet-core.has-connection {
  padding: 10px !important;
  gap: 0 !important;

  display: grid !important;
  place-items: center !important;

  overflow: hidden !important;
}

/* Make the connected logo use the complete magnet rectangle */
.workflow-magnet-core.has-connection .workflow-connected-logo {
  display: block !important;

  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;

  margin: 0 !important;
  padding: 0 !important;

  object-fit: contain !important;
  object-position: center !important;

  border-radius: 16px;
}

/* Keep the image clickable and draggable */
.workflow-connected-logo {
  cursor: grab;
  touch-action: none;
  user-select: none;
  pointer-events: auto;
}

.workflow-connected-logo:active {
  cursor: grabbing;
}

/* =========================================================
   CLICKRONIX — DOMAIN TRAFFIC INTELLIGENCE
   Final cleaned section styles
   ========================================================= */

.shield-traffic-check-section {
  position: relative;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  color: #ffffff;
  background: #111113;
}

.traffic-domain-background {
  position: relative;
  width: 100%;
  min-height: 360px;
  padding: 42px 0 0;
  overflow: hidden;
  background:
    radial-gradient(
      ellipse at 50% 68%,
      rgba(255, 102, 0, 0.13) 0%,
      rgba(255, 102, 0, 0.045) 30%,
      transparent 61%
    ),
    #111113;
}

.traffic-domain-background::before {
  content: "";
  position: absolute;
  top: 110px;
  left: 50%;
  z-index: 0;
  width: min(76vw, 900px);
  height: 310px;
  transform: translateX(-50%);
  pointer-events: none;
  background:
    radial-gradient(
      circle,
      rgba(255, 102, 0, 0.12),
      rgba(255, 102, 0, 0.035) 42%,
      transparent 72%
    );
  filter: blur(32px);
}

/* =========================================================
   HEADING
   ========================================================= */

.shield-traffic-check-head {
  position: relative;
  z-index: 5;
  width: min(100% - 56px, 1180px);
  margin: 0 auto;
  display: grid;
  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(260px, 0.55fr);
  align-items: end;
  gap: clamp(34px, 5vw, 76px);
}

.shield-traffic-check-head > div {
  min-width: 0;
}

.shield-traffic-check-head .eyebrow {
  display: inline-flex;
  margin: 0 0 9px;
  color: #ff6600;
}

.shield-traffic-check-head h2 {
  width: 100%;
  max-width: 650px;
  margin: 0;
  color: #ffffff !important;
  font-size: clamp(1.9rem, 2.65vw, 3.15rem) !important;
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.048em;
  text-align: left;
  text-wrap: balance;
}

.shield-traffic-check-head > p {
  width: 100%;
  max-width: 390px;
  margin: 0 0 3px;
  color: #aaaab1;
  font-size: 0.84rem;
  line-height: 1.5;
  text-align: left;
}

/* =========================================================
   FULL-WIDTH ANIMATION STAGE
   ========================================================= */

.traffic-domain-stage {
  position: relative;
  width: 100%;
  min-height: 250px !important;
  margin: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.traffic-domain-stage::before,
.traffic-domain-stage::after {
  content: none !important;
}

.traffic-domain-stage .traffic-rope-svg {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.traffic-domain-stage .traffic-rope {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transform-box: fill-box;
  transform-origin: center;
  will-change: transform;
}

.traffic-domain-stage .traffic-rope-white {
  stroke: url("#traffic-white-gradient");
  stroke-width: 1.25;
  opacity: 0.58;
}

.traffic-domain-stage .traffic-rope-orange {
  stroke: url("#traffic-orange-gradient");
  stroke-width: 1.6;
  opacity: 0.9;
  filter: url("#traffic-orange-glow");
  animation:
    trafficOrangeRopeJiggle 9s
    ease-in-out
    infinite alternate;
}

.traffic-domain-stage .traffic-rope-white-one {
  animation:
    trafficWhiteRopeOne 11s
    ease-in-out
    infinite alternate;
}

.traffic-domain-stage .traffic-rope-white-two {
  opacity: 0.36;
  animation:
    trafficWhiteRopeTwo 13s
    ease-in-out
    -4s
    infinite alternate;
}

/* =========================================================
   GLASS DOMAIN FORM
   ========================================================= */

.traffic-domain-card {
  position: relative;
  z-index: 6;
  width: min(100% - 36px, 500px);
  padding: 16px 18px;
  text-align: center;
  background:
    linear-gradient(
      145deg,
      rgba(255, 255, 255, 0.13),
      rgba(255, 255, 255, 0.05)
    );
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:
    0 18px 45px rgba(0, 0, 0, 0.28),
    0 0 34px rgba(255, 102, 0, 0.08);
}

.traffic-domain-card h3 {
  margin: 0 0 10px;
  color: #ffffff !important;
  font-size: clamp(1.05rem, 1.35vw, 1.32rem) !important;
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.traffic-domain-form {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    auto;
  gap: 8px;
  margin: 0;
}

.traffic-domain-form input {
  width: 100%;
  min-width: 0;
  height: 40px !important;
  padding: 0 13px;
  color: #ffffff;
  font-size: 0.82rem;
  background: rgba(8, 8, 10, 0.62);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
  outline: none;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    background 0.25s ease;
}

.traffic-domain-form input::placeholder {
  color: rgba(255, 255, 255, 0.48);
}

.traffic-domain-form input:focus {
  background: rgba(10, 10, 12, 0.76);
  border-color: rgba(255, 102, 0, 0.72);
  box-shadow:
    0 0 0 3px rgba(255, 102, 0, 0.1);
}

.traffic-domain-btn {
  min-width: 114px;
  height: 40px !important;
  padding: 0 15px;
  color: #ffffff;
  cursor: pointer;
  background:
    linear-gradient(
      145deg,
      #ff7a2f,
      #ff5800
    );
  border: 0;
  border-radius: 10px;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow:
    0 10px 22px rgba(255, 102, 0, 0.22);
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    filter 0.25s ease;
}

.traffic-domain-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow:
    0 13px 27px rgba(255, 102, 0, 0.3);
}

.traffic-domain-btn:disabled {
  cursor: wait;
  opacity: 0.72;
  transform: none;
}

/* =========================================================
   RESULTS AFTER SUBMIT
   ========================================================= */

.traffic-domain-results {
  display: grid;
  grid-template-columns:
    repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 9px;
  animation:
    trafficResultsAppear 0.35s ease both;
}

.traffic-domain-results[hidden] {
  display: none !important;
}

.traffic-domain-result-card {
  min-height: 52px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
  background: rgba(8, 8, 10, 0.48);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
}

.traffic-domain-result-card span {
  margin-bottom: 3px;
  color: #a7a7ad;
  font-size: 0.62rem;
  line-height: 1.2;
}

.traffic-domain-result-card strong {
  color: #ffffff;
  font-size: 0.9rem;
  line-height: 1.2;
}

/* Hide obsolete elements from older versions. */
.traffic-domain-badge,
.traffic-domain-card > p,
.traffic-domain-note,
.traffic-domain-stat {
  display: none !important;
}

/* =========================================================
   SIGNAL DOTS
   ========================================================= */

.traffic-signal-dot {
  position: absolute;
  z-index: 3;
  width: 6px;
  height: 6px;
  pointer-events: none;
  background: #111113;
  border: 1.3px solid #ff6600;
  border-radius: 50%;
  box-shadow:
    0 0 10px rgba(255, 102, 0, 0.54);
}

.traffic-signal-dot-one {
  top: 31%;
  left: 20%;
  animation:
    trafficDotFloatOne 7s
    ease-in-out
    infinite alternate;
}

.traffic-signal-dot-two {
  right: 22%;
  bottom: 26%;
  animation:
    trafficDotFloatTwo 8.5s
    ease-in-out
    -2s
    infinite alternate;
}

.traffic-signal-dot-three {
  top: 56%;
  left: 65%;
  width: 4px;
  height: 4px;
  opacity: 0.65;
  animation:
    trafficDotFloatThree 9.5s
    ease-in-out
    -4s
    infinite alternate;
}

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

@keyframes trafficOrangeRopeJiggle {
  0% {
    transform:
      translate3d(-1.5%, 0, 0)
      scaleX(1.03)
      skewY(-0.45deg);
  }

  22% {
    transform:
      translate3d(-0.4%, -6px, 0)
      scaleX(1.018)
      skewY(0.35deg);
  }

  48% {
    transform:
      translate3d(0.7%, 7px, 0)
      scaleX(1.035)
      skewY(-0.28deg);
  }

  73% {
    transform:
      translate3d(1.3%, -4px, 0)
      scaleX(1.02)
      skewY(0.42deg);
  }

  100% {
    transform:
      translate3d(-0.8%, 4px, 0)
      scaleX(1.028)
      skewY(-0.22deg);
  }
}

@keyframes trafficWhiteRopeOne {
  0% {
    transform:
      translate3d(-1%, -4px, 0)
      scaleX(1.025)
      skewY(0.35deg);
  }

  28% {
    transform:
      translate3d(0.3%, 6px, 0)
      scaleX(1.015)
      skewY(-0.32deg);
  }

  55% {
    transform:
      translate3d(1.2%, -3px, 0)
      scaleX(1.035)
      skewY(0.24deg);
  }

  78% {
    transform:
      translate3d(-0.2%, 7px, 0)
      scaleX(1.02)
      skewY(-0.38deg);
  }

  100% {
    transform:
      translate3d(-1.1%, 1px, 0)
      scaleX(1.03)
      skewY(0.2deg);
  }
}

@keyframes trafficWhiteRopeTwo {
  0% {
    transform:
      translate3d(1.1%, 5px, 0)
      scaleX(1.03)
      skewY(-0.3deg);
  }

  25% {
    transform:
      translate3d(0.1%, -7px, 0)
      scaleX(1.016)
      skewY(0.4deg);
  }

  52% {
    transform:
      translate3d(-1.2%, 4px, 0)
      scaleX(1.036)
      skewY(-0.24deg);
  }

  76% {
    transform:
      translate3d(0.6%, -4px, 0)
      scaleX(1.022)
      skewY(0.32deg);
  }

  100% {
    transform:
      translate3d(1.2%, 6px, 0)
      scaleX(1.03)
      skewY(-0.18deg);
  }
}

@keyframes trafficDotFloatOne {
  from {
    transform: translate(0, 0) scale(0.85);
  }

  to {
    transform: translate(28px, 17px) scale(1.08);
  }
}

@keyframes trafficDotFloatTwo {
  from {
    transform: translate(0, 0) scale(1);
  }

  to {
    transform: translate(-32px, -15px) scale(0.78);
  }
}

@keyframes trafficDotFloatThree {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(22px, -20px);
  }
}

@keyframes trafficResultsAppear {
  from {
    opacity: 0;
    transform: translateY(7px);
  }

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

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {
  .traffic-domain-background {
    min-height: 390px;
    padding-top: 38px;
  }

  .shield-traffic-check-head {
    width: min(100% - 36px, 1180px);
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .shield-traffic-check-head h2 {
    max-width: 620px;
  }

  .shield-traffic-check-head > p {
    max-width: 560px;
  }

  .traffic-domain-stage {
    min-height: 270px !important;
  }
}

@media (max-width: 600px) {
  .traffic-domain-background {
    min-height: 500px;
    padding-top: 34px;
  }

  .shield-traffic-check-head {
    width: min(100% - 26px, 1180px);
  }

  .shield-traffic-check-head h2 {
    font-size: clamp(1.85rem, 9vw, 2.55rem) !important;
  }

  .traffic-domain-stage {
    min-height: 330px !important;
  }

  .traffic-domain-card {
    width: min(100% - 24px, 500px);
    padding: 15px;
  }

  .traffic-domain-form {
    grid-template-columns: 1fr;
  }

  .traffic-domain-btn {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .traffic-domain-stage .traffic-rope,
  .traffic-signal-dot,
  .traffic-domain-results {
    animation: none !important;
  }
}

/* =========================================================
   MAGNET — REMOVE DEFAULT ICON, TEXT AND BROKEN IMAGE
   ========================================================= */

/* Remove the orange magnet SVG */
.workflow-magnet-default-icon {
  display: none !important;
}

/* Remove the Drag logo here text */
#workflow-magnet-status {
  display: none !important;
}

/* Never show the connected image until a logo is selected */
.workflow-connected-logo[hidden],
.workflow-magnet-core:not(.has-connection) .workflow-connected-logo {
  display: none !important;
}

/* Show only the real selected logo */
.workflow-magnet-core.has-connection .workflow-connected-logo {
  display: block !important;
}

/* Keep the empty magnet clean before selection */
.workflow-magnet-core:not(.has-connection) {
  background: #26262a;
  border-color: rgba(255, 102, 0, 0.55);
}

/* Prevent browser broken-image placeholder */
.workflow-connected-logo:not([src]),
.workflow-connected-logo[src=""] {
  display: none !important;
}
/* =========================================================
   CLICKRONIX — CENTERED FAQ SECTION
   Add at the very bottom of home.css
   ========================================================= */

/* Target only the dark FAQ section */
.section.alt:has(.faq) {
  text-align: center;
}

/* Center the heading block */
.section.alt:has(.faq) .section-head {
  display: block;

  width: min(100%, 920px);
  margin: 0 auto 42px;

  text-align: center;
}

/* Center eyebrow */
.section.alt:has(.faq) .section-head .eyebrow {
  justify-content: center;
  margin-bottom: 12px;
}

/* Center main FAQ heading */
.section.alt:has(.faq) .section-head h2 {
  max-width: 820px;
  margin: 0 auto;

  text-align: center;
}

/* Center intro text */
.section.alt:has(.faq) .section-head > p {
  max-width: 620px;
  margin: 16px auto 0;

  text-align: center;
}

/* Center FAQ container */
.section.alt:has(.faq) .faq {
  width: min(100%, 900px);
  margin: 0 auto;
}

/* Keep each FAQ row centered as a block */
.section.alt:has(.faq) .faq details {
  width: 100%;
  margin: 0 auto;

  text-align: left;
}

/* Question row */
.section.alt:has(.faq) .faq summary {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 24px;

  text-align: left;
}

/* Answer text */
.section.alt:has(.faq) .faq p {
  max-width: 760px;
  margin: 14px 0 0;

  text-align: left;
}

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

@media (max-width: 700px) {
  .section.alt:has(.faq) .section-head {
    width: 100%;
    margin-bottom: 32px;
  }

  .section.alt:has(.faq) .section-head h2 {
    font-size: clamp(2rem, 9vw, 2.8rem);
  }

  .section.alt:has(.faq) .section-head > p {
    max-width: 100%;
  }

  .section.alt:has(.faq) .faq {
    width: 100%;
  }

  .section.alt:has(.faq) .faq summary {
    gap: 16px;
  }
}
/* =========================================================
   CLICKRONIX — CONTINUOUS PLATFORM LOGO MARQUEE

   - Right-to-left continuous movement
   - Never pauses on hover
   - Images cannot be dragged
   - Automatically spaces 10, 20, or more logos
   - Two identical groups create the seamless loop
   ========================================================= */

.integration-logo-marquee {
  position: relative;
  z-index: 8;

  width: 100%;
  overflow: hidden;

  background: #131313;

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

.integration-logo-marquee-viewport {
  position: relative;

  width: 100%;
  overflow: hidden;

  padding: 26px 0;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      transparent 0%,
      #000 5%,
      #000 95%,
      transparent 100%
    );
}

/*
 * The track contains exactly two identical groups.
 * It moves by half of its total width.
 */
.integration-logo-marquee-track {
  display: flex;
  align-items: center;

  width: max-content;

  animation:
    clickronixLogoMarquee 38s
    linear
    infinite;

  transform: translate3d(0, 0, 0);

  will-change: transform;
  backface-visibility: hidden;

  /*
   * Prevent hover, clicking, selection and dragging
   * from interrupting the animation.
   */
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}

/*
 * Each group automatically expands according to
 * however many logo items you add.
 */
.integration-logo-marquee-group {
  flex: 0 0 auto;

  display: flex;
  align-items: center;

  gap: clamp(34px, 3.5vw, 68px);

  padding-right: clamp(34px, 3.5vw, 68px);

  width: max-content;
}

/* Individual automatically spaced logo box */
.integration-logo-item {
  flex: 0 0 auto;

  width: clamp(68px, 5vw, 92px);
  height: clamp(68px, 5vw, 92px);

  display: grid;
  place-items: center;

  background: transparent;
}

/* Preserve original PNG/WEBP/SVG sharpness */
.integration-logo-item img {
  display: block;

  width: 100%;
  height: 100%;

  object-fit: contain;
  object-position: center;

  max-width: none;

  opacity: 1;
  filter: none;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;

  transform: translateZ(0);

  backface-visibility: hidden;
  image-rendering: auto;
}

/*
 * Do not add any hover pause.
 * The animation keeps moving over hover and mouse drag.
 */
.integration-logo-marquee:hover
.integration-logo-marquee-track,
.integration-logo-marquee:active
.integration-logo-marquee-track,
.integration-logo-marquee:focus-within
.integration-logo-marquee-track {
  animation-play-state: running !important;
}

/* Exact seamless right-to-left movement */
@keyframes clickronixLogoMarquee {
  from {
    transform: translate3d(0, 0, 0);
  }

  to {
    transform: translate3d(-50%, 0, 0);
  }
}

/* =========================================================
   LARGE DESKTOP
   ========================================================= */

@media (min-width: 1700px) {
  .integration-logo-marquee-viewport {
    padding-block: 30px;
  }

  .integration-logo-marquee-group {
    gap: 68px;
    padding-right: 68px;
  }

  .integration-logo-item {
    width: 92px;
    height: 92px;
  }
}

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

@media (max-width: 1020px) {
  .integration-logo-marquee-viewport {
    padding-block: 23px;
  }

  .integration-logo-marquee-track {
    animation-duration: 34s;
  }

  .integration-logo-marquee-group {
    gap: 42px;
    padding-right: 42px;
  }

  .integration-logo-item {
    width: 76px;
    height: 76px;
  }
}

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

@media (max-width: 600px) {
  .integration-logo-marquee-viewport {
    padding-block: 18px;

    -webkit-mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 3%,
        #000 97%,
        transparent 100%
      );

    mask-image:
      linear-gradient(
        90deg,
        transparent 0%,
        #000 3%,
        #000 97%,
        transparent 100%
      );
  }

  .integration-logo-marquee-track {
    animation-duration: 28s;
  }

  .integration-logo-marquee-group {
    gap: 30px;
    padding-right: 30px;
  }

  .integration-logo-item {
    width: 62px;
    height: 62px;
  }
}

/*
 * Do not stop this specific marquee under reduced motion.
 * It remains slower instead of becoming completely static.
 */
@media (prefers-reduced-motion: reduce) {
  .integration-logo-marquee-track {
    animation:
      clickronixLogoMarquee 80s
      linear
      infinite !important;

    transform: translate3d(0, 0, 0);
  }
}

/* =========================================================
   FINAL OVERRIDE — PROTECTION CLAIMS
   Stable hover without interrupting page animations
   ========================================================= */
.protection-claims-section{position:relative;overflow:hidden;background:#17171a;color:#fff}
.protection-claims-section::before{content:"";position:absolute;right:-140px;top:-190px;width:620px;height:430px;pointer-events:none;background:radial-gradient(circle,rgba(255,102,0,.09),rgba(255,102,0,.02) 46%,transparent 72%);filter:blur(18px)}
.protection-claims-section .container{position:relative;z-index:2}
.protection-claims-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.52fr);align-items:end;gap:36px;margin-bottom:42px}
.protection-claims-head h2{max-width:760px;margin:0;color:#fff}
.protection-claims-head>p{max-width:520px;margin:0 0 4px;justify-self:end;color:#a9a9b1}
.protection-claims-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.protection-claim-card{position:relative;min-height:250px;padding:20px 20px 24px;display:flex;flex-direction:column;overflow:hidden;isolation:isolate;color:#fff;background:#1b1b1e;border:1px solid rgba(255,255,255,.14);border-radius:14px;box-shadow:none;transform:translate3d(0,0,0);transition:transform .28s cubic-bezier(.22,.61,.36,1),border-color .28s ease,box-shadow .28s ease,background-color .28s ease}
.protection-claim-card::before{content:"";position:absolute;z-index:-1;right:-95px;bottom:-155px;width:340px;height:310px;pointer-events:none;opacity:.18;background:radial-gradient(ellipse,rgba(255,102,0,.34),rgba(255,102,0,.10) 43%,transparent 72%);transform:translate3d(0,0,0) scale(.92);transition:opacity .35s ease,transform .45s ease}
.protection-claim-card::after{content:"";position:absolute;right:20px;bottom:0;left:20px;height:1px;pointer-events:none;opacity:0;transform:scaleX(.3);background:linear-gradient(90deg,transparent,#ff6600,transparent);transition:opacity .28s ease,transform .28s ease}
.protection-claim-top{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:14px;color:#ff6600;font:700 .63rem/1 ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;letter-spacing:.13em;text-transform:uppercase}
.protection-claim-top span:last-child{font-size:.86rem;transition:transform .28s ease,color .28s ease}
.protection-claim-content{position:relative;z-index:2;margin-top:auto;padding-top:52px}
.protection-claim-content strong{display:block;margin-bottom:12px;color:#ff6600;font-size:1rem;line-height:1}
.protection-claim-content h3{margin:0 0 10px;color:#fff;font-size:clamp(1.03rem,1.3vw,1.22rem);line-height:1.15;letter-spacing:-.025em}
.protection-claim-content p{max-width:280px;margin:0;color:#b8b8bf;font-size:.78rem;line-height:1.56}
.protection-claim-card:hover,.protection-claim-card:focus-visible{z-index:3;transform:translate3d(0,-5px,0);background:#1e1b1a;border-color:rgba(255,102,0,.58);box-shadow:0 22px 52px rgba(0,0,0,.30),0 0 28px rgba(255,102,0,.08);outline:none}
.protection-claim-card:hover::before,.protection-claim-card:focus-visible::before{opacity:.72;transform:translate3d(-18px,-16px,0) scale(1.1)}
.protection-claim-card:hover::after,.protection-claim-card:focus-visible::after{opacity:1;transform:scaleX(1)}
.protection-claim-card:hover .protection-claim-top span:last-child,.protection-claim-card:focus-visible .protection-claim-top span:last-child{color:#ff9a61;transform:translateX(5px)}
@media(max-width:1000px){.protection-claims-head{grid-template-columns:1fr;gap:15px}.protection-claims-head>p{justify-self:start;margin:0}.protection-claims-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.protection-claims-grid{grid-template-columns:1fr}.protection-claim-card{min-height:220px}.protection-claim-content{padding-top:40px}.protection-claim-content p{max-width:none}}

/* =========================================================
   CUSTOMER SUCCESS STORIES — ARROW SLIDER
   ========================================================= */
.customer-stories-section{overflow:hidden;background:#fff4ef;color:#17171a}
.customer-stories-head{display:flex;align-items:end;justify-content:space-between;gap:32px;margin-bottom:38px;text-align:left}
.customer-stories-head>div:first-child{max-width:820px}
.customer-stories-head h2{margin:8px 0 12px;color:#25252a;font-size:clamp(2rem,3.2vw,3.35rem)}
.customer-stories-head p{max-width:720px;margin:0;color:#666671;font-size:1rem;line-height:1.65}
.customer-stories-controls{display:flex;gap:10px;flex:0 0 auto}
.customer-stories-arrow{width:48px;height:48px;display:grid;place-items:center;cursor:pointer;color:#17171a;background:#fff;border:1px solid rgba(23,23,26,.16);border-radius:12px;font-size:1.2rem;transition:transform .2s ease,color .2s ease,background-color .2s ease,border-color .2s ease,box-shadow .2s ease}
.customer-stories-arrow:hover,.customer-stories-arrow:focus-visible{color:#fff;background:#ff6600;border-color:#ff6600;box-shadow:0 12px 28px rgba(255,102,0,.22);transform:translateY(-2px);outline:none}
.customer-stories-viewport{overflow:hidden;touch-action:pan-y}
.customer-stories-track{display:flex;gap:22px;transform:translate3d(0,0,0);transition:transform .55s cubic-bezier(.22,.61,.36,1);will-change:transform}
.customer-story-card{flex:0 0 calc((100% - 44px)/3);min-width:0;overflow:hidden;background:#fff;border:1px solid rgba(23,23,26,.08);border-radius:22px;box-shadow:0 16px 45px rgba(23,23,26,.07);transition:transform .28s ease,box-shadow .28s ease,border-color .28s ease}
.customer-story-card:hover{transform:translateY(-6px);border-color:rgba(255,102,0,.30);box-shadow:0 24px 56px rgba(23,23,26,.12)}
.customer-story-card>img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#e7e2de}
.customer-story-body{padding:25px 25px 27px}
.customer-story-body h3{margin:0 0 15px;color:#17171a;font-size:clamp(1.2rem,1.6vw,1.55rem);line-height:1.22;letter-spacing:-.03em}
.customer-story-body ul{display:grid;gap:7px;margin:0 0 22px;padding:0;list-style:none;color:#4e4e58;font-size:.91rem}
.customer-story-body li{position:relative;padding-left:20px}
.customer-story-body li::before{content:"✓";position:absolute;left:0;color:#ff6600;font-weight:800}
.customer-story-body a{display:inline-flex;align-items:center;gap:8px;color:#ff5d00;font-weight:750;font-size:.92rem}
.customer-story-body a span{transition:transform .2s ease}
.customer-story-body a:hover span{transform:translateX(4px)}
@media(max-width:980px){.customer-story-card{flex-basis:calc((100% - 22px)/2)}}
@media(max-width:680px){.customer-stories-head{align-items:flex-start}.customer-stories-controls{margin-top:4px}.customer-story-card{flex-basis:100%}.customer-stories-arrow{width:44px;height:44px}.customer-story-body{padding:22px}}
@media(prefers-reduced-motion:reduce){.customer-stories-track,.customer-story-card,.customer-stories-arrow{transition:none!important}}

/* =========================================================
   MARQUEE FINAL CLEANUP
   - Hide old/legacy images
   - Hide duplicate marquee section
   - Make current logos smaller
   ========================================================= */

/*
 * If index.html accidentally contains the marquee twice,
 * display only the first one.
 */
.integration-logo-marquee ~ .integration-logo-marquee {
  display: none !important;
}

/*
 * Hide old images placed directly inside the track.
 * Current images must be inside:
 *
 * .integration-logo-item > img
 */
.integration-logo-marquee-track > img,
.integration-logo-marquee-track > picture,
.integration-logo-marquee-group > img,
.integration-logo-marquee-group > picture,
.integration-logo-marquee-image,
.integration-logo-strip-image,
.integration-logo-marquee-track .old-logo,
.integration-logo-marquee-track .legacy-logo {
  display: none !important;
}

/* Slightly shorter/smaller logo containers */
.integration-logo-item {
  flex: 0 0 auto;

  width: clamp(54px, 4vw, 72px) !important;
  height: clamp(54px, 4vw, 72px) !important;

  display: grid;
  place-items: center;

  overflow: hidden;
  background: transparent;
}

/* Keep the actual logo smaller inside its box */
.integration-logo-item img {
  display: block !important;

  width: 82% !important;
  height: 82% !important;
  max-width: 82% !important;
  max-height: 82% !important;

  object-fit: contain !important;
  object-position: center !important;

  opacity: 1;
  filter: none;

  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Reduce the height of the complete marquee */
.integration-logo-marquee-viewport {
  padding: 19px 0 !important;
}

/* Keep reasonable spacing between logos */
.integration-logo-marquee-group {
  gap: clamp(30px, 3vw, 52px) !important;
  padding-right: clamp(30px, 3vw, 52px) !important;
}

/* Tablet */
@media (max-width: 1020px) {
  .integration-logo-marquee-viewport {
    padding-block: 17px !important;
  }

  .integration-logo-item {
    width: 62px !important;
    height: 62px !important;
  }

  .integration-logo-marquee-group {
    gap: 34px !important;
    padding-right: 34px !important;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .integration-logo-marquee-viewport {
    padding-block: 14px !important;
  }

  .integration-logo-item {
    width: 52px !important;
    height: 52px !important;
  }

  .integration-logo-marquee-group {
    gap: 25px !important;
    padding-right: 25px !important;
  }
}