/* Full-screen video background */
    .bg-video-wrapper { position: fixed; inset: 0; z-index: -10; overflow: hidden; }
    .bg-video-wrapper video{min-width:100%;min-height:100%;width:auto;height:auto;object-fit:cover;transform:scale(1.05);transform-origin:left center;object-position:left center;}

    /* Neon glow (logo + reusable)
       Fix: prevents “boxed” looking glow by adding a soft circular halo behind the image.
    */
    .logo-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 9999px;
      isolation: isolate;
    }
    .logo-wrap::before {
      content: "";
      position: absolute;
      inset: -18px;
      border-radius: 9999px;
      pointer-events: none;
      z-index: -1;

      background: radial-gradient(circle,
        rgba(56, 189, 248, 0.18) 0%,
        rgba(37, 99, 235, 0.11) 45%,
        rgba(12, 63, 249, 0.07) 70%,
        rgba(0, 0, 0, 0.00) 100%
      );
      filter: blur(12px);
      opacity: 0.9;
    }

    .logo-glow {
      opacity: 1;
      filter:
        drop-shadow(0 0 8px  rgba(56, 189, 248, 0.85))
        drop-shadow(0 0 24px rgba(37, 99, 235, 0.80))
        drop-shadow(0 0 52px rgba(12, 63, 249, 0.72));
      transform: translateZ(0);
      will-change: filter;
    }

    /* Typography / consistency */
    html, body { height: 100%; }
    body { font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, Helvetica Neue, Arial; }
    button, input, select, textarea { font: inherit; }
    input[type="range"] { accent-color: rgb(59,130,246); }

    /* Glass cards (use sparingly; glowy like the logo) */
    .card {
      background: rgba(0,0,0,0.55);
      border: 1px solid rgba(148,163,184,0.25);
      border-radius: 18px;
      padding: 18px;
      margin: 14px 0;
      box-shadow:
        0 0 0 1px rgba(59,130,246,0.15),
        0 0 30px rgba(59,130,246,0.18),
        0 16px 40px rgba(0,0,0,0.35);
      backdrop-filter: blur(10px);
    }

    /* Light cards for editor-style surfaces */
    .card-light {
      background: rgba(255,255,255,0.92);
      border: 1px solid rgba(15,23,42,0.14);
      border-radius: 18px;
      padding: 18px;
      margin: 14px 0;
      color: rgba(15,23,42,0.95);
      box-shadow:
        0 0 0 1px rgba(59,130,246,0.12),
        0 0 24px rgba(59,130,246,0.10),
        0 16px 40px rgba(0,0,0,0.18);
      backdrop-filter: blur(6px);
    }
    .card-light a { color: rgb(37, 99, 235); }
    .card-light a:hover { color: rgb(29, 78, 216); }

    /* Buttons inside light cards (better contrast on white) */
    .card-light .btn {
      background: rgba(255,255,255,0.72);
      border-color: rgba(37,99,235,0.35);
      color: rgba(15,23,42,0.92);
      box-shadow: none;
    }
    .card-light .btn:hover {
      background: rgba(37,99,235,0.12);
      transform: translateY(-1px);
    }
    .card-light .btn:active {
      transform: translateY(0px);
    }


    .row { margin: 10px 0; }

    /* Form controls (dark by default) */
    input[type="text"], input[type="number"], select, textarea {
      background: rgba(2,6,23,0.55);
      border: 1px solid rgba(148,163,184,0.35);
      color: rgba(226,232,240,0.95);
      border-radius: 12px;
      padding: 10px 12px;
      outline: none;
    }
    input[type="file"] { color: rgba(226,232,240,0.95); }
    textarea { min-height: 80px; }

    /* Form controls inside light cards */
    .card-light input[type="text"],
    .card-light input[type="number"],
    .card-light select,
    .card-light textarea {
      background: rgba(255,255,255,0.95);
      border: 1px solid rgba(148,163,184,0.65);
      color: rgba(15,23,42,0.95);
    }

    /* Buttons (match the "Request a quote" outline style by default) */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      border-radius: 9999px;
      padding: 0.75rem 1.25rem;
      border: 1px solid rgba(147,197,253,0.55);
      color: rgba(226,232,240,0.95);
      background: rgba(0,0,0,0.35);
      transition: transform 120ms ease, background 120ms ease, box-shadow 120ms ease;
      line-height: 1;
      white-space: nowrap;
      cursor: pointer;
    }
    .btn:hover { background: rgba(30,58,138,0.35); transform: translateY(-1px); }
    .btn:active { transform: translateY(0px); }

    .btn-primary {
      background: rgba(59,130,246,0.95) !important;
      border-color: rgba(147,197,253,0.70) !important;
      box-shadow: 0 0 30px rgba(59,130,246,0.55);
      color: #081225 !important;
      font-weight: 650;
    }
    .btn-primary:hover { background: rgba(96,165,250,1) !important; }

    /* Alias: the outline button style used across the site */
    .btn-secondary { /* kept for template compatibility */
      background: rgba(0,0,0,0.35) !important;
      border-color: rgba(147,197,253,0.55) !important;
      color: rgba(226,232,240,0.95) !important;
      box-shadow: none;
      font-weight: 550;
    }
    .btn-secondary:hover { background: rgba(30,58,138,0.35) !important; }

    .btn-sm { padding: 0.55rem 0.95rem; font-size: 0.9rem; }
    .btn-xs { padding: 0.35rem 0.7rem; font-size: 0.82rem; }

    .btn-danger {
      border-color: rgba(248,113,113,0.65) !important;
      color: rgba(254,226,226,0.95) !important;
    }
    .btn-danger:hover { background: rgba(127,29,29,0.35) !important; }

    /* Tables */
    table { width: 100%; border-collapse: collapse; }
    th, td { border-bottom: 1px solid rgba(148,163,184,0.2); padding: 10px 8px; vertical-align: top; }
    th { color: rgba(191,219,254,0.9); font-weight: 650; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
    td { color: rgba(226,232,240,0.92); }
    .card-light th { color: rgba(37,99,235,0.85); }
    .card-light td { color: rgba(15,23,42,0.92); border-bottom: 1px solid rgba(15,23,42,0.10); }

    /* Small section label style (used for editor card titles, etc.) */
    .eyebrow {
      font-size: 0.75rem;
      letter-spacing: 0.35em;
      text-transform: uppercase;
      color: rgba(37, 99, 235, 0.85);
    }

    /* Respect users who prefer reduced motion */
    @media (prefers-reduced-motion: reduce) {
      .bg-video-wrapper video { display: none; }
    }