/* Advanced digital-networking background for all public pages */

body.public-site {
  --pub-glow-a: rgba(245, 130, 12, 0.2);
  --pub-glow-b: rgba(34, 197, 94, 0.14);
  --pub-glow-c: rgba(56, 189, 248, 0.12);
  --pub-section-base: #121318;
  --pub-section-mid: #17181B;
  position: relative;
  isolation: isolate;
  background-color: var(--pub-section-base);
  background-image:
    radial-gradient(ellipse 78% 55% at 8% 0%, var(--pub-glow-a), transparent 60%),
    radial-gradient(ellipse 70% 50% at 92% 12%, var(--pub-glow-b), transparent 58%),
    radial-gradient(ellipse 80% 48% at 50% 100%, var(--pub-glow-c), transparent 62%),
    radial-gradient(circle 48vmin at 78% 48%, rgba(245, 130, 12, 0.11), transparent 72%),
    radial-gradient(circle 40vmin at 14% 72%, rgba(34, 197, 94, 0.1), transparent 72%),
    radial-gradient(circle 34vmin at 48% 38%, rgba(56, 189, 248, 0.07), transparent 70%),
    linear-gradient(180deg, #14151a 0%, var(--pub-section-mid) 42%, #101116 100%);
  background-size: 170% 170%, 160% 160%, 150% 150%, 130% 130%, 130% 130%, 120% 120%, 100% 100%;
  background-position: 0% 35%, 100% 0%, 50% 100%, 82% 28%, 8% 74%, 50% 40%, 0 0;
  background-attachment: fixed;
  animation: pub-mesh-drift 32s ease-in-out infinite alternate;
}

/* Soft network lattice */
body.public-site::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image:
    radial-gradient(circle at center, rgba(245, 130, 12, 0.22) 0 1.2px, transparent 1.6px),
    linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
  background-size: 72px 72px, 72px 72px, 72px 72px;
  background-position: 0 0, 0 0, 0 0;
  mask-image: radial-gradient(ellipse 95% 75% at 50% 28%, #000 10%, transparent 82%);
  opacity: 0.38;
  animation: pub-grid-pan 56s linear infinite;
}

/* Secondary glow orb */
body.public-site::after {
  content: '';
  position: fixed;
  z-index: 0;
  pointer-events: none;
  width: min(62vw, 700px);
  height: min(62vw, 700px);
  top: 8%;
  right: -14%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 34%, var(--pub-glow-a), transparent 66%),
    radial-gradient(circle at 72% 68%, var(--pub-glow-b), transparent 70%),
    radial-gradient(circle at 50% 50%, rgba(56, 189, 248, 0.12), transparent 72%);
  filter: blur(14px);
  opacity: 0.9;
  animation: pub-orb-float 20s ease-in-out infinite;
}

/* Live connection network canvas */
.pub-network-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0.5;
}

/* Floating product / social icons */
.pub-float-icons {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.pub-float-icons__item {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: calc(42px * var(--s, 1));
  height: calc(42px * var(--s, 1));
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02)),
    rgba(23, 24, 27, 0.35);
  color: rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(2px);
  transform: translate3d(0, 0, 0);
  animation: pub-icon-float 14s ease-in-out infinite;
  animation-delay: var(--d, 0s);
  opacity: 0.55;
}

.pub-float-icons__item svg {
  width: 58%;
  height: 58%;
  display: block;
}

.pub-float-icons__item--card {
  width: calc(58px * var(--s, 1));
  height: calc(40px * var(--s, 1));
  border-radius: 10px;
  color: rgba(245, 130, 12, 0.85);
  border-color: rgba(245, 130, 12, 0.28);
  background:
    linear-gradient(145deg, rgba(245, 130, 12, 0.16), rgba(255, 255, 255, 0.03)),
    rgba(23, 24, 27, 0.4);
}

.pub-float-icons__item--card svg {
  width: 70%;
  height: 70%;
}

.pub-float-icons__item--phone {
  width: calc(30px * var(--s, 1));
  height: calc(44px * var(--s, 1));
  border-radius: 10px;
  color: rgba(56, 189, 248, 0.85);
  border-color: rgba(56, 189, 248, 0.28);
}

.pub-float-icons__item--qr,
.pub-float-icons__item--nfc {
  color: rgba(245, 130, 12, 0.8);
  border-color: rgba(245, 130, 12, 0.22);
}

.pub-float-icons__item--wa {
  color: rgba(34, 197, 94, 0.9);
  border-color: rgba(34, 197, 94, 0.28);
}

.pub-float-icons__item--in,
.pub-float-icons__item--mail,
.pub-float-icons__item--share {
  color: rgba(56, 189, 248, 0.85);
  border-color: rgba(56, 189, 248, 0.22);
}

.pub-float-icons__item--chart {
  color: rgba(245, 130, 12, 0.8);
}

.pub-float-icons__item--leaf {
  color: rgba(34, 197, 94, 0.9);
  border-color: rgba(34, 197, 94, 0.28);
}

.pub-float-icons__item--x {
  color: rgba(255, 255, 255, 0.55);
}

.pub-float-icons__item--soft {
  opacity: 0.4;
}

@keyframes pub-icon-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) rotate(-2deg);
  }
  25% {
    transform: translate3d(8px, -14px, 0) rotate(2deg);
  }
  50% {
    transform: translate3d(-6px, 10px, 0) rotate(-1deg);
  }
  75% {
    transform: translate3d(10px, 6px, 0) rotate(3deg);
  }
}


