/* Shared homepage background. Keep page-specific content surfaces intact. */
body:not(.embedded) {
  background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,.05) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 50%, rgba(255,255,255,.02) 0%, transparent 40%),
    radial-gradient(ellipse at 20% 80%, rgba(255,255,255,.01) 0%, transparent 40%), #0D0D0D;
  background-attachment: fixed;
  isolation: isolate;
}
:root[data-theme="light"] body:not(.embedded), html:not(.dark-mode) body.public-auth-background {
  background-color: #f8f7f4;
}
body:not(.embedded) > .ce-background-layer { z-index: -1; }
body.embedded > .ce-background-layer { display: none; }
body.public-reset-background::before { content: none; }
    .ce-background-layer {
      position: fixed;
      top: 0;
      left: 0;
      width: 100vw;
      height: 100vh;
      overflow: hidden;
      pointer-events: none;
      z-index: 0;
      background: radial-gradient(circle at 70% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 60%);
    }

    /* Global Blueprint Grid */
    .ce-background-layer::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
      background-size: 50px 50px;
      opacity: 0.3;
      mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
      -webkit-mask-image: radial-gradient(circle at center, black 40%, transparent 100%);
    }

    .ce-element {
      position: absolute;
      color: rgba(255, 255, 255, 0.3);
      opacity: 0.6;
      filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.1));
    }

    .ce-element svg {
      width: 100%;
      height: 100%;
      stroke: currentColor;
      fill: none;
      stroke-width: 1.5;
      stroke-linecap: round;
      stroke-linejoin: round;
    }

    /* Silhouette: Suspension Bridge */
    .ce-bridge {
      width: 800px;
      height: 400px;
      bottom: -50px;
      right: -100px;
      opacity: 0.15;
      transform: rotate(-5deg);
    }

    /* Silhouette: Tower Crane */
    .ce-crane {
      width: 500px;
      height: 500px;
      top: -50px;
      right: 10%;
      opacity: 0.15;
      transform: rotate(10deg);
    }

    /* Tool: Compass */
    .ce-compass {
      width: 180px;
      height: 180px;
      top: 15%;
      left: 10%;
      opacity: 0.2;
      animation: float-slow 12s ease-in-out infinite;
    }

    /* Tool: Set Square / Triangle Ruler */
    .ce-ruler {
      width: 140px;
      height: 140px;
      bottom: 20%;
      left: 20%;
      opacity: 0.18;
      transform: rotate(15deg);
      animation: float 15s ease-in-out infinite reverse;
    }

    /* Tool: Hard Hat */
    .ce-helmet {
      width: 100px;
      height: 100px;
      top: 25%;
      right: 35%;
      opacity: 0.15;
      animation: float 18s ease-in-out infinite;
    }

    /* Animations */
    @keyframes float {

      0%,
      100% {
        transform: translateY(0) rotate(15deg);
      }

      50% {
        transform: translateY(-20px) rotate(10deg);
      }
    }

    @keyframes float-slow {

      0%,
      100% {
        transform: translateY(0) rotate(0deg) scale(1);
      }

      50% {
        transform: translateY(-30px) rotate(5deg) scale(1.05);
      }
    }


:root[data-theme="light"] .ce-element, html:not(.dark-mode) .public-auth-background .ce-element { color: rgba(23,21,18,.3); }
:root[data-theme="light"] .ce-background-layer::before, html:not(.dark-mode) .public-auth-background .ce-background-layer::before {
  background-image: linear-gradient(rgba(23,21,18,.03) 1px, transparent 1px), linear-gradient(90deg,rgba(23,21,18,.03) 1px, transparent 1px);
}
@media (prefers-reduced-motion: reduce) { .ce-element { animation: none; } }