/* ════════════════════════════════════════════════════════════════════════
   DEVCONTROL — BRAND THEME
   ────────────────────────────────────────────────────────────────────────
   The only file you edit to re-skin this site. Structure, type scale, radii,
   layout and motion all live in product.css, which loads first; this file
   overrides just what makes DEVCONTROL look like itself.
   ════════════════════════════════════════════════════════════════════════ */
:root{
  --accent:#4D2FF5; --accent-text:#9D8CFF;
  --accent-soft:rgba(77,47,245,.14); --accent-line:rgba(125,100,255,.45);
  --glow:0 10px 40px -8px rgba(77,47,245,.5); --glow-soft:rgba(77,47,245,.35);

  --bg:#000000; --surface:#0E0F13; --surface-2:#13151B;
  --nav-bg:rgba(0,0,0,.72);
}

@media (prefers-color-scheme:light){
  :root{
    --accent-text:#4D2FF5;
    --accent-soft:rgba(77,47,245,.09); --accent-line:rgba(77,47,245,.32);
    --glow:0 10px 34px -10px rgba(77,47,245,.42); --glow-soft:rgba(77,47,245,.22);

    --bg:#FFFFFF; --surface:#F7F7F9; --surface-2:#F0F0F4;
    --nav-bg:rgba(255,255,255,.78);
  }
}

/* logo — SWAP: replace with the real DevControl mark */
.logo{position:relative;border-radius:28%;
  background:linear-gradient(145deg,#7A5CFF,var(--accent));box-shadow:var(--glow)}
.logo i{position:absolute;border:1.6px solid var(--on-accent);border-radius:2px}
.logo i:nth-child(1){width:42%;height:32%;top:19%;right:15%;opacity:.65}
.logo i:nth-child(2){width:42%;height:32%;left:15%;bottom:19%;background:rgba(255,255,255,.22)}
.logo i:nth-child(3){width:24%;height:24%;left:44%;top:40%;border-width:1.6px 0 0 1.6px;
  border-radius:0;transform:rotate(-45deg)}