body.public-site > .skip-link {
  position: relative;
  z-index: 1100;
}

body.public-site > header {
  position: fixed;
  z-index: 1000;
}

body.public-site > main,
body.public-site > footer {
  position: relative;
  z-index: 1;
}

/* Sections stay transparent so the page background shows through */
body.public-site main > section,
body.public-site .landing-page section {
  position: relative;
  z-index: 1;
  color: var(--white);
  border-top: 1px solid var(--hairline);
  background: transparent;
}

body.public-site main > section::before,
body.public-site main > section::after,
body.public-site .landing-page section::before,
body.public-site .landing-page section::after {
  content: none;
  display: none;
}

body.public-site main > section > .wrap,
body.public-site .landing-page section > .wrap {
  position: relative;
  z-index: 1;
}

body.public-site main > section.hero,
body.public-site .landing-page .landing-hero {
  border-top: none;
}

/* Glass cards on public pages */
body.public-site:not(.landing-site) .p-card,
body.public-site:not(.landing-site) .price-card,
body.public-site:not(.landing-site) .blog-card,
body.public-site:not(.landing-site) .faq-item,
body.public-site:not(.landing-site) .contact-card,
body.public-site:not(.landing-site) .contact-form-wrap,
body.public-site:not(.landing-site) .template-card,
body.public-site:not(.landing-site) .testi-card,
body.public-site:not(.landing-site) .philo,
body.public-site:not(.landing-site) .solution-highlights__chip,
body.public-site:not(.landing-site) .legal-content,
body.public-site:not(.landing-site) .blog-article-content {
  backdrop-filter: blur(6px);
}

body.public-site:not(.landing-site) .p-card,
body.public-site:not(.landing-site) .price-card,
body.public-site:not(.landing-site) .blog-card,
body.public-site:not(.landing-site) .faq-item,
body.public-site:not(.landing-site) .contact-card,
body.public-site:not(.landing-site) .contact-form-wrap,
body.public-site:not(.landing-site) .template-card,
body.public-site:not(.landing-site) .testi-card {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.04), transparent 40%),
    rgba(42, 43, 48, 0.82);
}

/* Center incomplete card rows on public inner pages (e.g. cards 5–6) */
body.public-site:not(.landing-site) .grid-cards,
body.public-site:not(.landing-site) .pricing-table,
body.public-site:not(.landing-site) #platform .grid-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: clamp(14px, 3vw, 20px);
}

body.public-site:not(.landing-site) .grid-cards > *,
body.public-site:not(.landing-site) #platform .grid-cards > *,
body.public-site:not(.landing-site) .pricing-table > * {
  box-sizing: border-box;
  flex: 0 1 calc((100% - 60px) / 4);
  max-width: calc((100% - 60px) / 4);
  min-width: 0;
  width: 100%;
}

body.public-site:not(.landing-site) #platform .grid-cards > *,
body.public-site:not(.landing-site) .pricing-table > * {
  flex-basis: calc((100% - 40px) / 3);
  max-width: calc((100% - 40px) / 3);
}

@media (max-width: 1100px) {
  body.public-site:not(.landing-site) .grid-cards > * {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }
}

@media (max-width: 900px) {
  body.public-site:not(.landing-site) #platform .grid-cards > *,
  body.public-site:not(.landing-site) .pricing-table > * {
    flex-basis: calc((100% - 20px) / 2);
    max-width: calc((100% - 20px) / 2);
  }

  .pub-network-bg {
    opacity: 0.35;
  }

  .pub-float-icons__item {
    opacity: 0.4;
    width: calc(34px * var(--s, 1));
    height: calc(34px * var(--s, 1));
  }

  .pub-float-icons__item--card {
    width: calc(46px * var(--s, 1));
    height: calc(32px * var(--s, 1));
  }

  .pub-float-icons__item--phone {
    width: calc(24px * var(--s, 1));
    height: calc(36px * var(--s, 1));
  }

  .pub-float-icons__item--soft,
  .pub-float-icons__item--x,
  .pub-float-icons__item--chart {
    display: none;
  }
}

@media (max-width: 560px) {
  body.public-site:not(.landing-site) .grid-cards > *,
  body.public-site:not(.landing-site) #platform .grid-cards > *,
  body.public-site:not(.landing-site) .pricing-table > * {
    flex-basis: 100%;
    max-width: 100%;
  }
}

@keyframes pub-mesh-drift {
  0% {
    background-position: 0% 35%, 100% 0%, 50% 100%, 82% 28%, 8% 74%, 50% 40%, 0 0;
  }
  50% {
    background-position: 36% 12%, 64% 48%, 28% 82%, 55% 52%, 22% 42%, 42% 56%, 0 0;
  }
  100% {
    background-position: 78% 58%, 18% 28%, 68% 18%, 28% 72%, 68% 18%, 58% 28%, 0 0;
  }
}

@keyframes pub-grid-pan {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 72px 72px, 72px 72px, 72px 72px;
  }
}

@keyframes pub-orb-float {
  0%,
  100% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  33% {
    transform: translate3d(-7%, 11%, 0) scale(1.08);
  }
  66% {
    transform: translate3d(5%, -9%, 0) scale(0.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.public-site,
  body.public-site::before,
  body.public-site::after,
  .pub-float-icons__item {
    animation: none !important;
  }

  .pub-network-bg {
    opacity: 0.28;
  }

  .pub-float-icons__item {
    opacity: 0.32;
  }
}