:root {
      --bg-primary: #050507;
      --bg-elevated: #0b0b0f;
      --bg-card: #0f0f14;
      --accent-red: #ef3b42;
      --accent-crimson: #991b1b;
      --text-main: #f8fafc;
      --text-muted: #94a3b8;
      --font-body: 'Poppins', sans-serif;
      --font-heading: 'Garet', 'Montserrat', 'Poppins', sans-serif;
      --font-serif: 'Instrument Serif', 'Playfair Display', Georgia, serif;
      --font-script: 'Caveat', 'Playfair Display', cursive;
    }

    * { box-sizing: border-box; }

    body {
      background-color: var(--bg-primary);
      color: var(--text-main);
      font-family: var(--font-body);
      overflow-x: hidden;
      margin: 0;
    }

    ::selection {
      background: rgba(239, 59, 66, 0.3);
      color: #ffffff;
    }

    .font-poppins { font-family: 'Poppins', sans-serif; }
    .font-garet { font-family: 'Garet', 'Montserrat', sans-serif; }
    .font-serif-editorial { font-family: var(--font-serif); }
    .font-script-welcome { font-family: 'Playfair Display', 'Instrument Serif', serif; font-style: italic; }
    .font-space { font-family: 'Space Grotesk', sans-serif; }
    .font-inter { font-family: 'Inter', sans-serif; }

    .border-hairline { border-color: rgba(255, 255, 255, 0.06); }

    /* Corner bracket accents like image6.jpg */
    .corner-bracket-tl { position: relative; }
    .corner-bracket-tl::before {
      content: '';
      position: absolute;
      top: -1px; left: -1px;
      width: 18px; height: 18px;
      border-top: 1.5px solid #ef3b42;
      border-left: 1.5px solid #ef3b42;
      pointer-events: none;
      z-index: 10;
    }
    .corner-bracket-br { position: relative; }
    .corner-bracket-br::after {
      content: '';
      position: absolute;
      bottom: -1px; right: -1px;
      width: 18px; height: 18px;
      border-bottom: 1.5px solid #ef3b42;
      border-right: 1.5px solid #ef3b42;
      pointer-events: none;
      z-index: 10;
    }

    /* STRICT CONSUMER-FIRST RULE:
       Admin-only controls are 100% invisible until cheat code + password unlocks body.admin-unlocked */
    .admin-only-control {
      display: none !important;
    }
    body.admin-unlocked .admin-only-control {
      display: inline-flex !important;
    }
    body.admin-unlocked div.admin-only-control {
      display: flex !important;
    }

    /* Editable Text & Link Highlights in Admin Mode */
    body.admin-edit-active [data-editable="true"] {
      outline: 1px dashed rgba(255, 255, 255, 0.24);
      outline-offset: 3px;
      border-radius: 4px;
      transition: outline-color 0.12s ease, background-color 0.12s ease;
      cursor: text;
    }
    body.admin-edit-active [data-editable="true"]:hover {
      outline: 1.5px dashed rgba(239, 59, 66, 0.85);
      background-color: rgba(239, 59, 66, 0.05);
    }
    body.admin-edit-active [data-editable="true"].selected-editable {
      outline: 2px solid #ef3b42 !important;
      background-color: rgba(239, 59, 66, 0.09);
      box-shadow: 0 0 0 4px rgba(239, 59, 66, 0.16);
    }

    /* Editable Images & Logos in Admin Mode */
    body.admin-unlocked [data-editable-img="true"] {
      cursor: pointer !important;
      outline: 1.5px dashed rgba(245, 158, 11, 0.55);
      outline-offset: 4px;
      transition: outline 0.15s ease, transform 0.15s ease;
    }
    body.admin-unlocked [data-editable-img="true"]:hover {
      outline: 2px solid #f59e0b !important;
    }

    /* Editable Links & Buttons in Admin Mode */
    body.admin-unlocked a[href],
    body.admin-unlocked [data-link-editable="true"] {
      position: relative;
    }

    /* Magnetic Movable Slots in Drag/Swap Mode */
    body.admin-drag-mode [data-movable="true"] {
      outline: 1.5px dashed rgba(56, 189, 248, 0.65) !important;
      outline-offset: 4px;
      border-radius: 6px;
      cursor: grab !important;
      user-select: none;
      position: relative;
      transition: transform 0.18s cubic-bezier(0.2, 1, 0.3, 1), background-color 0.15s ease;
    }
    body.admin-drag-mode [data-movable="true"]:hover {
      outline: 2px solid #38bdf8 !important;
      background-color: rgba(56, 189, 248, 0.06);
    }
    /* Zero transition lag while dragging so movement is instant & snappy! */
    body.admin-drag-mode [data-movable="true"].dragging-now {
      cursor: grabbing !important;
      outline: 2px solid #ef3b42 !important;
      background-color: rgba(239, 59, 66, 0.12) !important;
      z-index: 95 !important;
      transition: none !important;
      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.85), 0 0 25px rgba(239, 59, 66, 0.4);
    }
    body.admin-drag-mode [data-movable="true"].magnetic-swap-flash {
      animation: magnetPulse 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes magnetPulse {
      0% { box-shadow: 0 0 0 0 rgba(16, 185, 129, 0.8); outline: 2.5px solid #10b981; }
      100% { box-shadow: 0 0 0 14px rgba(16, 185, 129, 0); outline: 1.5px dashed rgba(56, 189, 248, 0.65); }
    }

    /* Snap guide lines */
    .snap-guide-line {
      pointer-events: none;
      z-index: 9990;
      transition: opacity 0.06s ease;
    }

    /* Infinite Right-to-Left Marquee Scroll for Clients */
    @keyframes clarogixMarqueeRTL {
      0% { transform: translate3d(0, 0, 0); }
      100% { transform: translate3d(-50%, 0, 0); }
    }
    .clients-marquee-track {
      display: flex;
      width: max-content;
      animation: clarogixMarqueeRTL var(--marquee-duration, 36s) linear infinite;
    }
    .clients-marquee-track:hover,
    body.admin-unlocked .clients-marquee-track.pause-in-admin {
      animation-play-state: paused;
    }

    /* Cheat Code Progress Rainbow Bar (like YouTube "awesome" rainbow mode!) */
    @keyframes rainbowBarShift {
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    .cheat-rainbow-bar {
      background: linear-gradient(90deg, #ef3b42, #f59e0b, #10b981, #38bdf8, #a855f7, #ef3b42);
      background-size: 200% 100%;
      animation: rainbowBarShift 1.5s linear infinite;
    }

    ::-webkit-scrollbar { width: 8px; height: 8px; }
    ::-webkit-scrollbar-track { background: #050507; }
    ::-webkit-scrollbar-thumb { background: #27272a; border-radius: 4px; }
    ::-webkit-scrollbar-thumb:hover { background: #ef3b42; }

    .service-row { transition: background-color 0.2s ease; }
    .service-row:hover { background-color: rgba(255, 255, 255, 0.02); }

    .btn-clarogix {
      background: linear-gradient(180deg, rgba(239, 59, 66, 0.14) 0%, rgba(153, 27, 27, 0.24) 100%);
      border: 1px solid rgba(239, 59, 66, 0.45);
      transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    }
    .btn-clarogix:hover {
      background: linear-gradient(180deg, rgba(239, 59, 66, 0.28) 0%, rgba(185, 28, 28, 0.38) 100%);
      border-color: #ef3b42;
      box-shadow: 0 0 28px rgba(239, 59, 66, 0.28);
      transform: translateY(-1px);
    }